<template>
    <div>
      <div class="loading" v-if="loading"><span class="load-con"><i class="el-icon-loading"></i>正在加载</span></div>
      <div class="userexam-select">
        <div class="userexam-select__title">
          <p>选择考试分类</p>
        </div>
        <div style="width:100%;" v-if="show">
          <div class="userexam-select__item" v-for="(item,i) in allClass" :key="i">
            <div class="userexam-select__top">
              <p>{{ item.categoryname }}</p>
              <!-- <span></span> -->
            </div>
            <div class="userexam-select__bottom">
              <li class="clearfix" :class="item.noChilds?'inline mr20':''">
                <el-button
                  style="padding: 10px 34px;"
                  round
                  size="medium"
                  class="fl"
                  :class="!item.noChilds?'second-class':'no-childs'"
                  type="text"
                  @click="setClasses(item.categoryid,item.categoryname,item.childs)">全部</el-button>
                  
              </li>
              <li
                v-for="(child,n) in item.childs"
                :key="n"
                class="clearfix"
                :class="item.noChilds?'inline mr20':''"
                >
                <el-button
                round
                size="medium"
                class="fl"
                :class="!item.noChilds?'second-class':'no-childs'"

                type="text"
                @click="setClasses(child.categoryid,child.categoryname,child.childs)"
                >{{ child.categoryname }}</el-button>
                
                <div class="third-class" v-if="child.childs&&child.childs.length">
                  <div class="third-class-box">
                    <el-button
                    round
                    size="medium"
                    :class="{userexamActive:active==tchild.categoryid}"
                    v-for="(tchild,i) in child.childs"
                    :key="i"
                    
                    @click="setClasses(tchild.categoryid,tchild.categoryname,tchild.childs)"
                    >{{ tchild.categoryname }}</el-button>
                  </div>
                </div>
              </li>
            </div>
          </div>
        </div>
      </div>
    </div>



</template>
<script>
    import  {GetAllPaperCategory} from '@/api/paper'
    export default {
      
  data:function() {
    return {
      state: {},
      /**全部分类 */
      allClass: [], 
      active: null, 
      /** 课程id*/
      id: null, 
      /**课程名称 */
      classes: null, 
      show: false,
      loading: true,
    }
  },
  methods: {
    /** 选择课程并存储*/ 
    setClasses:function(id,classes, childsClass) {
      // console.log(id,classes, childsClass)
      var that = this
      this.classes = classes;
      this.id = id;
      this.$store.ready(function(state) {
        localStorage["classes_" + state.userId] = classes;
        localStorage["id_" + state.userId] = id;
        if (childsClass) {
          localStorage.childsClass = JSON.stringify(childsClass);
        }
        that.active = id;
        that.$router.push({
    
          name: "ExamBank",
          query: {
            categoryid: id
          }
        });
      });
 
    },
    getAllPaperCategory: function() {
      var that = this;
      /** 请求接口获取一级课程列表*/
      GetAllPaperCategory({
        apptoken: that.state.appToken
      }).then(function(res) {
        if(res.result){
          that.allClass = res.data;
          localStorage.allClass = JSON.stringify(res.data);
          that.allClass.map(item=>{
            if(item.childs.length){
              let i = 0
              item.childs.map(citem=>{
                if(!citem.childs.length){
                  i++
                }else{
                  return i
                }
              })
              if(i==item.childs.length){
                item.noChilds = true
              }else{
                item.noChilds = false
              }
            }
          })
          that.loading = false
        }else{
          setTimeout(() => {
            that.loading = false
          }, 1500);
        }
        
      });
    }
    
  },
  created: function() {
    // this.width = document.getElementsByClassName('userexam-select__bottom').width()-
  },
  activated: function() {
    
    var that = this;
    
    //测试用的
    // that.show = true;
    // that.getAllPaperCategory();
    // return false
    //测试用的

    that.$store.ready(function(state) {
      if(that.$route.query.reselect==1){
        that.show = true;
        that.getAllPaperCategory();
      }else{
        that.state = state;
        if (localStorage["classes_" + state.userId]||that.state.isexamjump) {
          that.$router.push({
    
            name: "ExamBank",
            query: {
              categoryid: localStorage["id_" + state.userId]||0
            }
          });
        } else {
          that.show = true;
          that.getAllPaperCategory();
          if (localStorage["classes_" + state.userId]) {
            that.classes = localStorage["classes_" + state.userId];
          }
          if (localStorage["id_" + state.userId]) {
            that.id = localStorage["id_" + state.userId];
            that.active = localStorage["id_" + state.userId];
          }
        }
      }
      
    });
  
}

    };
</script>
<style scoped>
  .userexam-active {
      color: #488BFF !important;
      border: 1px solid #488BFF !important;
  }

  .userexam-select {
      width: 100%;
      background: #fff;
  }

  .userexam-select__title {
      line-height: 55px;
      height: 55px;
      width: 100%;
      border-bottom: 1px solid #ebebeb;
  }

  .userexam-select__title p {
      font-size: 16px;
      color: #333;
      margin-left: 20px;
      float: left;
  }

  .userexam-select__search {
      width: 298px;
      height: 34px;
      background-color: #f6f6f6;
      border-radius: 18px;
      float: right;
      margin-right: 30px;
      margin-top: 10px;
  }

  .userexam-select__search input {
      width: 200px;
      height: 34px;
      float: left;
      margin-left: 12px;
      background: #f6f6f6;
      border: none;
      outline: none;
  }

  .userexam-select__search input::placeholder {
      font-size: 16px;
      color: #888888;
  }

  .userexam-select__search img {
      width: 20px;
      height: 20px;
      margin-right: 10px;
      float: right;
      margin-top: 7px;
  }

  .userexam-select__item {
      width: calc(100% - 60px);
      padding: 0 30px;
      position: relative;
  }
  .no-childs{
      border: 1px solid #DCDFE6;
      color: #606266;
  }
  .userexam-select__top {
      line-height: 34px;
      margin-top: 30px;
      height: 34px;
      position: absolute;
  }
  .third-class{
    margin-left: 130px;
  }
  .third-class .el-button{
    margin-right: 20px !important;
  }
  .second-class{
    color: #666 !important;
    padding-left: 10px !important;
  }
  .userexam-select__top p {
      color: #333;
      font-size: 18px;
      float: left;
      width: 100px;
      font-weight: bold;
  }
  .userexam-select__bottom li{
    margin: 10px 0;
  }

  .userexam-select__bottom {
      margin-left: 100px;
      padding-bottom: 30px;
      padding-top: 10px;
      border-bottom: 1px solid #eee;
  }

  .userexam-select__bottom .el-button {
      margin-top: 10px;
      margin-bottom: 10px;
      cursor: pointer;
  }
  .third-class-box{background: #f5f7fa;padding:0 20px 0px;}
  .loading {
    position:fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(255, 255, 255, 0.4);
    z-index: 1;
  }
  .loading .load-con{
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      text-align: center;
      width: 150px;
      height: 56px;
      line-height: 56px;
      border-radius: 5px;
      position: fixed;
      left: 50%;
      top: 50%;
      margin-left: -50px;
      font-size: 16px;
      margin-top: -28px;
      letter-spacing: 1px;
      z-index: 2;
  }
  .loading .load-con i{
    font-size: 20px;
    margin-right: 5px;
  }
  .inline{
    display: inline-block
  }
</style>


