<template>
    <div style="width: 100%;">

    <div class="practice-item" v-if="chaper==0&&knowledge==0">
        <div class="practice-box1" @click="openExamAll(0)">
            <div class="practice-box1__img"></div>
            <p>顺序练习</p>
        </div>
        <div class="practice-box2" @click="openExamAll(1)">
            <div class="practice-box2__img"></div>
            <p>随机练习</p>
        </div>
    </div>
    <!-- 练习中心列表 -->
    <div class="practice__bank" v-else>
        <div class="practice__nav">
            <span :class="{active:active==0}" v-if="chaper==1" @click="nav(0)">章节练习</span>
            <span :class="{active:active==1}" v-if="knowledge==1" @click="nav(1)">知识点练习</span>
        </div>
        <div v-if="active==0">
            <div v-if="allData!=null">
                <div class="practice__bank-title">
                    <p>章节</p>
                    <span>已做/做题</span>
                </div>
                <div v-for="(item,i) in allData" :key="i">
                    <div class="practice__box">
                        <div class="practice__left" @click="openSub(i)">
                            <img v-if="showSub==i" src="/ks_inc/member-center/images/exam/me_test_btn_f.png" />
                            <img v-else src="/ks_inc/member-center/images/exam/me_test_btn_nf.png" />
                            <span>{{item.name}}</span>
                        </div>
                        <div class="practice__right">
                            <!-- <el-button type="primary" size="medium" round v-if="item.do_num==0" @click="openSort(item.sectionid)">开始做题</el-button>
                            <el-button type="primary" plain size="medium" round v-else-if="item.do_num>0&&item.do_num<item.tk_num" @click="openSort(item.sectionid)">继续做题</el-button>
                            <el-button size="medium" round v-else-if="item.do_num==item.tk_num" @click="openSort(item.sectionid)">重新做题</el-button> -->
                            <!-- <div class="practice__progress">
                                <div class="practice__progress-box">
                                    <span :style="{width: (item.do_num*100/item.tk_num)+'%'}"></span>
                                </div>
                                <i>{{item.do_num}}/{{item.tk_num}}</i>
                            </div> -->
                        </div>
                    </div>
                <div  v-if="showSub==i">
                    <div v-for="(child,n) in item.childs" :key="n">
                        <div class="practice__box">
                            <div class="practice__left marginLeft32" @click="openSub2(n)">
                                <img v-if="showSub2==n" src="/ks_inc/member-center/images/exam/me_test_btn_f.png" />
                                <img v-else src="/ks_inc/member-center/images/exam/me_test_btn_nf.png" />
                                <span>{{child.name}}</span>
                            </div>
                            <div class="practice__right">
                                <el-button type="primary" size="medium" round v-if="child.do_num==0" @click="openSort(child.sectionid,child.get_viewurl)">开始做题</el-button>
                                <el-button type="primary" plain size="medium" round v-else-if="child.do_num>0&&child.do_num<child.tk_num" @click="openSort(child.sectionid,child.get_viewurl)">继续做题</el-button>
                                <el-button size="medium" round v-else-if="child.do_num==child.tk_num" @click="openSort(child.sectionid,child.get_viewurl)">重新做题</el-button>
                                <div class="practice__progress">
                                    <div class="practice__progress-box">
                                        <span :style="{width: (child.do_num*100/child.tk_num)+'%'}"></span>
                                    </div>
                                    <i>{{child.do_num}}/{{child.tk_num}}</i>
                                </div>
                            </div>
                        </div>
                        <div v-if="showSub2==n">
                        <div class="practice__box" v-for="(subChild,m) in child.childs" :key="m">
                            <div class="practice__left marginLeft60">
                                <span>{{subChild.name}}</span>
                            </div>
                            <div class="practice__right">
                                <el-button type="primary" size="medium" round v-if="subChild.do_num==0" @click="openSort(subChild.sectionid,child.get_viewurl)">开始做题</el-button>
                                <el-button type="primary" plain size="medium" round v-else-if="subChild.do_num>0&&subChild.do_num<subChild.tk_num" @click="openSort(subChild.sectionid,child.get_viewurl)">继续做题</el-button>
                                <el-button size="medium" round v-else-if="subChild.do_num==subChild.tk_num" @click="openSort(subChild.sectionid,child.get_viewurl)">重新做题</el-button>
                                <div class="practice__progress">
                                    <div class="practice__progress-box">
                                        <span :style="{width: (subChild.do_num*100/subChild.tk_num)+'%'}"></span>
                                    </div>
                                    <i>{{subChild.do_num}}/{{subChild.tk_num}}</i>
                                </div>
                            </div>
                        </div>
                        </div>
                    </div>
                </div>
                </div>
            </div>
            <!-- 无数据提示 -->
            <div class="practice-nodata" v-else>
                <ks-empty msg="暂无章节题库" />
            </div>
        </div>
        <div v-else-if="active==1">
            <div v-if="knowledgeList.length > 0">
                <div class="practice__bank-title">
                    <p>知识点</p>
                    <span>已做/做题</span>
                </div>
                <div v-for="(item,i) in knowledgeList" :key="i">
                    <div class="practice__box">
                        <div class="practice__left">
                            <span style="margin-left: 10px;">{{i+1}}、&nbsp;&nbsp;{{item.title}}</span>
                        </div>
                        <div class="practice__right">
                            <el-button type="primary" size="medium" round v-if="item.do_num==0" @click="openSort(item.knowledgeid)">开始做题</el-button>
                            <el-button type="primary" plain size="medium" round v-else-if="item.do_num>0&&item.do_num<item.tk_num" @click="openSort(item.knowledgeid)">继续做题</el-button>
                            <el-button size="medium" round v-else-if="item.do_num==item.tk_num" @click="openSort(item.knowledgeid)">重新做题</el-button>
                            <div class="practice__progress">
                                <div class="practice__progress-box">
                                    <span :style="{width: (item.do_num*100/item.tk_num)+'%'}"></span>
                                </div>
                                <i>{{item.do_num}}/{{item.tk_num}}</i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 无数据提示 -->
            <div class="practice-nodata" v-else>
                <ks-empty msg="暂无知识点题库" />
            </div>
        </div>
    </div>
    <exam-sort v-if='showSort' @close="closeSort" @openExam="openExam"></exam-sort>
</div>


</template>
<script>
    import  {GetPaperSection,GetPaperKnowledge,GetSubjectStatistics} from '@/api/paper'
    export default {
      

  data:function() {
    return {
      state: {},
      name: null, //
      active: 0, //当前样式
      showMenu: false, //显示二级菜单栏
      onshow: false, //显示切换课程页面开关
      url: null, //跳转链接
      showSub: null, //显示二级分类
      showSub2: null, //显示三级分类
      allData: [], //全部数据列表
      showSort: false, //考试顺序开关
      sectionId: null, //章节id
      knowledge: null, //知识点开关
      chaper: null, //章节开关
      schoolid: '', //学校机构id
      knowledgeNodata: true, //知识点无内容提示
      chaperNodata: false, //章节无内容提示
      knowledgeList:[]
    };
  },
  watch: {
    "$route.query": function() {
      if (this.$route.name == "ExamList") {
          
        this.getSubjectStatistics();
        this.getPaperSection();
        this.getPaperKnowledge();
      }
    }
  },
  methods: {
    nav: function(i) {
      this.active = i;
    },
    /*
     * 章节、知识点开关
     * */
    toggle: function(chaper, knowledge) {
      this.chaper = chaper;
      this.knowledge = knowledge;
    },
    openExamAll: function(isrand) {
      var that = this;
      //前往全部试卷进行考试
      this.$store.ready(function(state) {
        window.open(
          that.url+"#/exam/Exercise?type=1&categoryid=" +
            that.$route.query.categoryid +
            "&schoolid=" +
            state.schoolId +
            "&isrand=" +
            isrand,
          "_blank"
        );
      });
    },
    openExam: function(isrand) {
      var that = this;
      //前往试卷进行考试
      this.showSort = false;
      if (this.active == 0) {
        this.$store.ready(function(state) {
          window.open(
            that.url+"#/exam/Exercise?type=4&categoryid=" +
              that.$route.query.categoryid +
              "&schoolid=" +
              that.state.schoolId +
              "&isrand=" +
              isrand +
              "&sectionid=" +
              that.sectionId,
            "_blank"
          );
        });
      } else {
        this.$store.ready(function(state) {
          window.open(
            that.url+"#/exam/Exercise?type=5&categoryid=" +
              that.$route.query.categoryid +
              "&schoolid=" +
              that.state.schoolId +
              "&isrand=" +
              isrand +
              "&knowledgeid=" +
              that.sectionId,
            "_blank"
          );
        });
      }
    },
    openSort: function(id) {
      //显示选择考试顺序
      this.sectionId = id;
      this.showSort = true;
    },
    closeSort: function() {
      //关闭选择考试顺序
      this.showSort = false;
    },
    openSub: function(i) {
      //打开二级试卷
      if (this.showSub == i) {
        this.showSub = null;
      } else {
        this.showSub = i;
      }
    },
    openSub2: function(n) {
      //打开三级试卷
      if (this.showSub2 == n) {
        this.showSub2 = null;
      } else {
        this.showSub2 = n;
      }
    },
    change: function() {
      //切换课程重新请求更新数据
      this.getPaperSection();
      this.getPaperKnowledge();
    },
    showmenu: function() {
      //显示切换考试菜单
      this.onshow = true;
    },
    closemenu: function() {
      this.onshow = false;
    }, //关闭切换考试菜单
    getPaperSection: function() {
      
      //请求章节数据
      var that = this;
      this.onshow = false;
      if (localStorage.childsClass) {
        this.childsClass = JSON.parse(localStorage.childsClass);
      } else {
        this.childsClass = null;
      }
      GetPaperSection({
        categoryid: this.$route.query.categoryid,
        userid: that.state.userId,
        apptoken: that.state.appToken
      }).then(function(res) {
        if (res.result == true) {
          that.allData = res.data;
          that.url = res.get_viewurl;
        } else {
          that.allData = null;
        }
        console.log(that.allData)
      });
    },
    getPaperKnowledge: function() {
      var that = this;
      this.onshow = false;
      if (localStorage.childsClass) {
        this.childsClass = JSON.parse(localStorage.childsClass);
      } else {
        this.childsClass = null;
      }
      GetPaperKnowledge({
        categoryid: this.$route.query.categoryid,
        userid: that.state.userId,
        apptoken: that.state.appToken
      }).then(function(res) {
        if (res.result == true) {
          that.knowledgeList = res.data;
          that.url = res.get_viewurl;
        } else {
          that.knowledgeList = [];
        }
        console.log(that.knowledgeList)
      });
    },
    /*获取模块数据 **/
    getSubjectStatistics: function() {
        
      var that = this;
      GetSubjectStatistics({
        categoryid: that.$route.query.categoryid,
        apptoken: that.state.appToken
      }).then(function(res) {
      
		  that.url = res.get_viewurl
        for (var i in res.module) {
          if (res.module[i].module_id == 0) {
            that.chaper = res.module[i].isopen_chaper;
            that.knowledge = res.module[i].isopen_knowledge;
            console.log( that.chaper)
          }
        }
      });
    }
  },
  mounted: function() {
    var that = this;
    this.$store.ready(function(state) {
      that.state = state;
        that.getSubjectStatistics();
        that.getPaperSection();
        that.getPaperKnowledge();
    });
  }




    };
</script>
<style scoped>
   /* 考试记录列表 */

/* 标题 */

.disabled {
    background-color: #f5f7fa !important;
    color: #c0c4cc !important;
    border: 1px solid #e4e7ed !important;
    cursor: not-allowed !important;
}

.practice {
    width: 100%;
    position: relative;
    height: 155px;
}

.practice-position {
    position: absolute;
    top: 57px;
    width: 100%;
}

.practice-item {
    width: 100%;
    height: 400px;
    border: solid 1px #ebebeb;
    background: #fff;
    margin-top: 20px;
    position: relative;
}

.practice-box1 {
    width: 188px;
    height: 100px;
    border-radius: 6px;
    border: solid 1px #ccc;
    color: #333;
    font-size: 16px;
    text-align: center;
    position: absolute;
    top: 150px;
    left: 25%;
    cursor: pointer;
}

.practice-box1:hover {
    border: solid 1px #488BFF;
    color: #488BFF;
}

.practice-box1:hover .practice-box1__img {
    background: url(/ks_inc/member-center/images/exam/me_test_btn_order.png) no-repeat center;
}

.practice-box1__img {
    width: 40px;
    height: 40px;
    background: url(/ks_inc/member-center/images/exam/me_test_btn_order_n.png) no-repeat center;
    margin-top: 20px;
    position: absolute;
    left: 50%;
    margin-left: -20px;
}

.practice-box1 p {
    margin-top: 68px;
}

.practice-box2 {
    width: 188px;
    height: 100px;
    border-radius: 6px;
    border: solid 1px #ccc;
    color: #333;
    font-size: 16px;
    text-align: center;
    position: absolute;
    top: 150px;
    right: 25%;
}

.practice-box2:hover {
    border: solid 1px #488BFF;
    color: #488BFF;
}

.practice-box2:hover .practice-box2__img {
    background: url(/ks_inc/member-center/images/exam/me_test_btn_random.png) no-repeat center;
}

.practice-box2__img {
    width: 40px;
    height: 40px;
    background: url(/ks_inc/member-center/images/exam/me_test_btn_random_n.png) no-repeat center;
    margin-top: 20px;
    position: absolute;
    left: 50%;
    margin-left: -20px;
}

.practice-box2 p {
    margin-top: 68px;
}


/* 标题 */

.practice__bank {
    width: 100%;
    background: #fff;
    min-height: 655px;
    margin-top: 20px;
    border: solid 1px #ebebeb;
}

.practice__bank-title {
    width: calc(100% - 40px);
    height: 40px;
    margin: 0 auto;
    background-color: #f5f6fc;
    margin-top: 20px;
    font-size: 16px;
    color: #999;
    line-height: 40px;
}

.practice__bank-title p {
    width: 400px;
    text-align: center;
    float: left;
}

.practice__bank-title span {
    width: 300px;
    float: right;
}


/* 导航栏 */

.practice__nav {
    padding-left: 40px;
    height: 56px;
    border-bottom: 1px solid #ebebeb;
    font-size: 16px;
    color: #333;
    line-height: 56px;
}

.practice__nav span {
    margin-right: 60px;
    display: inline-block;
    height: 56px;
    cursor: pointer;
}

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

.practice__box {
    width: calc(100% - 40px);
    height: 60px;
    margin: 0 auto;
    border-bottom: 1px solid #ebebeb;
}

.practice__box:hover {
    background: #F0F2F5;
}

.practice__left {
    float: left;
}

.practice__left span {
    color: #333;
    font-size: 16px;
    float: left;
    line-height: 60px;
}

.practice__left img {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    float: left;
    margin: 18px 10px 0 2px;
}

.practice__title {
    font-size: 14px;
    color: #333;
    margin: 17px 0 0 25px;
}

.practice__right {
    width: 320px;
    float: right;
    margin: 12px 0 0 0;
    padding-right: 3px;
}

.practice__right .el-button {
    float: right;
    margin-right: 20px;
}

.practice__progress {
    float: left;
    line-height: 40px;
}

.practice__progress i {
    font-size: 12px;
    color: #7f7f7f;
    float: left;
    font-style: normal;
    margin-left: 5px;
}

.practice__progress-box {
    width: 100px;
    height: 6px;
    background-color: #f7f7f7;
    border-radius: 3px;
    margin: 18px 0 0 0;
    float: left;
    position: relative;
}

.practice__progress-box span {
    display: inline-block;
    background: #488BFF;
    height: 6px;
    border-radius: 3px;
    position: absolute;
    top: 0;
    left: 0;
}

.marginLeft32 {
    margin-left: 32px;
}

.marginLeft60 {
    margin-left: 60px;
}

.practice-nodata {
    width: 100%;
    background: #fff;
    height: 450px;
    padding-top: 100px;
    background: #fff;
}

</style>


