<style>
  .classD1 {
    width: 138px;
    height: 78px;
    border-radius: 6px;
    margin: 0 auto;
    margin-top: 15px;
    overflow: hidden;
  }

  .text_Degree {
    font-size: 16px;
    text-align: center;
    width: 100%;
    line-height: 21px;
    margin-top: 12px;
    color: #181E33;
  }

  .nav-content {
    margin-top: 8px;
    padding-bottom: 30px;
  }

  .nav-content ul {
    padding: 12px 0;
  }

  .nav-content ul li {
    width: 100%;
    height: 54px;
    position: relative;
    padding-left: 47px;
    height: 54px;
    line-height: 54px;
    font-size: 14px;
    color: #737886;
    cursor: pointer;
  }

  .nav-content ul li i {
    display: inline-block;
    font-size: 18px;
    color: #737886;
    margin-right: 6px;
    position: relative;
    top: 1px;
  }

  .nav-content ul li:hover {
    background: #f6f9fd;
  }

  .checkedLi {
    background-color: #f6f9fd;
    color: #3B90FF !important;
  }

  .checkedLi i {
    color: #3B90FF !important;
  }

  .course-menu-box {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 100%;
    height: 100%;
    background: #fff;
  }

</style>
<template>
  <div class="row items-stretch full-height">
    <div style="box-shadow: 2px 0 10px 0 rgba(237,238,240,0.50);font-family:perfectFont;"
      class="text-subtitle2 courseInfo_Bg">
      <div class="full-width course-menu-box q-pt-md">
        <q-list style="width:180px;overflow:hidden">
          <div class="classD1">
            <img style="width:100%;height:100%;" alt="" :src="courseInfo.CoverImg" />
          </div>
          <div class="text_Degree">{{courseInfo.CourseName}}</div>
          <div class="nav-content">
            <ul>
              <!-- <li :class="{'checkedLi':commonIndex==1}" @click="gotoPage('question',1)">
                <i class="iconfont icon-tiku"></i>题库
              </li> -->
              <li :class="{'checkedLi':commonIndex==2}" @click="gotoPage('teachplan',2)">
                <i style="font-size:20px;" class="iconfont icon-PPT"></i>教案
              </li>
              <li :class="{'checkedLi':commonIndex==3}" @click="gotoPage('chapter',3)">
                <i class="iconfont icon-icon_zhangjielianxi"></i>章节
              </li>
              <li :class="{'checkedLi':commonIndex==4}" @click="gotoPage('coursejob',4)">
                <i class="iconfont icon-icon_zhangjielianxi"></i>作业
              </li>
            </ul>
          </div>
        </q-list>
      </div>
    </div>
    <div class="col" style="background: #f2f4f7;">
      <q-scroll-area class="fit" :thumb-style="thumbStyle" :bar-style="barStyle" visible>
        <router-view style="margin:20px" />
      </q-scroll-area>
    </div>
  </div>
</template>
<script>
  import {
    queryCourseInfo,
  } from '../../api/course/index'
  export default {
    name: 'courseinfo',
    components: {},
    data() {
      return {
        currentPath: "/course/courseinfo",
        thumbStyle: {
          right: '0px',
          borderRadius: '0px',
          backgroundColor: '#1d1d1d',
          width: '6px',
          opacity: 1
        },
        barStyle: {
          right: '0px',
          borderRadius: '0px',
          backgroundColor: '#999',
          width: '6px',
          opacity: 0.5
        },
        CourseId: 0,
        commonIndex: 2, //选中
        courseInfo: {}, //课程信息
      }
    },
    watch: {
      $route: {
        handler: function (route) {
          var newPath = route.path.split("?")[0].toLowerCase();
          switch (newPath) {
            case "/course/courseinfo":
              this.commonIndex = 1;
              break;
            case "/course/teachplan":
              this.commonIndex = 2;
              break;
            case "/course/chapter":
              this.commonIndex = 3;
              break;
            case "/course/coursejob":
              this.commonIndex = 4;
              break;
          }
        },
        immediate: true
      }
    },
    computed: {

    },
    created() {
      if (this.$route.query) {
        this.CourseId = this.$route.query.CourseId
      }
      this.getCourseInfo();
    },
    mounted() {
      this.gotoPage('teachplan', 2);
    },
    methods: {
      //获取课程信息
      getCourseInfo() {
        queryCourseInfo({
          CourseId: this.CourseId
        }).then(res => {
          this.courseInfo = res.Data;
        })
      },
      //页面跳转
      gotoPage(routename, type) {
        this.commonIndex = type;
        var tempStr = '/course/' + routename + '?CourseId=' + this.CourseId;
        this.$router.push({
          path: tempStr
        });
      }
    },
  }

</script>

<style>
  .full-width {
    height: 100%;
  }

  .courseInfo_Bg {
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100% auto;
    height: 100%;

  }

  .hide-scrollbar {
    scrollbar-width: 5px !important;
    -ms-overflow-style: marquee, panner !important;
  }

  .suojin {
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .5);

  }

  .suojin i {
    font-size: 24px;
    color: #636363;
  }

  course-menu-box {
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 100%;
    height: 100%;
    background-color: #fff;
  }

  course-menu-box::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }

  course-menu-box::-webkit-scrollbar-thumb {
    border-radius: 4px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #bbb;
  }

  @keyframes shouqidonghua {
    from {
      width: 180px;
    }

    to {
      width: 60px;
    }
  }

  .changeShowqidonghua {
    animation: shouqidonghua 0.5s linear;
    width: 60px !important;
    overflow-x: hidden;
  }

  @keyframes shouqidonghua {
    from {
      width: 180px;
    }

    to {
      width: 60px;
    }
  }

  .changeShowqidonghua {
    animation: shouqidonghua 0.5s linear;
    width: 60px !important;
    overflow-x: hidden;
  }

</style>
