<template>
  <div class="mock_examination">
    <Select
      :Data="SelectData"
      @select="SelectFunc"
    />
    <p class="testpaper">共{{TestPaper[0]}}套试卷 做过{{TestPaper[1]}}套</p>
    <div class="papers">
      <div
        v-for="(item,index) in Papers"
        :key="index"
        class="item"
        @click="ClickFunc(item)"
      >
        <el-card shadow="never">
          <p class="title">{{item.title}}</p>
          <div class="body">
            <span>{{item.type}}</span>
            <span v-if="item.state">做过</span>
          </div>
          <p class="footer">共{{item.total}}题，{{item.num}}人做过</p>
        </el-card>
      </div>
    </div>
    <Pagination
      :Data="pagination"
      :PagesSize="[12, 24, 36, 48,56,108]"
      @Func="List"
    />
  </div>
</template>
<script> 
const Select = () => import("@/components/Select/index");
const Pagination = () => import("@/components/Pagination/index");
import Home from '@/api/home.js'
export default {
  components: {
    Select,
    Pagination
  },
  data () {
    return {
      // 选择栏
      SelectData: [],
      // 共记到试卷，做过几套
      TestPaper: [],
      // 试卷
      Papers: [],
      active: { status: '', subject: '' },//类型储存
      pagination: {},//分页
    }
  },
  created () {
    // 类型列表
    Home.mock_examination_type().then(res => {
      return new Promise(resolve => {
        try {
          let { data } = res, arr = ["不限"];
          data.forEach(item => {
            arr.push(item.name);
          })
          let SelectData = [];
          SelectData[0] = {
            name: "科目",
            value: 0,
            list: arr,
            python: [{ name: "不限", id: '' }, ...data]
          }
          SelectData[1] = {
            name: "状态",
            value: 0,
            list: ["不限", "做过", "未做过"]
          };
          this.SelectData = SelectData;
          resolve()
        } catch (err) {
          console.error(`数据处理错误：${err}`)
        }
      })
    }).then(res => this.List())
  },
  methods: {
    // 列表数据
    List (data = { page: 1, limit: 12 }) {
      let query = { ...data, ...this.active };
      Home.mock_examination_list(query).then(res => {
        try {
          let { currentPage, showCount, totalResult, data, totalPage, totalRow
          } = res;
          if (JSON.stringify(totalRow) != {}) this.TestPaper = [totalResult, totalRow.did_paper];
          this.pagination = {
            currentPage,
            page_size: showCount,
            total: totalResult,
            page_count: totalPage
          }
          let Papers = [];
          Papers = data.map(item => {
            let obj = { id: item.id, title: item.name, type: item.subject_name, state: item.status_text, total: item.question_total_count, num: item.did_count };
            return obj
          })
          this.Papers = Papers;
        } catch (err) {
          console.error(`数据处理报错：${err}`)
        }
      })
    },
    // 选择栏
    SelectFunc (data) {
      let status = data[1] == 0 ? '' : data[1],
        subject = this.SelectData[0]["python"][data[0]]["id"];
      this.active = { status, subject };
      this.List()
    },
    // 套卷点击
    ClickFunc (data) {
      Home.mock_examination_exam({ exampaper: data.id }).then(res => this.$router.push({
        path: "/mockexam", query: {
          practise: res.data.exam_log
        }
      }))
    }
  }
}
</script>
<style lang="less" scoped>
.mock_examination {
  .testpaper {
    font-size: 14px;
    color: #777;
  }
  .papers {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin: 15px 0;
    .item {
      width: 250px;
      box-sizing: border-box;
      margin: 0 20px 20px;
      &:hover {
        cursor: pointer;
      }
      .title {
        margin-top: 0;
        color: #666;
      }
      .body {
        font-size: 14px;
        span {
          display: inline-block;
          padding: 0 3px;
          border-radius: 5px;
        }
        & > span:first-child {
          background-color: #e6a23c;
          color: #fff;
          border: 1px solid #e6a23c;
        }
        & > span:nth-child(2) {
          color: #67c23a;
          border: 1px solid #67c23a;
          margin-left: 5px;
        }
      }
      .footer {
        margin-bottom: 0;
        color: #666;
        font-size: 14px;
      }
    }
  }
}
</style>