<template>
    <div style="width: 100%;">
      <div class="loading" v-if="loading"><span class="load-con"><i class="el-icon-loading"></i>正在加载</span></div>
      <!-- 考试记录列表 -->
      <div class="package-exam__item">
          <div class="package-exam__nav">
              <span :class="{active:typeId==0}" @click="slideTab(0)">全部试卷</span>
              <span :class="{active:typeId==site.typeid}" v-for="(site,n) in typeData" :key="n" @click="slideTab(site.typeid)">{{site.typename}}</span>
          </div>
          <div class="package-exam__item-title">
              <p>试卷名称</p>
              <span>最新得分</span>
          </div>
      </div>

      <div v-if="showList" class="package-exam__show">
          <div class="package-exam__showbox">
              <div class="package-exam__box" v-for="(item,i) in allData" :key="i">
                  <div class="package-exam__left">
                      <div class="package-exam__title">
                          <span></span>{{item.title}}
                      </div>
                      <div class="package-exam__text">
                          <span>{{item.studentcount}}人参加</span>
                          <span>考试时间：{{item.exam_time}}分钟</span>
                          <span>总分：{{item.paper_sumscore}}分</span>
                          <div class="package-exam__difficulty">
                              难度:
                              <i class="package-exam__star" :style="{width:(item.paper_level==0&&13+'px')||(item.paper_level==1&&26+'px')||(item.paper_level==2&&50+'px')}"></i>
                              <i class="package-exam__star-bg"></i>
                          </div>
                      </div>
                  </div>
                  <div class="package-exam__right">
                      <div class="package-exam__score" v-if="item.sumscore!=-1"><i>{{item.sumscore}}</i>分</div>
                      <div class="package-exam__score" v-else>&nbsp;&nbsp;- -</div>
                      <div>
                          <el-button type="primary" size="medium" round v-if="item.is_repractice==-1" @click="openExam(item.paperid,item.get_viewurl)">开始做题</el-button>
                          <el-button disabled size="medium" round v-else-if="item.is_repractice==0">重新做题</el-button>
                          <el-button size="medium" round v-else-if="item.is_repractice==1" @click="openExam(item.paperid,item.get_viewurl)">重新做题</el-button>
                          <el-button type="primary" plain size="medium" round v-else-if="item.is_repractice==2" @click="againExam(item.paperid,item.get_viewurl)">继续做题</el-button>
                      </div>
                  </div>
              </div>

          </div>
          <div class="package-exam__pagination">
              <el-pagination style="text-align: center" :current-page="currentPage" @current-change="getPaperList" background layout="prev, pager, next" :total="pageCount">
              </el-pagination>
          </div>
      </div>
      <!-- 无数据提示 -->
      <div class="package-exam__noShow" v-if="showNodata">
        
          <ks-empty msg="暂无试卷" />
      </div>
      <!-- <exam-sort v-if='showSort' @close="closeSort" @openExam="openExam"></exam-sort> -->
  </div>



</template>
<script>
    import  {GetPaperList,GetAllPaperType} from '@/api/paper'
    export default {
      
  data:function() {
    return {
      state: {},
      showList: true, //内容列表开关
      showNodata: false, //无内容提示页面开关
      typeData: null, //套卷分类导航数据
      typeId: 0, //套卷分类id
      showSort: false, //做题顺序开关
      allData: [], //接口数据
      childsclass: null, //二级菜单分类
      onshow: false, //切换课程页面开关
      pageCount: null, //总页数
      paperId: null, //试卷id
      get_viewurl: null, //试卷链接地址
      schoolid: '', //学校机构id
      currentPage: 1,
      loading:true
    };
  },
  watch: {
    "$route.query": function(query) {
      if (this.$route.name == "ExamBank") {
        this.typeId = 0
        this.getPaperList();
      }
    } 
  },
  methods: {
    slideTab: function(i) {
      this.typeId = i;
      this.getPaperList();
    },
    openExam: function(id, url) {
      //前往试卷进行考试
      var that = this;
      this.$store.ready(function(state) {
        window.open(
          url,
          "_blank"
        );
      });
    },
    againExam: function(id, url) {
      //继续考试
      var that = this;
      this.$store.ready(function(state) {
        window.open(
          url,
          "_blank"
        );
      });
    },
    openSort: function(id, url) {
      //打开选择考试顺序
      this.showSort = true;
      this.paperId = id;
      this.get_viewurl = url;
    },
    closeSort: function() {
      //关闭考试选择显示
      this.showSort = false;
    },
    getPaperList: function(p) {
      p = p || 1;
      var that = this;
      this.currentPage = p;
      //获取套卷练习分类名称
      GetAllPaperType({
        categoryid: this.$route.query.categoryid,
        schoolid: that.state.schoolId,
        apptoken: that.state.appToken
      }).then(function(res) {
        that.typeData = res.data;

        that.onshow = false;

        if (localStorage.childsclass) {
          that.childsclass = JSON.parse(localStorage.childsclass);
        } else {
          that.childsclass = null;
        }
        that.allData = [];
        let pagesize
        if(typeof CONFIG === 'object'){
          pagesize = CONFIG.pagesize || 10
        }else{
          pagesize = 10
        }
        //获取套卷练习数据
        GetPaperList({
          categoryid: that.$route.query.categoryid,
          typeid: that.typeId,
          page: p,
          pagesize: pagesize,
          apptoken: that.state.appToken
        }).then(function(res) {
          if (res.result == true) {
            that.allData = res.data;
            that.pageCount = res.pagecount * 10;
            that.showList = true;
            that.showNodata = false;
            that.loading = false
          } else {
            that.showList = false;
            that.showNodata = true;
            setTimeout(() => {
              that.loading = false
            }, 1500);
            
          }
        });
        
      });
      
      
      
    }
  },
  created: function() {

    var that = this;
    that.$store.ready(function(state) {
      that.state = state;
      that.getPaperList();
    });
  }
  };
</script>
<style scoped>
   /* 考试记录列表 */

/* 标题 */

.package-exam__show {
  width: calc(100% - 40px);
  padding: 0 20px;
  background: #fff;
  border: solid 1px #ebebeb;
  border-top: none;
}

.package-exam__showbox {
  /* height: 460px; */
  margin-bottom: 20px;
}

.package-exam__noShow {
  width: 100%;
  background: #fff;
  height: 450px;
  padding-top: 100px;
  background: #fff;
  border: 1px solid #ebebeb;
  border-top: none;
}

.package-exam__item {
  width: 100%;
  background: #fff;
  margin-top: 20px;
  border: solid 1px #ebebeb;
  border-bottom: none;
}

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

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

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

/* 导航栏 */

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

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

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

.package-exam__box {
  height: 85px;
  border-bottom: 1px solid #ebebeb;
}

.package-exam__box:hover {
  background: #f0f2f5;
}

.package-exam__left {
  float: left;
}

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

.package-exam__title span {
  color: #488bff;
}

.package-exam__text {
  font-size: 12px;
  color: #999;
  margin: 14px 0 0 0;
}

.package-exam__text span {
  margin-right: 38px;
  float: left;
}

.package-exam__right {
  width: 300px;
  float: right;
  margin: 25px 0 0 0;
}

.package-exam__score {
  font-size: 12px;
  color: #999;
  float: left;
  line-height: 38px;
}

.package-exam__score i {
  font-size: 18px;
  color: #488bff;
  font-style: normal;
}

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

/* 难度 */

.package-exam__difficulty {
  float: left;
  position: relative;
}

.package-exam__star {
  position: absolute;
  left: 35px;
  top: 50%;
  margin-top: -10px;
  display: block;
  width: 80px;
  height: 20px;
  background: url("/ks_inc/member-center/images/exam/me_test_icon_hard.png")
    no-repeat left center;
  z-index: 10;
}

.package-exam__star-bg {
  position: absolute;
  left: 35px;
  top: 50%;
  z-index: 1;
  margin-top: -10px;
  display: block;
  width: 80px;
  height: 20px;
  background: url("/ks_inc/member-center/images/exam/me_test_icon_easy.png")
    no-repeat left center;
}

.package-exam__pagination {
  width: 100%;
  height: 60px;
  background: #fff;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
  background: #f0f2f5;
}
.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;
}
</style>


