<template>
  <div class="footer">
      <div>
        <router-link to="/" >
          <a @click="changePage(1)" :class="{active:choosePage===1}">
            <img  v-if='choosePage===1' src="../../../static/img/shouye.png">
            <img  v-if='choosePage!==1' src="../../../static/img/shouye1.png">
            <p>讲堂</p>
          </a>
        </router-link>
      </div>
    <div>
      <div class="bofang" @click="goDetail"><img src="../../../static/img/bofang.png"></div>
    </div>
    <div>
      <router-link to="/course" >
        <a @click="changePage(2)" :class="{active:choosePage===2}">
          <img v-if='choosePage===2' src="../../../static/img/shu2.png">
          <img v-if='choosePage!==2' src="../../../static/img/shu3.png">
          <p>已学</p>
        </a>
      </router-link>
    </div>
  </div>

</template>

<script>
  import { getStore } from '@/utils/storage'
    export default {
      name:"Footer",
      props:["bottom"],
      data(){
        return {
          choosePage: 1
        }

      },
      methods:{
        // 通过路由改变导航文字样式
        getPage () {
          if (this.$route.path === '/' || this.$route.path === '/home' || this.$route.path === '/courseAll') {
            this.changePage(1)
          } else if (this.$route.path === '/course') {
            this.changePage(2)
          }
        },
        // 导航栏文字样式改变
        changePage (v) {
          this.choosePage = v
        },
        goDetail () {
          this.getData('/Home/getCourseList',{token:getStore('token'), type: 2}).then(
            data=>{
              if(data.code==1){
                this.$router.push({path: '/courseDetail?id=' + data.data[0].id});
              }else{
                Toast(data.msg);
              }
            },
            err=>{  })
        }
      },
      watch: {
        '$route': 'getPage'
      },
      mounted () {
        this.getPage()
      }
    }
</script>

<style lang="scss" scoped>
  .footer{
    width: 100%;
    height: 5rem;
    background: #fff;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    img{
      width: 2.5rem;
      height: 2.5rem;
    }
    div{
      width: 33%;
      color: #C5C5C5;
    }
    div:nth-child(2){
      width: 6rem;
      height: 6rem;
      background: #fff;
      border-radius: 50%;
      position: relative;
      top: -1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      .bofang{
        width: 5rem;
        height: 5rem;
        background: #F3F4F6;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        img{
          width: 2rem;
          height: 2rem;
        }
      }
    }
    a{
      color: #C5C5C5;
    }
  }

</style>
