<template>
  <ks-page-scroll-container :page="page" :page-count="pageCount" @page-change="getPaperList">
    <div class="examBank">
      <!-- 头部标题 -->
      <van-nav-bar title="套卷练习" left-arrow @click-left="onClickLeft">
      </van-nav-bar>
      <!-- 头部导航 -->
      <div class="examBank-nav" v-if="typeData.length > 0">
        <span :class="{ active: typeid == 0 }" @click="sidebar(0)">全部试卷</span>
        <span
          :class="{ active: typeid == site.typeid }"
          v-for="(site, n) in typeData"
          :key="n"
          @click="sidebar(site.typeid)"
        >{{ site.typename }}</span>
      </div>
      <!-- 考试题库列表 -->
      <div class="examBank-item">
        <!-- 题库列表 -->
        <div
          class="examBank-box"
          v-for="(paper, index) in paperList"
          :key="index"
          v-show="showList"
        >
          <div class="examBank-box_top">
            <div class="examBank-box_title">
              <ul>
                <li>{{ paper.title }}</li>
              </ul>
            </div>
            <div class="examBank-box_score" v-if="paper.sumscore == -1">- -</div>
            <div class="examBank-box_score" v-else>{{ paper.sumscore }}分</div>
          </div>
          <div class="examBank-box_bottom">
            <div class="examBank-box_difficulty">
              <div>{{ paper.studentcount }}人参考</div>
              <div class="difficulty-flex">
                <span>难度</span>
                <van-rate
                  :size="size"
                  color="#ff795c"
                  :readonly="readonly"
                  v-model="difficulty[index]"
                  :count="3"
                />
              </div>
            </div>
            <router-link
              class="examBank-box_again"
              :to="{
                name: 'PaperInfo',
                query: { paperid: paper.paperid, categoryid: paper.categoryid }
              }"
              tag="div"
              v-if="paper.is_repractice != 0"
            >
              {{
              paper.is_repractice == -1
              ? "开始练习"
              : paper.is_repractice == 2
              ? "继续练习"
              : "重新练习"
              }}
            </router-link>
          </div>
        </div>
        <!-- 无数据提示 -->
        <Nodata v-if="showNodata" />
      </div>
      <!-- 弹出层 -->
      <Popup :all-class="allClass" @classes="newClass" v-if="onshow" />
      <!-- 选择考试顺序 -->
      <sort v-if="showSort" @closeSort="closeSort" :paperid="paperid" :categoryid="categoryid" />
    </div>
  </ks-page-scroll-container>
</template>

<script>
import {
  GetPaperList,
  GetAllPaperCategory,
  GetAllPaperType
} from "@/api/paper";
export default {
  name: "ExamBank",
  data() {
    return {
      showList: true,
      showNodata: false,
      pageCount: 0,
      page: 0,
      classes: "未选择", //选中课程
      searchText: "", //搜索内容
      value: null,
      size: 9,
      readonly: true,
      paperList: [], //接口返回数组
      difficulty: [0], //难度星星
      onshow: false,
      allClass: [],
      active: null,
      id: null,
      typeData: [],
      typeId: 0,
      showSort: false,
      paperid: 0,
      categoryid: 0,
      loading:false
    };
  },
  methods: {
    openSort(paperid, categoryid) {
      this.showSort = true;
      this.paperid = paperid;
      this.categoryid = categoryid;
    },
    closeSort() {
      this.showSort = false;
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    // 跳转考试内容
    getExamList(url) {
      this.$router.push(url);
    },

    open() {
      this.$router.push({
        name: "ExamSelect"
      });
    },
    newClass(classes) {
      this.classes = classes;
    },
    sidebar(id) {
      this.typeId = id;
      this.getPaperList();
    },
    getPaperList(p = 1) {
      
      if(this.loading){
        return
      }
      this.onshow = false;
      this.loading = true
      GetPaperList({
        categoryid: this.$route.query.categoryid,
        typeid: this.typeId,
        page: p,
        pagesize: 10
      }).then(res => {
        if (res.result == true) {
          this.paperList = this.paperList.concat(res.data);
          this.page = p;
          this.pageCount = res.pagecount;
          this.showList = true;
          this.showNodata = false;
          this.difficulty = [];
          for (var i in this.paperList) {
            //根据难度返回星星颗数
            this.difficulty.push(
              (this.paperList[i].paper_level == 0 && 1) ||
                (this.paperList[i].paper_level == 1 && 2) ||
                (this.paperList[i].paper_level == 2 && 3)
            );
          }
        } else {
          this.showList = false;
          this.showNodata = true;
          this.page = 0;
          this.pageCount = 0;
        }
        this.loading = false;
      });
    },
    getAllPaperCategory() {
      //请求接口获取一级课程列表
      GetAllPaperCategory({}).then(res => {
        this.allClass = res.data;
        localStorage.allClass = JSON.stringify(res.data);
      });
    }
  },
  created() {
    //获取套卷练习分类名称
    GetAllPaperType().then(res => {
      if (res.result == true) {
        this.typeData = res.data;
      }
    });
    //更新数据的生命周期函数
    // 获取用户课程记录
    if (localStorage.classes) {
      this.classes = localStorage.classes;
    }
    this.getAllPaperCategory();
    // 获取试卷列表
  },
  activated() {
    document.title = "套卷练习";
    this.paperList = [];
    this.getPaperList();
  }
};
</script>

<style scoped>
.van-icon-arrow-left {
  color: #4d4c4c !important;
}
.active {
  background: #fca492 !important;
  color: #fff !important;
}
.navtitle img {
  width: 10px;
  height: 10px;
  margin-left: 5px;
}
.examBank {
  width: 100%;
  min-height: 100vh;
  background: #fff;
}
/* 导航 */
.examBank-nav {
  border-bottom: 1px solid #ebebeb;
  font-size: 14px;
  /* font-family: PingFang-SC-Regular; */
  font-weight: 400;
  background: #f5f5f5;
  width: 90%;
  padding: 0 5% 10px 5%;
}
.examBank-nav span {
  margin-right: 10px;
  display: inline-block;
  height: 28px;
  width: 74px;
  font-size: 14px;
  /* font-family: PingFang-SC-Regular;
  font-weight: 400;
  color: #010c17; */
  line-height: 28px;
  text-align: center;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #fca492;
  margin-top: 10px;
}
/* 考试题库列表 */
.examBank-item {
  width: 90%;
  padding: 13px 5% 0 5%;
  background: #fff;
}
.examBank-box {
  margin-bottom: 13px;
  border-bottom: 1px solid #ebedef;
}
.examBank-box_top {
  display: flex;
  justify-content: space-between;
}
.examBank-box_bottom {
  margin-top: 6px;
  width: 100%;
  height: 31px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  /* font-family: PingFangSC-Light;
  font-weight: 300; */
  color: #999;
}
.examBank-box_title {
  width: 75%;
  font-size: 14px;
  /* font-family: PingFang-SC-Medium;
  font-weight: 500; */
  color: #333;
  float: left;
}
.examBank-box_title ul li {
  list-style: disc inside none;
}
.examBank-box_score {
  /* display: inline-block; */
  width: 25%;
  line-height: 20px;
  float: right;
  text-align: right;
}
.examBank-box_difficulty {
  width: 50%;
  font-size: 10px;
  color: #999;
  display: flex;
  justify-content: space-between;
}
.examBank-box_again {
  font-size: 12px;
  /* font-family: PingFangSC-Semibold;
  font-weight: 600; */
  color: #fff;
  width: 65px;
  height: 20px;
  border-radius: 10px;
  background: #ff795c;
  text-align: center;
  line-height: 20px;
}
.difficulty-flex {
  display: flex;
}
.difficulty-flex span {
  /* display: inline-block; */
  float: left;
}
.van-rate {
  float: left;
  margin-top: 1px;
}
</style>
