<template>
    <div style="width: 100%;position:relative">
  <div class="exam">
    <!------------------------------------考试标题 ------------------------------- -->
    <div class="exam-title">
      <div class="exam-title__title" @click="showSubtitle">
        <p>
          {{ classes }}<i v-if="name">-{{ name }}</i>
        </p>
        <img src="/ks_inc/member-center/images/exam/test_btn_down@2x.png" />
        <span></span>
        <div class="exam-title__item-box" @click="showExamSelect">
          <img
            src="/ks_inc/member-center/images/exam/me_test_btn_change@2x.png"
          />
          切换考试
        </div>
      </div>
    </div>
    <div class="exam-title__subtitle" @mouseleave="colseSubtitle" v-show="isSubtitle">
      <div class="exam-title__item">
        <el-button size="medium" round type="primary">{{ classes }}</el-button>
        <!-- <div class="exam-title__item-box" @click="showExamSelect">
          <img
            src="/ks_inc/member-center/images/exam/me_test_btn_change@2x.png"
          />
          切换考试
        </div> -->
      </div>
      <div
        class="exam-title__list"
        v-for="(item,i) in childsClass"
        :key="i"
        @click="setClass(i,item.categoryid,item.categoryname)"
      >
        <span :class="{'active-title':title==item.categoryid}">{{
          item.categoryname
        }}</span>
        <img
          v-if="title==item.categoryid"
          src="/ks_inc/member-center/images/exam/me_test_icon_select@2x.png"
        />
      </div>
    </div>
    <!------------------------------------考试标签页 ------------------------------- -->
    <div class="exam-tabs">
      <div class="exam-tab__item" @click="changeTab('ExamBank')">
        <img
          v-if="$route.name == 'ExamBank'"
          src="/ks_inc/member-center/images/exam/me_nav_icon3_s.png"
        />
        <img
          v-else
          src="/ks_inc/member-center/images/exam/me_nav_icon3_n.png"
        />
        <p :class="{'active-tab':$route.name == 'ExamBank'}">套卷练习</p>
      </div>
      <div class="exam-tab__item" @click="changeTab('ExamList')">
        <img
          v-if="$route.name == 'ExamList'"
          src="/ks_inc/member-center/images/exam/me_nav_icon2_s.png"
        />
        <img
          v-else
          src="/ks_inc/member-center/images/exam/me_nav_icon2_n.png"
        />
        <p :class="{'active-tab':$route.name == 'ExamList'}">练习中心</p>
      </div>
      <div
        class="exam-tab__item"
        @click="changeTab('Practicedaily')"
      >
        <img
          v-if="$route.name == 'Practicedaily'"
          src="/ks_inc/member-center/images/exam/me_nav_icon5_s.png"
        />
        <img
          v-else
          src="/ks_inc/member-center/images/exam/me_nav_icon5_n.png"
        />
        <p :class="{'active-tab':$route.name == 'Practicedaily'}">每日一练</p>
      </div>
    </div>
    <!------------------------------------考试分类列表 ------------------------------- -->
    <el-dialog title="选择考试分类" :visible.sync="isExamSelect" width="1000px">
      <div class="exam-select__box">
        <div class="exam-select__top">
          <p>已选分类：</p>
          <el-button type="primary" size="medium" round>{{
            classes
          }}</el-button>
        </div>
        <div class="exam-select__item" v-for="(item,i) in allClass" :key="i">
          <div class="exam-select__left">{{ item.categoryname }}：</div>
          <div class="exam-select__right">
            <el-button
              size="medium"
              round
              style="padding: 10px 34px;"
              @click="setClasses(item.categoryid,item.categoryname,item.childs)"
              >全部</el-button
            >
            <el-button
              size="medium"
              round
              v-for="(child,n) in item.childs"
              :key="n"
              @click="setClasses(child.categoryid,child.categoryname,child.childs)"
              >{{ child.categoryname }}</el-button
            >
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
  <!-- 子页面 -->
  <div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</div>

</template>
<script>
    import  {GetAllPaperCategory,GetSubjectStatistics} from '@/api/paper'
    export default {
  data() {
    return {
      state: {},

      /********************************************标题****************************************** */

      /**二级标题菜单开关 */
      isSubtitle: false,

      /**三级分类名称 */
      name: null,

      /**当前选中课程id */
      activeCategoryid: null,

      /**二级分类名称 */
      classes: null,

      /**选中三级标题 */
      title: null,

      /**三级分类列表 */
      childsClass: null,

      /********************************************考试分类列表*********************************** */

      /**考试分类列表开关 */
      isExamSelect: false,

      /**考试分类列表*/
      allClass: [],

      /**当前选择 */
      select: null,

      /**考试分类id */
      id: null,

      /********************************************标签页*********************************** */

      /**默认考试记录页 0 */
      tab: 0,

      /** */
      titleList: [],
      showCollect: false,
      showError: false,
      chaper: null,
      knowledge: null,

      /** */

    };
  },
  methods: {
    /********************************************标题****************************************** */

    /**显示二级标题菜单 */
    showSubtitle() {
      this.isSubtitle = true;
    },

    /**关闭二级标题菜单 */
    colseSubtitle() {
      this.isSubtitle = false;
    },
    setClass(i, id, name) {
      
      this.title = id;

      if (name) {
        this.name = name;
      }

      localStorage["name_" + this.state.userId] = name;
      localStorage["id_" + this.state.userId] = id;
      this.$router.push({
        query: {
          categoryid: id
        }
      });
      this.isSubtitle = false;
    },

    /********************************************考试分类列表****************************************** */

    /**打开考试分类列表 */
    showExamSelect() {
      this.$router.push({
        name:'ExamSelect',
        query:{
          reselect:1
        }
      })
    },

    /**获取所有分类课程 */
    getAllPaperCategory() {
      var that = this;
      GetAllPaperCategory({
        apptoken: that.state.appToken
      }).then(function (res) {
        that.allClass = res.data;
        localStorage.allClass = JSON.stringify(res.data);
        if(that.$route.query.categoryid){
          that.allClass.map(item=>{
            if(item.categoryid == Number(that.activeCategoryid)){
              that.classes = item.categoryname
              that.name = ''
            }else{
              if(item.childs&&item.childs.length){
                item.childs.map(citem=>{
                  if(citem.categoryid==Number(that.activeCategoryid)){
                    that.classes = citem.categoryname
                    that.name = ''
                  }else{
                    if(citem.childs&&citem.childs.length){
                      citem.childs.map(sitem=>{
                        if(sitem.categoryid==Number(that.activeCategoryid)){
                          that.classes = citem.categoryname
                          that.name = sitem.categoryname
                        }
                      })
                    }
                  }
                })
              }
            }
          })
        }
          
      });
    },
    /**选择课程并存储 */
    setClasses(id, classes, childsClass) {
      var that = this;
      that.classes = classes;
      that.id = id;
      that.isExamSelect = false;
      localStorage["classes_" + that.state.userId] = classes;
      localStorage["id_" + that.state.userId] = id;
      localStorage.removeItem("name_" + that.state.userId);

      if (childsClass) {
        that.childsClass = childsClass;
        localStorage.childsClass = JSON.stringify(childsClass);
      } else {
        that.childsClass = [];
        localStorage.childsClass = []; // localStorage.removeItem("childsClass")
      }

      that.name = null;
      that.title = null;
      that.select = id;
      that.$router.push({
        query: {
          categoryid: id
        }
      });
    },

    /********************************************标签页****************************************** */

    /**切换标签页 */
    changeTab(name) {
      if(name=='Practicedaily'){
        this.$router.push({
          name: name,
          query: {
            categoryid: this.$route.query.categoryid,
            type:6
          }
        });
      }else{
        this.$router.push({
          name: name,
          query: {
            categoryid: this.$route.query.categoryid
          }
        });
      }
    },

    /*获取模块数据 **/
    getSubjectStatistics() {
      var that = this;
      GetSubjectStatistics({
        categoryid: that.$route.query.categoryid,
        apptoken: that.state.appToken
      }).then(function (res) {
        if (res.result) {
          that.titleList = res.module;
         
          for (var i in that.titleList) {
            if (that.titleList[i].module_id == "5") {
              that.showCollect = true;
            }

            if (that.titleList[i].module_id == "4") {
              that.showError = true;
            }
          }
        } else {
          that.$router.push("/");
          that.$confirm(res.msg).then(function (_) {});
        }
      });
    }
  },
  created() {
    
    var that = this
    that.$store.ready(function (state) {
      that.state = state;
      that.getAllPaperCategory();
      
    })
  },
  activated() {
    var that = this;
    this.isSubtitle = false
    if (localStorage.childsClass) {
      this.childsClass = JSON.parse(localStorage.childsClass);
    } else {
      this.childsClass = null;
    }

    that.$store.ready(function (state) {
      that.state = state;
      if(that.$route.query.categoryid){
        that.activeCategoryid = that.$route.query.categoryid; //显示当前样式
        that.getAllPaperCategory();
      }else{
        if (localStorage["name_" + state.userId]) {
          that.name = localStorage["name_" + state.userId];
        }

        if (localStorage["id_" + state.userId]) {
          that.activeCategoryid = localStorage["id_" + state.userId];
        }

        if (localStorage["classes_" + state.userId]) {
          that.classes = localStorage["classes_" + state.userId];
        }
      }
      
      that.getSubjectStatistics();
    });
    
  }
};
</script>
<style scoped>
.exam {
  width: 100%;
  position: relative;
}

/******************************************************** 标题样式 *****************************************************/

.active-title {
  color: #488bff !important;
}

.exam-title {
  height: 57px;
  width: 100%;
}

.exam-title__title {
  width: 100%;
  height: 57px;
  border: 1px solid #ebebeb;
  background: #fff;
  line-height: 57px;
  font-size: 18px;
  color: #333;
}

.exam-title__title p {
  margin-left: 20px;
  float: left;
}

.exam-title__title i {
  font-style: normal;
}

.exam-title__title img {
  margin: 20px 20px 0 20px;
  float: left;
  cursor: pointer;
  width: 20px;
}

.exam-title__title span {
  width: 1px;
  height: 32px;
  background-color: #eeeeee;
  float: left;
  margin-top: 12.5px;
}

/* 子标题 */

.exam-title__subtitle {
  width: 400px;
  min-height: 200px;
  max-height: 800px;
  overflow: auto;
  background: #fff;
  box-shadow: 4px 4px 10px 0px rgba(116, 148, 179, 0.2);
  border-radius: 4px;
  position: absolute;
  top: 57px;
  z-index: 10;
}

.exam-title__item {
  height: 52px;
  border-bottom: 1px solid #ebebeb;
}

.exam-title__item .el-button {
  float: left;
  margin-top: 8px;
  margin-left: 20px;
}

.exam-title__item-box {
  font-size: 14px;
  height: 52px;
  line-height: 52px;
  /* float: right; */
  float: left;
  margin-right: 20px;
  cursor: pointer;
}

.exam-title__item-box img {
  width: 18px;
  height: 16px;
  margin-right: 3px;
  margin-bottom: -2.5px;
}

.exam-title__list {
  height: 42px;
  line-height: 42px;
  background: #fff;
}

.exam-title__list span {
  font-size: 14px;
  color: #333;
  margin-left: 20px;
  float: left;
  cursor: pointer;
}

.exam-title__list img {
  width: 18px;
  height: 13px;
  float: right;
  margin-right: 20px;
  margin-top: 14.5px;
}

.exam-title__list:hover {
  background: #f7f7f7;
}

/******************************************************** 标签页 *****************************************************/

.exam-tabs {
  width: 100%;
  height: 94px;
  background: #fff;
  border: 1px solid #ebebeb;
}

.exam-tab__item {
  width: calc(100% / 7);
  height: 100%;
  float: left;
  text-align: center;
  font-size: 12px;
  color: #7f7f7f;
  position: relative;
  cursor: pointer;
}

.exam-tab__item img {
  width: 28px;
  height: 28px;
  margin-top: 22px;
}

.exam-tab__item p {
  width: 60px;
  height: 34px;
  position: absolute;
  left: 50%;
  top: 60px;
  margin-left: -30px;
  text-align: center;
}

.active-tab {
  color: #488bff;
  border-bottom: 2px solid #488bff;
  box-sizing: border-box;
}

/******************************************************** 分类选择 *****************************************************/

.active-select {
  background: #488bff;
  color: #fff;
  border: 1px solid #488bff;
}

.exam-select__box {
  overflow: hidden;
}

.exam-select__top {
  font-size: 16px;
  color: #333;
  height: 32px;
  width: 100%;
  padding-bottom: 20px;
  border-bottom: 1px solid #eeeeee;
}

.exam-select__top p {
  margin-left: 30px;
  float: left;
  line-height: 32px;
}

.exam-select__top .el-button {
  float: left;
  margin-left: 30px;
  cursor: pointer;
}

.exam-select__item {
  width: 100%;
  padding-bottom: 20px;
  float: left;
}

.exam-select__left {
  width: 100px;
  margin-left: 30px;
  float: left;
  line-height: 34px;
  margin-top: 20px;
  text-align: right;
}

.exam-select__right {
  float: left;
  width: calc(100% - 130px);
}

.exam-select__right .el-button {
  float: left;
  margin-left: 30px;
  margin-top: 20px;
}

</style>
