<template>
  <div class="main" v-if="loaded==true">
    <div class="path-box line-height36 f14" v-if="category_list.length">
      练习内容：
      <font v-for="(item,i) in category_list" :key="i">
        {{item.categoryname}}
        <i v-if="i+1<category_list.length" class="iconfont icon-jiantou f20 vertical-align"></i>
      </font>
    </div>
    <div class="paper-details white-bg p20">
      <h3 class="align-center line-height46 f18 mb20">{{paperInfo.title}}</h3>
      <div class="clearfix">
        <div class="paper-img-box fl">
          <img src="../assets/common/shijuan.jpg" />
        </div>
        <div class="paper-con mt20 fr">
          <ul class="clearfix pt10 f14">
            <li class="first-child line-height26" v-if="!paperInfo.isfree">
              试卷价格：
              <font class="green-font f15">免费</font>
            </li>
            <li
              class="first-child line-height26"
              v-else-if="paperInfo.isfree&&paperInfo.is_singlebuy"
            >
              试卷价格：
              <font>{{paperInfo.price}}{{paperInfo.chargetype_unit}}</font>
            </li>
            <li class="first-child line-height26" v-else>
              试卷价格：
              <font class="red-font f15">不允许单购</font>
            </li>
            <li class="fl line-height26 mt20">答题时间：{{paperInfo.exam_time||'暂无设置'}}</li>
            <li class="fl line-height26 mt20">试卷总分：{{paperInfo.sumscore}}分</li>
            <li class="fl line-height26 mt20">试卷难度：{{paperInfo.paper_level_name}}</li>
            <li class="fl line-height26 mt20">试卷类型：{{paperInfo.exam_typename}}</li>
            <li class="fl line-height26 mt20">考试人数：{{paperInfo.studentcount}}人</li>
          </ul>
          <div class="mt20">
            <router-link
              :to="{name:'TestPage',query:{paperid:$route.query.paperid,categoryid:$route.query.categoryid,schoolid:$route.query.schoolid,preview:preview,courseid:$route.query.courseid,workid:$route.query.workid,stu:$route.query.stu}}"
              tag="a"
            >
              <ks-button type="danger" class="mr10 vertical-align">进入做题</ks-button>
            </router-link>
            <ks-button
              plain
              class="mr10 vertical-align collect-button"
              @click="collectionPaper"
              v-if="$store.state.userid"
            >
              <i
                class="iconfont mr5"
                :class="getParameters.collect==0?'icon-shoucang':'yellow-font icon-shoucang1'"
              ></i>
              {{getParameters.collect==0?'收藏试卷':'取消收藏'}}
            </ks-button>
          </div>
        </div>
      </div>
    </div>
    <div class="white-bg mt20 p20">
      <h3 class="line-height46 f18 mb20">试卷介绍</h3>
      <div class="shortdesc" :class="paperInfo.shortdesc==''?'empty-block':''">
        <span v-if="paperInfo.shortdesc" v-html="paperInfo.shortdesc"></span>
        <span class="empty-block_empty" v-else>暂无数据</span>
      </div>
    </div>
    <ks-dialog
      :visible.sync="isShowOpera"
      title="提示"
      width="300px"
      align="center"
      top="30%"
      isshowclose="1"
    >
      <div class="tips-con">
        <i
          class="f50 iconfont vertical-align"
          :class="operatstatus==0 && 'red-font icon-shibai'||operatstatus==1 && 'green-font icon-chenggong'||operatstatus==3 && 'red-font icon-jinggao'"
        ></i>
        <font class="f16 vertical-align ml10">{{operaTips}}</font>
      </div>
    </ks-dialog>
  </div>
</template>
<script>
import { PaperDesc, SetPaperCollect } from "@/api/exam";
export default {
  data() {
    return {
      loaded: false,
      getParameters: {
        type: 1,
        infoid: this.$route.query.paperid,
        categoryid: this.$route.query.categoryid,
        collect: 1
      },
      category_list: [],
      paperInfo: {},
      isShowOpera: false,
      operatstatus: 0,
      operaTips: "",
      isPayPaper: false,
      preview: this.$route.query.preview
    };
  },
  methods: {
    /**加载页面 */
    loadPage() {
      PaperDesc({
        paperid: this.getParameters.infoid,
        categoryid: this.getParameters.categoryid
      }).then(res => {
        if (res.result) {
          this.category_list = res.category_list;
          this.paperInfo = res.data;
          document.title = this.paperInfo.title;
          this.getParameters.collect = res.data.collect;
        } else {
          this.isShowOpera = true;
          this.operatstatus = 0;
          this.operaTips = res.msg;
          setTimeout(() => {
            this.isShowOpera = false;
          }, 1500);
        }
      });
      this.loaded = true;
    },
    /**收藏试卷 */
    collectionPaper() {
      let tipstext = "";
      this.getParameters.collect
        ? (this.getParameters.collect = 0)
        : (this.getParameters.collect = 1);
      if (this.getParameters.collect == 1) {
        tipstext = "收藏成功";
      } else {
        tipstext = "取消收藏";
      }
      SetPaperCollect(this.getParameters).then(res => {
        if (res.result) {
          this.isShowOpera = true;
          this.operatstatus = 1;
          this.operaTips = tipstext;
          setTimeout(() => {
            this.isShowOpera = false;
            this.loadPage();
          }, 1500);
        } else {
          this.isShowOpera = true;
          this.operatstatus = 0;
          this.operaTips = res.msg;
          setTimeout(() => {
            this.isShowOpera = false;
          }, 1500);
        }
      });
    }
  },
  mounted() {
    this.loadPage();
  }
};
</script>
<style scoped>

.paper-details h3 {
  border-bottom: 1px solid #eee;
}
.paper-img-box {
  width: 270px;
}
.paper-con {
  width: 860px;
}
.paper-con li {
  width: 50%;
}
.paper-con li.first-child {
  width: 100%;
}
.shortdesc {
  min-height: 300px;
  overflow: hidden;
}

.collect-button:hover,
.collect-button:focus {
  border-color: #e64a3b !important;
  color: #e64a3b !important;
}
.vip {
  padding: 2px 3px;
  border-radius: 2px;
}

</style>
<style>
.shortdesc img{
  max-width: 100% !important;
}
</style>