<template>
  <ks-page-scroll-container>
    <div class="examBank">
      <!-- 头部标题 -->
      <van-nav-bar left-arrow @click-left="onClickLeft">
        <div slot="title" class="navtitle">试卷介绍</div>
      </van-nav-bar>
      <!-- 考试题库列表 -->
      <div class="examBank-item">
        <van-row class="border-bottom bottom-line">
          <van-col span="24" class="center-align">{{paperInfo.title}}</van-col>
        </van-row>
        <van-row class="border-bottom bottom-line">
          <van-col span="12" class="right-align">试卷总分：{{paperInfo.sumscore}}分</van-col>
          <van-col span="12" class="left-align left-line">试卷难度：{{paperInfo.paper_level_name}}</van-col>
        </van-row>
        <van-row class="border-bottom bottom-line">
          <van-col span="12" class="right-align">试卷类型：{{paperInfo.exam_typename}}</van-col>
          <van-col span="12" class="left-align left-line">考试人数：{{paperInfo.studentcount}}人</van-col>
        </van-row>
        <!-- <van-row class="border-bottom bottom-line">
          <van-col span="12" class="right-align">试卷地区：{{paperInfo.province_name||'暂无'}}</van-col>
          <van-col span="12" class="left-align left-line">考试人数：{{paperInfo.studentcount}}人</van-col>
        </van-row>-->
        <van-row class="border-bottom bottom-line">
          <van-col span="12" class="right-align">
            <span class="first-child line-height26" v-if="!paperInfo.isfree">
              试卷价格：
              <font class="green-font f15">免费</font>
            </span>
            <span
              class="first-child line-height26"
              v-else-if="paperInfo.isfree&&paperInfo.is_singlebuy"
            >
              试卷价格：
              <font>{{paperInfo.price}}{{paperInfo.chargetype_unit}}</font>
            </span>
            <span class="first-child line-height26" v-else>
              试卷价格：
              <font class="red-font f15">不允许单购</font>
            </span>
          </van-col>
          <van-col span="12" class="left-align left-line">答题时间：{{paperInfo.exam_time||'暂无'}}</van-col>
        </van-row>
      </div>
      <div class="center-align p15">
        <van-button
          round
          class="w95 mr10 collect-btn vertical-align"
          type="default"
          @click="collectionPaper"
          v-if="$store.state.userid"
        >
          <i
            class="iconfont mr5"
            :class="collect==0?'icon-shoucang':'yellow-font icon-shoucang1'"
          ></i>
          {{collect==0?'收藏试卷':'取消收藏'}}
        </van-button>
        <van-button
          round
          :to="{name:'TestPage',query:{paperid:$route.query.paperid,courseid:$route.query.courseid,categoryid:$route.query.categoryid,title:paperInfo.title,workid:$route.query.workid,stu:$route.query.stu}}"
          type="danger"
          class="w95 mr10 vertical-align"
        >进入做题</van-button>
      </div>
    </div>
  </ks-page-scroll-container>
</template>

<script>
import { PaperDesc, GetAllPaperCategory, GetAllPaperType} from "@/api/paper";
import { SetPaperCollect } from "@/api/exam";
export default {
  name: "ExamBank",
  data() {
    return {
      classes: "未选择", //选中课程
      searchText: "", //搜索内容
      value: null,
      size: 9,
      readonly: true,
      paperInfo: {}, //接口返回数组
      onshow: false,
      allClass: [],
      active: null,
      id: null,
      typeData: [],
      typeid: 0,
      paperid: 0,
      categoryid: 0,
      isPayPaper: false,
      collect:1
    };
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    // 弹出层开关
    popup() {
      this.onshow = true;
    },
    newClass(classes) {
      this.classes = classes;
    },
    getPaperInfo() {
      this.onshow = false;
      PaperDesc({
        paperid: this.$route.query.paperid,
        categoryid: this.$route.query.categoryid
      }).then(res => {
        if (res.result == true) {
          this.paperInfo = res.data;
          this.collect = res.data.collect;
        } else {
          this.$Toast(res.msg);
        }
        document.title = this.paperInfo.title || "试卷介绍";
      });
    },
    getAllPaperCategory() {
      //请求接口获取一级课程列表
      GetAllPaperCategory().then(res => {
        this.allClass = res.data;
        localStorage.allClass = JSON.stringify(res.data);
      });
    },
    /**收藏试卷 */
    collectionPaper() {
      let tipstext = "";
      this.collect
        ? (this.collect = 0)
        : (this.collect = 1);
      if (this.collect == 1) {
        tipstext = "收藏成功";
      } else {
        tipstext = "取消收藏";
      }
      SetPaperCollect({
        type: 1,
        infoid: this.$route.query.paperid,
        categoryid: this.$route.query.categoryid,
        collect: this.collect
      }).then(res => {
        if (res.result) {
          this.$toast(tipstext,'success');
        } else {
          this.$toast(res.msg,'fail');
        }
      });
    }
  },
  created() {
    // 获取试卷列表
    this.getPaperInfo();
    //请求接口获取一级课程列表
    this.getAllPaperCategory();
    //获取套卷练习分类名称
  },
  activated() {
    //更新数据的生命周期函数
    // 获取用户课程记录
    if (localStorage.classes) {
      this.classes = localStorage.classes;
    }
    // 获取试卷列表
    this.getPaperInfo();
  }
};
</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: #f5f5f5;
}
/* 导航 */
.examBank-nav {
  border-bottom: 1px solid #ebebeb;
  font-size: 14px;
  font-family: PingFang-SC-Regular;
  font-weight: 400;
  background: #f0f4f7;
  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: 100%;
  margin: 0.5rem 0 0;
  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: 11px;
  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 {
  width: 25%;
  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: 11px;
  font-family: PingFangSC-Semibold;
  font-weight: 600;
  color: #fff;
  width: 58px;
  height: 18px;
  border-radius: 9px;
  background: #ff795c;
  text-align: center;
  line-height: 18px;
}
.difficulty-flex {
  display: flex;
}
.difficulty-flex span {
  float: left;
}
.van-rate {
  float: left;
  margin-top: 1px;
}
.center-align,
.left-align,
.right-align {
  padding: 10px;
  font-size: 14px;
}
.left-line {
  border-left: 1px solid #eee;
}
.right-line {
  border-right: 1px solid #eee;
}
.bottom-line {
  border-bottom: 1px solid #eee;
}
.center-align {
  text-align: center;
}
.left-align {
  text-align: left;
}
.right-align {
  text-align: right;
}
.w95 {
  width: 95%;
  font-size: 16px;
  background: #ff795c;
}
.p15 {
  padding: 15px 10px;
}
.green-font {
  color: #4caf50;
}
.red-font {
  color: #ff795c;
}
.collect-btn{
  background: #fff;
  border: 1px solid #ff795c;
  color: #ff795c;
  margin-bottom: 0.8rem;
}
</style>

