<template >
  <div class="bestpaper_container">
    <el-card class="mb10">
      <div class="smart_tabs">
        <div class="tab" :class="tabActive == 0 ? 'tab_active' : ''" @click="switchTab(0)">
          名校试卷
        </div>
        <div class="tab" :class="tabActive == 1 ? 'tab_active' : ''" @click="switchTab(1)">
          历年真题
        </div>
      </div>
      <!--  名校试卷 -->
      <div class="radio_contianer" v-show="tabActive == 0">
        <div style="margin-bottom: 16px">
          <span>科目</span>
          <el-radio-group v-model="form.subjectName" size="mini" @change="toggleSub">
            <el-radio-button :label="item" v-for="(item, index) in subjectList" :key="index">{{ item }}</el-radio-button>
          </el-radio-group>
        </div>
        <div style="margin-bottom: 16px">
          <span>年级</span>
          <el-radio-group v-model="form.gradeName" size="mini" @change="toggleGrade">
            <el-radio-button :label="item" v-for="(item, k, index) in gradeList" :key="index">{{ item }}</el-radio-button>
          </el-radio-group>
        </div>
        <div style="margin-bottom: 16px">
          <span>类型</span>
          <el-radio-group v-model="form.paperType" size="mini" @change="toggleType">
            <el-radio-button :label="item" v-for="(item, index) in types" :key="index">{{ item }}</el-radio-button>
          </el-radio-group>
        </div>
        <div style="margin-bottom: 16px">
          <span style="width: 28px">地区</span>
          <el-radio-group v-model="form.area" size="mini" @change="toggleAreas">
            <el-radio-button :label="item" v-for="(item, index) in areasList" :key="index">{{ item }}</el-radio-button>
          </el-radio-group>
        </div>
      </div>
      <!-- 历年真题 -->
      <div class="radio_contianer">
        <div style="margin-bottom: 16px" v-show="tabActive == 1">
          <span>科目</span>
          <el-radio-group v-model="form.subjectName" size="mini" @change="toggleSubByYear">
            <el-radio-button :label="item" v-for="(item, index) in subjectList" :key="index">{{ item }}</el-radio-button>
          </el-radio-group>
        </div>
        <div style="margin-bottom: 16px">
          <span>年份</span>
          <el-radio-group v-model="form.year" size="mini" @change="toggleYear">
            <el-radio-button :label="item" v-for="(item, index) in years" :key="index">{{ item }}</el-radio-button>
          </el-radio-group>
        </div>
      </div>
    </el-card>
    <el-card class="main">
      <div class="search_header">
        <input placeholder="请输入内容" v-model="form.papername" @keyup.enter="clickSearch" />
        <img src="@/assets/images/icon_search2.png" alt="" @click="clickSearch" />
      </div>
      <!-- 试卷整体-----名校试卷名校试卷  -->
      <div class="paper_container" v-show="tabActive == 0">
        <div class="paper_item" v-for="item in papersList" :key="item.id">
          <img src="@/assets/images/img_mignxiaoshijuan.png" alt="" />
          <div class="center_wrap">
            <div class="center_tit">
              {{ item.papername }}
            </div>
            <div class="center_opera">
              <div class="view" @click="toPreView(item.id, item.papername)">
                <img src="@/assets/images/icon_view.png" alt="" />
                <span>预览</span>
              </div>
              <div class="download" @click="paperDownLoad(item.id)">
                <span>下载</span>
              </div>
              <div class="shoucan">
                <div @click="collect(item)" v-if="!item.collect">
                  <img src="@/assets/images/icon_shoucang_n.png" alt="" />
                  <span>收藏</span>
                </div>
                <div @click="cancelCollect(item)" v-else>
                  <img src="@/assets/images/icon_shoucang_s.png" alt="" />
                  <span>已收藏</span>
                </div>
              </div>
            </div>
          </div>
          <div class="view_count">
            <img src="@/assets/images/icon_eye2.png" alt="" />
            <span>{{ null==item.readNum?0:item.readNum }}人已预览</span>
          </div>
        </div>
      </div>

      <!-- 试卷整体-----历年真题  -->
      <div class="real_topic" v-if="tabActive == 1">
        <div class="topic_item" v-for="item in paperYearList" :key="item.id">
          <div class="paper_tit">
            {{ item.papername }}
          </div>
          <div class="paper_opera">
            <div class="view" @click="toPreView(item.id, item.papername)">
              <img src="@/assets/images/icon_view.png" alt="" />
              <span>预览</span>
            </div>
            <div class="btn" @click="paperDownLoad(item.id)">下载</div>
          </div>
        </div>
      </div>
      <!-- 分页 -->
      <el-pagination class="pagination" layout="prev, pager, next" :total="total" :page-size="pageForm.pageSize" :current-page="pageForm.pageNum" @prev-click="prev" @next-click="next" @current-change="togglePage">
      </el-pagination>
    </el-card>
  </div>
</template>
<script>
import {
  papersTypes,
  papersAreas,
  papersList,
  papersCancelCollect,
  papersCollect,
  papersYears,
  subjectList,
  paperGrade,
  downloadRealPaper
} from "@/api/webApi/webQue.js";
import { mapGetters } from 'vuex';
export default {
  data() {
    return {
      tabActive: 0,
      form: {
        subjectName: "语文",
        gradeName: "高一",
        paperType: "",
        area: "",
        year: 0,
      },
      pageForm: {
        pageNum: 1,
        pageSize: 12,
      },
      subjectList: [],
      gradeList: [],
      types: [],
      areasList: [],
      papersList: [],
      total: 0, // 试卷总数
      years: [],
      queryYear: 0,
      paperYearList: [],
    };
  },
  computed: {
    ...mapGetters(["period"])
  },
  created() {
    let query = this.$route.query;
    // 设置默认高亮
    this.tabActive = query.tabActive ? query.tabActive : 0;
    this.queryYear = query.year ? query.year : 0;
    this.getSubjectList();
    this.getYears();
  },

  methods: {
    paperDownLoad(paperId) {
      downloadRealPaper(paperId, this.period)
    },
    // 科目
    getSubjectList() {
      subjectList().then((res) => {
        this.form.subjectName = res.data[0];
        this.subjectList = res.data;
        this.getGradeList();
        console.log(res);
      });
    },
    // 年级
    getGradeList() {
      paperGrade({ subjectName: this.form.subjectName }).then((res) => {
        this.form.gradeName = res.data[0];
        this.gradeList = res.data;
        this.getPapersTypes();
      });
    },
    // 跳转到预览页面
    toPreView(paperId, paperName) {
      this.$router.push({
        path: "/question-center/bestPaper/preview",
        query: { paperId, paperName },
      });
    },
    // 获得类型列表
    getPapersTypes() {
      papersTypes({
        subjectName: this.form.subjectName,
        gradeName: this.form.gradeName,
      }).then((res) => {
        this.form.paperType = res.data[0];
        this.types = res.data;
        this.getAreas();
      });
    },
    // 获取地区
    getAreas() {
      papersAreas({ ...this.form }).then((res) => {
        this.form.area = res.data[0];
        this.areasList = res.data;
        if (this.tabActive == 0) {
          this.getPaperList();
        }
        console.log(res);
      });
    },
    // 获取年份
    getYears() {
      papersYears({ subjectName: this.form.subjectName }).then((res) => {
        console.log(res);
        this.form.year = res.data[0];
        if (this.queryYear > 0 && this.tabActive == 1) {
          this.form.year = this.queryYear;
        }
        // this.form.year = res.data[0];
        this.years = res.data;
        if (this.tabActive == 1) {
          this.getPaperListByYear();
        }
      });
    },
    // 获取试卷列表
    getPaperList() {
      papersList({ ...this.form, ...this.pageForm }).then((res) => {
        this.total = res.total;
        this.papersList = res.rows;
        console.log(res);
      });
    },
    clickSearch() {
      if (this.tabActive == 0) {
        this.getPaperList();
      } else {
        this.getPaperListByYear();
      }
    },
    // 获取历年真题试卷列表
    getPaperListByYear() {
      this.form.paperType = "历年真题";
      papersList({
        year: this.form.year,
        papersType: this.form.paperType,
        subjectName: this.form.subjectName,
        papername: this.form.papername,
        ...this.pageForm,
      }).then((res) => {
        this.total = res.total;
        this.paperYearList = res.rows;
        console.log(res);
      });
    },
    toggleSub(e) {
      this.form.papername = "";
      this.form.subjectName = e;
      this.getGradeList();
      this.getYears();
    },
    toggleGrade(e) {
      this.form.papername = "";
      this.form.gradeName = e;
      this.getPapersTypes();
    },
    toggleType(e) {
      this.form.papername = "";
      this.form.paperType = e;
      this.getAreas();
    },
    toggleAreas(e) {
      this.form.papername = "";
      this.form.area = e;
      this.getPaperList();
    },
    toggleYear() {
      this.form.papername = "";
      if (this.tabActive == 0) {
        this.getPaperList();
      } else {
        this.getPaperListByYear();
      }
    },
    prev() {
      this.pageForm.pageNum--;
      if (this.tabActive == 0) {
        this.getPaperList();
      } else {
        this.getPaperListByYear();
      }
    },
    next() {
      this.pageForm.pageNum++;
      if (this.tabActive == 0) {
        this.getPaperList();
      } else {
        this.getPaperListByYear();
      }
    },
    // 收藏
    collect(item) {
      item.collect = !item.collect;
      papersCollect({ paperId: item.id }).then((res) => {
        this.msgSuccess("收藏成功");
      });
    },
    // 取消收藏
    cancelCollect(item) {
      item.collect = !item.collect;
      papersCancelCollect({ paperId: item.id }).then((res) => {
        this.msgSuccess("取消收藏成功");
      });
    },
    toggleSubByYear(e) {
      this.form.subjectName = e;
      this.getYears();
    },
    togglePage(index) {
      if (this.tabActive == 0) {
        this.pageForm.pageNum = index;
        this.getPaperList();
      } else {
        this.pageForm.pageNum = index;
        this.getPaperListByYear();
      }
    },
    switchTab(index) {
      this.tabActive = index;
      if (index == 0) {
        this.pageForm.pageNum = 1;
        this.getPapersTypes();
      } else {
        this.pageForm.pageNum = 1;
        this.getPaperListByYear();
      }
    },
  },
};
</script>
<style scoped>
.bestpaper_container {
  padding: 20px;
}
.smart_tabs {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
.smart_tabs .tab {
  text-align: center;
  flex: 1;
  padding: 8px 0 24px 0;
  border-bottom: 4px solid transparent;
}
.smart_tabs .tab_active {
  color: #47c6a2;
  border-bottom: 4px solid #47c6a2;
}
.radio_contianer > div {
  display: flex;
}
.radio_contianer span {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #232323;
  line-height: 20px;
  height: 20px;
  margin-right: 16px;
  flex-shrink: 0;
}
.radio_contianer .el-radio-button {
  margin-right: 8px;
}
.search_header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  margin-right: 20px;
  margin-bottom: 44px;
}
.search_header img {
  position: absolute;
  right: 20px;
  cursor: pointer;
  top: 6px;
}
.search_header input {
  background: #f7f7ff;
  border-radius: 20px;
  border: 1px solid #c6cbf5;
  outline: none;
  width: 340px;
  height: 32px;
  padding-left: 24px;
}
.paper_item {
  overflow: hidden;
  padding-right: 68px;
}
.paper_item:first-child {
  margin-top: 28px;
}
.paper_item {
  margin-bottom: 40px;
}
.paper_item > img {
  float: left;
  margin-right: 24px;
}
.paper_item .center_wrap {
  float: left;
}
.paper_item .center_wrap .center_tit {
  margin-bottom: 48px;
}
.center_opera {
  font-size: 14px;
  overflow: hidden;
}
.center_opera > div {
  float: left;
}
.center_opera .view {
  color: #47c6a2;
  border: 1px solid #47c6a2;
  border-radius: 4px;
  padding: 6px 12px 6px 9px;
  display: flex;
  align-items: center;
  margin-right: 24px;
  cursor: pointer;
}
.center_opera .download {
  color: white;
  padding: 6px 22px;
  background: #47c6a2;
  border-radius: 4px;
  border: 1px solid #47c6a2;
  margin-right: 40px;
  cursor: pointer;
}
.center_opera .shoucan {
  padding: 6px 0;
  display: flex;
  align-items: center;
}
.center_opera .shoucan img {
  margin-right: 10px;
  cursor: pointer;
}
.center_opera .shoucan span {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #9f9f9f;
  line-height: 20px;
}
.center_opera .view img {
  margin-right: 6px;
}
.paper_item .view_count {
  float: right;
  font-weight: 400;
  color: #9f9f9f;
  line-height: 20px;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.pagination {
  display: flex;
  justify-content: center;
}
.real_topic {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.real_topic .topic_item {
  flex: 31% 0 0;
  padding: 20px 58px 20px 20px;
  background: #47c6a224;
  margin-bottom: 32px;
}
.real_topic .topic_item .paper_tit {
  margin-bottom: 32px;
}
.real_topic .topic_item .paper_opera {
  display: flex;
}
.real_topic .topic_item .paper_opera > div {
  display: flex;
  align-items: center;
}
.real_topic .topic_item .paper_opera .view {
  cursor: pointer;
  padding: 8px 12px 8px 9px;
  border: 1px solid #47c6a2;
  color: #47c6a2;
  border-radius: 4px;
  margin-right: 24px;
}
.real_topic .topic_item .paper_opera .btn {
  background: #47c6a2;
  cursor: pointer;
  color: white;
  padding: 6px 22px;
  border-radius: 4px;
}
.real_topic .topic_item .paper_opera .view > img {
  margin-right: 6px;
}

.bestpaper_container >>> .el-radio-button__inner {
  border-left: 1px solid #dcdfe6;
  margin-bottom: 5px;
}

.bestpaper_container >>> .radio_contianer .el-radio-button .el-radio-button__inner {
  border-radius: 16px;
}
.bestpaper_container >>> .radio_contianer .is-active .el-radio-button__inner{
  border-left: none;
}
.bestpaper_container >>> .split_page .el-pager > li {
  border-radius: 50%;
}

</style>

