<template>
  <div >
    <!-- <div
      style="
        border-bottom: 1px solid rgb(219, 219, 219);
        padding: 5px 0px 5px 10px;
        color: #565656;
      "
    > -->
    <!-- <i class="el-icon-collection-tag"></i> 我的导航 -->
    <!-- </div> -->
    <div class="uc-menu" style="background-color: #ffffff;padding-bottom:20px">
      <el-menu
        :default-active="activeMenu"
        router
        active-text-color="#3379FB"
        :default-openeds="['manageTodo','manageFinish','teacherTodo','teacherFinish','myqa','notice','mystudy', 'course', 'exam', 'u001', 'u002', 'u003', 'u004']"
        class="el-menu-vertical"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse">
        <el-submenu index="manageTodo" v-show="curIdentity == 3">
          <template slot="title" class="oneheight">
            <svg-icon  icon-class="await" class="fontsamll" style="font-size:17px"></svg-icon>
            <span>我的待办</span>
          </template>
          <el-menu-item index="/examine/notapproved">
              <span class="textl"><el-badge :value="messagesBeReviewed" class="item" :hidden="messagesBeReviewed == 0">待审核的课程</el-badge></span>
          </el-menu-item>
        </el-submenu>
        <el-submenu index="manageFinish" v-show="curIdentity == 3">
          <template slot="title">
            <svg-icon icon-class="already"></svg-icon>
            <!-- <i class="el-icon-s-grid"></i> -->
            <span>我的已办</span>
          </template>
          <el-menu-item index="/examine/reviewed">
            <!-- <i class="el-icon-menu"></i> -->
            <span slot="title" class="textl">已审核的课程</span>
          </el-menu-item>
        </el-submenu>
        <el-submenu index="course" v-show="curIdentity == 3">
          <template slot="title">
            <svg-icon icon-class="course" style="font-size:15px"></svg-icon>
            <!-- <i class="el-icon-s-grid"></i> -->
            <span>课程</span>
          </template>
          <el-menu-item index="/course/manage">
            <!-- <i class="el-icon-menu"></i> -->
            <span slot="title" class="textl">课程管理</span>
          </el-menu-item>
          <el-menu-item index="/course/courseware">
            <!-- <i class="el-icon-menu"></i> -->
            <span slot="title" class="textl">课件管理</span>
          </el-menu-item>
        </el-submenu>
        <el-submenu index="exam" v-show="curIdentity == 3">
          <template slot="title">
            <svg-icon icon-class="exam" style="font-size:14px"></svg-icon>
            <span>考试</span>
          </template>
          <el-menu-item index="/exam/question">
            <!-- <i class="el-icon-menu"></i> -->
            <span slot="title" class="textl">试题管理</span>
          </el-menu-item>
          <el-menu-item index="/exam/testpaper">
            <!-- <i class="el-icon-menu"></i> -->
            <span slot="title" class="textl">试卷管理</span>
          </el-menu-item>
          <el-menu-item index="/exam/list">
            <!-- <i class="el-icon-menu"></i> -->
            <span slot="title" class="textl">考试管理</span>
          </el-menu-item>
        </el-submenu>
		<!--增加一个说明-->
        <!-- <el-menu-item index="/manage/teachers" v-show="curIdentity == 3">
          <svg-icon icon-class="teather"></svg-icon>
          <span slot="title">教师管理</span>
        </el-menu-item> -->
        <el-menu-item index="/case/manage" v-show="curIdentity == 3">
          <svg-icon icon-class="case"></svg-icon>
          <span slot="title">案例管理</span>
        </el-menu-item>
        <el-menu-item index="/manage/ugroups" v-show="curIdentity == 3">
          <svg-icon icon-class="audience" style="font-size:16px"></svg-icon>
          <span slot="title">受众管理</span>
        </el-menu-item>
        <el-menu-item index="/article/manage" v-show="curIdentity == 3">
          <svg-icon icon-class="essayicon" style="font-size:17px"></svg-icon>
          <span slot="title">文章管理</span>
        </el-menu-item>
        <el-menu-item index="/qa/manage" v-show="curIdentity == 3">
          <svg-icon icon-class="interlocution"></svg-icon>
          <span slot="title">问答管理</span>
        </el-menu-item>
        <el-menu-item v-show="curIdentity == 3">
          <template slot="title">
            <svg-icon icon-class="administrator" style="font-size:17px"></svg-icon>
            <span><a href="/resource/index.html" target="_blank">旧版管理员界面</a></span>
          </template>
          <!-- <i class="el-icon-menu"></i> -->
        </el-menu-item>
        <el-menu-item v-show="curIdentity == 3">
          <template slot="title">
            <svg-icon icon-class="management" style="font-size:16px"></svg-icon>
            <span><a href="https://u.boe.com/train/manager/index.html" target="_blank">业务支援读书会管理</a></span>
          </template>
        </el-menu-item>
        <!-- <el-menu-item index="/qa/manage" v-show="curIdentity == 3" disabled>
          <i class="el-icon-menu"></i>
          <span slot="title">必修任务</span>
        </el-menu-item>
        <el-menu-item index="/qa/manage" v-show="curIdentity == 3" disabled>
          <i class="el-icon-menu"></i>
          <span slot="title">混合式学习项目</span> </el-menu-item
        ><el-menu-item index="/qa/manage" v-show="curIdentity == 3" disabled>
          <i class="el-icon-menu"></i>
          <span slot="title">报表</span> </el-menu-item
        ><el-menu-item index="/qa/manage" v-show="curIdentity == 3" disabled>
          <i class="el-icon-menu"></i>
          <span slot="title">评估</span> </el-menu-item
        ><el-menu-item index="/qa/manage" v-show="curIdentity == 3" disabled>
          <i class="el-icon-menu"></i>
          <span slot="title">推送任务</span> </el-menu-item
        ><el-menu-item index="/qa/manage" v-show="curIdentity == 3" disabled>
          <i class="el-icon-menu"></i>
          <span slot="title">测评</span> </el-menu-item
        ><el-menu-item index="/qa/manage" v-show="curIdentity == 3" disabled>
          <i class="el-icon-menu"></i>
          <span slot="title">证书管理</span>
        </el-menu-item> -->

        <!--teacher-->
        <el-submenu index="teacherTodo" v-show="curIdentity == 2">
          <template slot="title">
            <svg-icon icon-class="await" style="font-size:17px"></svg-icon>
            <!-- <i class="el-icon-s-grid"></i> -->
            <span class="icon-text">我的待办</span>
          </template>
          <el-menu-item index="/need/waitaudit">
            <!-- <i class="el-icon-menu"></i> -->
            <span slot="title" class="textl">待审核的课程</span>
          </el-menu-item>
          <el-menu-item index="/need/qareply">
            <!-- <i class="el-icon-menu"></i> -->
            <span slot="title" class="textl">待回答问题</span>
          </el-menu-item>
        </el-submenu>
        <el-submenu index="teacherFinish" v-show="curIdentity == 2">
          <template slot="title">
            <!-- <i class="el-icon-s-grid"></i> -->
            <svg-icon icon-class="already"></svg-icon>
            <span>我的已办</span>
          </template>
          <el-menu-item index="/need/waitaudited">
            <!-- <i class="el-icon-menu"></i> -->
            <span slot="title" class="textl">已审核的课程</span>
          </el-menu-item>
          <el-menu-item index="/need/qafinish">
            <!-- <i class="el-icon-menu"></i> -->
            <span slot="title" class="textl">已回答问题</span>
          </el-menu-item>
        </el-submenu>
        <el-submenu index="u003" v-show="curIdentity == 2">
          <template slot="title">
            <svg-icon icon-class="course" style="font-size:16px"></svg-icon>
            <!-- <i class="el-icon-s-grid"></i> -->
            <span>我的课程</span>
          </template>
          <el-menu-item index="/need/course">
            <!-- <i class="el-icon-menu"></i> -->
            <span slot="title" class="textl">我开发的课程</span>
          </el-menu-item>
          <!--
                <el-menu-item index="u0032">
                  <i class="el-icon-menu"></i>
                  <span slot="title"><router-link to="/teaching/course">授课记录</router-link></span>
                </el-menu-item>
                -->
        </el-submenu>
        <!-- <el-menu-item index="/user/tools" v-show="curIdentity == 2">
          <i class="el-icon-menu"></i>
          <span slot="title">功能百宝箱</span>
        </el-menu-item>  -->
        <el-submenu index="u004" v-show="curIdentity == 2">
          <template slot="title">
            <i class="el-icon-s-grid" style="color:#0165FF"></i>
            <span>功能百宝箱</span>
          </template>
          <!-- <el-menu-item  index="" disabled>
            <i class="el-icon-menu"></i>
            <span slot="title">课程开发教程</span>
          </el-menu-item>
          <el-menu-item disabled>
            <i class="el-icon-menu"></i>
            <span slot="title">课程开发模板</span>
          </el-menu-item> -->
          <el-menu-item index="/user/developtoolsdown">
            <!-- <i class="el-icon-menu" ></i> -->
            <span slot="title" class="textl">开发工具下载</span>
          </el-menu-item>
          <!-- <el-menu-item disabled>
            <i class="el-icon-menu"></i>
            <span slot="title">录播室预约</span>
          </el-menu-item>
            <el-menu-item disabled>
            <i class="el-icon-menu"></i>
            <span slot="title">专家库</span>
          </el-menu-item> -->
        </el-submenu>
        <!--user-->
       
        <!-- <el-menu-item >
          <svg-icon icon-class="myubi"></svg-icon>
        <span slot="title">我的U币</span>
      </el-menu-item> -->
      <el-menu-item index="/user/ucurrency" v-show="curIdentity == 1">
          <svg-icon :icon-class="activeMenu == '/user/ucurrency'?'myubi-active':'myubi'"></svg-icon>
          <span slot="title">我的U币</span>
        </el-menu-item>
       <el-menu-item index="/user/medal" v-show="curIdentity == 1">
          <svg-icon :icon-class="activeMenu == '/user/medal'?'myxunzhang-active':'myxunzhang'"></svg-icon>
          <span slot="title">我的勋章</span>
      </el-menu-item>
        <el-submenu index="mystudy" v-show="curIdentity == 1">
          <template slot="title">
            <!-- <i class="el-icon-s-grid"></i> -->
            <svg-icon icon-class="mystudy"></svg-icon>
            <span>我的学习</span>
          </template>
          <el-menu-item index="/uc/study/task">
            <!-- <i class="el-icon-menu"></i> -->
            <span slot="title" class="study textl"><el-badge :value="studyTaskCount||''" class="item">学习任务</el-badge></span>
          </el-menu-item>
          <el-menu-item index="/uc/study/courses">
            <!-- <i class="el-icon-menu"></i> -->
            <!-- <span slot="title" class="textl">自主学习</span> -->
            <span slot="title" class="textl">我报名的</span>
          </el-menu-item>
           <el-menu-item index="/exam/mytask">
            <!-- <i class="el-icon-menu"></i> -->
            <!-- <span slot="title" class="textl">自主学习</span> -->
            <span slot="title" class="textl">我的考试</span>
          </el-menu-item>
          <!-- <el-menu-item index="/uc/study/history"> -->
          <!-- <i class="el-icon-menu"></i> -->
          <!-- <span slot="title" class="textl">历史记录</span>
          </el-menu-item> -->
        </el-submenu>
        <el-menu-item index="/user/Mynotes" v-show="curIdentity == 1">
          <svg-icon :icon-class="activeMenu == '/user/Mynotes'?'mybiji-active':'mybiji'"></svg-icon>
        <span slot="title">我的笔记</span>
      </el-menu-item>
        <el-menu-item index="/user/myassess" v-show="curIdentity == 1">
          <!-- <i class="el-icon-menu"></i> -->
          <svg-icon :icon-class="activeMenu == '/user/myassess'?'myceping-active':'myceping'"></svg-icon>
          <span slot="title">我的测评</span>
        </el-menu-item>
        <el-submenu index="myqa" v-show="curIdentity == 1">
          <template slot="title">
            <!-- <i class="el-icon-s-grid"></i> -->
            <svg-icon icon-class="myqa"></svg-icon>
            <span>我的问答</span>
          </template>
          <el-menu-item index="/qa/mylist">
            <!-- <i class="el-icon-menu"></i> -->
            <span slot="title" class="textl">我提问的</span>
          </el-menu-item>
          <el-menu-item index="/qa/myreplys">
            <!-- <i class="el-icon-menu"></i> -->
            <span slot="title" class="textl">我回答的</span>
          </el-menu-item>
        </el-submenu>
        <el-menu-item index="/article/mylist" v-show="curIdentity == 1">
          <!-- <i class="el-icon-menu"></i> -->
          <svg-icon :icon-class="activeMenu == '/article/mylist'?'myart-active':'myart'"></svg-icon>
          <!-- <svg-icon icon-class="myart"></svg-icon> -->
          <span slot="title">我的文章</span>
        </el-menu-item>
       <el-submenu index="notice" v-show="curIdentity == 1">
          <template slot="title">
              <svg-icon icon-class="qita"></svg-icon>
              <span>其他通知</span>
          </template>
           <el-menu-item index="/article/contactme" v-show="curIdentity == 1">
            <span slot="title"  class="textl">@我的</span>
          </el-menu-item>
           <el-menu-item index="/user/myshare" v-show="curIdentity == 1">
             <span slot="title"  class="textl">我分享的</span>
           </el-menu-item>
          <el-menu-item index="/user/toshare" v-show="curIdentity == 1">
            <span slot="title"  class="textl">分享给我的</span>
           </el-menu-item>
        </el-submenu>
       

        <!-- v-show="curIdentity == 1" -->

       
        <el-menu-item index="/user/favorites" v-show="curIdentity == 1">
          <svg-icon :icon-class="activeMenu == '/user/favorites'?'stra-active':'stra'"></svg-icon>
          <span slot="title">我的收藏</span>
        </el-menu-item>
        <el-menu-item index="/message/center/index" v-show="curIdentity == 1">
          <svg-icon :icon-class="activeMenu == '/message/center/index'?'messageicon':'messageactive'"></svg-icon>
          <span slot="title">消息中心</span>
        </el-menu-item>
       
        <!-- <el-submenu index="myArwticle" v-show="curIdentity == 1">
		  <template slot="title">
		    <i class="el-icon-s-grid"></i>
		    <span>我的文章</span>
		  </template>
		  <el-menu-item index="/article/mylist">
		    <i class="el-icon-menu"></i>
		    <span slot="title">文章管理</span>
		  </el-menu-item>
		  <el-menu-item index="/article/contactme">
		    <i class="el-icon-menu"></i>
		    <span slot="title">@我的</span>
		  </el-menu-item>
		</el-submenu> -->
        <!-- <el-menu-item index="/article/mylist" v-show="curIdentity == 1">
          <i class="el-icon-menu"></i>
          <span slot="title">我的文章</span>
        </el-menu-item> -->
        <!-- 草稿箱，去掉，我的文章显示发布状态
        <el-menu-item index="/user/mydraft" v-if="curIdentity==1">
          <i class="el-icon-menu"></i>
          <span slot="title">我的草稿</span>
        </el-menu-item>
        -->
      </el-menu>
    </div>
    <div style="margin-top:20px;background-color: #FFFFFF;padding:mout" v-if="overlayShow && curIdentity == 1" >
           <p class="course-re" style="margin-left:0px">您上次学习到：</p>
             <el-card class="couerscard" :body-style="{padding:'0px'}">
                <a :href="toCourseDetail(lastStudy)">
                  <div class="course-image">
                    <course-image :course="lastStudy"></course-image>
                    <span v-if="lastStudy.contentType==20" class="course-type-title course-type">录播</span>
                    <span v-if="lastStudy.contentType==10" class="course-type-title course-type">录播</span>
                    <span v-if="lastStudy.contentType=='online-course'" class="course-type-title course-type">录播</span>
                    <span v-if="lastStudy.contentType=='face-course'" class="course-type-title course-type">线下</span>
                    <span v-if="lastStudy.contentType=='project'" class="course-type-title course-type">学习项目</span>
                </div>
                 <el-tooltip :content="lastStudy.courseName" placement="bottom-start" effect="light" :visible-arrow="false" popper-class="text-tooltip">
               <div class="course-title two-line-ellipsis">{{lastStudy.courseName}}
                </div>
            </el-tooltip>
                </a>
              </el-card>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';
import apiCourse from '../../api/modules/course.js';
import apicourseStudy from "../../api/modules/courseStudy.js"
import courseImage from "@/components/Course/courseImage.vue"
export default {
  name: 'UcMenu',
    components: {
    courseImage,
  },
  computed: {
    ...mapGetters(['curIdentity', 'messagesBeReviewed', 'studyTaskCount']),
    activeMenu() {
      const route = this.$route;
      const { meta, path } = route;
      if(meta.title == '添加受众' || meta.title == '查看受众'){
        meta.activeMenu = '/manage/ugroups'
      }
      if (meta.activeMenu) {
        return meta.activeMenu;
      }
      //console.log(path,'path');
      return path;
    },
  },
  data() {
    return {
      badge: 0,
      isCollapse: false,
      lastStudy:{},
      overlayShow: false
    };
  },
  created() {
    this.$store.dispatch('refrashReviewed');
    this.$store.dispatch('refrashStudyTaskCount');
    this.getLastStudy();
  },
  methods: {
    toCourseDetail(item){
      if(isNaN(item.courseType)){
        return `${this.webBaseUrl}/course/boeframe?id=${item.courseId}&type=${item.courseId}`;
      } else {
      //  if(item.courseType==10){
      //   return this.webBaseUrl+'/course/micro?id='+item.courseId;
      //   }else if(item.courseType==20){
        return this.webBaseUrl+'/course/detail?id='+item.courseId;
      //  }
      }

      return '';
    },
    	getLastStudy() {
				apicourseStudy.lastStudy().then(res => {
					if (res.status === 200) {
						this.lastStudy = res.result;
						if (res.result != '' && res.result.courseId) {
							this.overlayShow = true;
						}
					} else {
						this.$message.error(res.message);
					}
				})
			},
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    toPage(url) {
      this.$router.push({ path: url });
    },
    toOtherPage() {
      this.$message({
        message: '进入原系统必修功能',
        type: 'error',
        offset: 50
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.couerscard{
  padding: 0 15px;
}
// ::v-deep .fontsamll{
//   font-size: 16px!important;
// }
 ::v-deep .el-menu{
   border: none !important;
 }
#hei{
  height: 36px;
	line-height: 36px;
}
.el-menu--horizontal .el-menu .el-submenu__title {

	height: 36px;
	line-height: 36px;
}
::v-deep .el-menu-item, .el-submenu__title{
   line-height: 36px;
   height: 36px;
}
.oneheight{

  height: 36px;
  line-height: 36px;
}
.course-card{
 
}
  .course-image {
      position: relative;
      .course-image {
       
      }
      .course-type{
        position: absolute;
        top: 0px;
        right: 0px;
        width: 55px;
        height: 20px;
        line-height: 20px;
        font-size: 12px;
        color: #FFFFFF;
        text-align: center;
        background: #f99000;
        // border-top-left-radius: 15px;
        border-bottom-left-radius: 10px;
        color: #FFFFFF;
      }
      .course-type-title{

        position: absolute;
        top: 0px;
        right: 0px;
        width: 55px;
        height: 20px;
        line-height: 20px;
        text-align: center;
        color: #FFFFFF;
      }
  }
.course-re{
      margin-top: 20px;
      padding: 10px 19px;
      font-size: 16px;
      font-weight: 500;
      color: #303133;
}
   .course-title{
     width: 160px;
      // height: 70px;
      // padding: 0 5px;
      line-height: 20px;
      margin: 10px 0;
      font-size: 15px;
      font-weight: 600;
      font-weight: normal;
      color: #303133;
    }
.textl {
  margin-left: 20px;

}
.title {
  line-height: 25px;
}
.svg-icon {
  margin-right: 8px;
   font-size: 19px;
  padding-top: 0px;

  // line-height: 36px;
  // margin-top: 20px;
}
.item {
  margin-right: 40px;
  .el-badge__content.is-fixed {
    top: 10px;
    right: 0;
  }
}
::v-deep .el-submenu__title{
  line-height: 36px !important;
  height: 36px !important;
}
.el-menu-vertical > .el-submenu > .el-submenu__title {
  line-height: 36px;
  height: 36px;
}
</style>
<style scoped lang="scss">
.el-card {
  border: none !important;
}
.el-menu-vertical:not(.el-menu--collapse) {
  width: 198px;
  min-height: 400px;
}
.upicon {
  text-align: center;
  cursor: pointer;
  margin-top: 10px;
  i {
    font-size: 30px;
    color: #ffaa00;
  }
  div {
    color: #565656;
    padding: 5px 0px 10px 0px;
  }
}
.uc-menu {
  padding-top: 20px;
}
 ::v-deep .el-menu-item{
  padding-left: 40px !important;
}

.el-menu-item,
.el-submenu__title {
  line-height: 36px;
  height: 36px;
}
::v-deep .el-submenu__title{
  padding-left: 40px !important;
}
div.el-submenu__title {
  line-height: 36px;
  height: 36px;
}

.el-submenu .el-menu-item {
  line-height: 36px;
  height: 36px;
}

.uc-menu-item {
  padding: 5px;
  text-align: center;
  display: block;
  color: #0087ca;
  margin: 5px 10px;
}
</style>
