<template>
  <div class="wrongquestion">
    <Select
      :Data="SelectData"
      @select="SelectFunc"
    />
    <div
      class="tishi"
      style="font-size:14px"
    >
      <div class="left">共<span style="color:#f03">{{no}}</span>道错题</div>
      <div class="right">
        <div class="label">排序：</div>
        <div class="sort">
          <div
            v-for="(item,index) of sort"
            :key="index"
            :class="{'foucs' : item.state}"
            @click="SortFunc(item)"
          >{{item.name}}</div>
        </div>
      </div>
    </div>
    <div
      class="item"
      v-for="(item,index) in list"
      :key="index"
    >
      <WTestPaper
        :Data="item"
        :State="state"
      />
    </div>
    <Pagination
      :Data="pagination"
      @Func="Request"
    />
  </div>
</template>
<script>
const Select = () => import("@/components/Select/index");
const WTestPaper = () => import("@/components/WTestPaper");
const Pagination = () => import("@/components/Pagination/index");
import { ABC } from '@/utils/index';
import Home from '@/api/home'
export default {
  components: { Select, WTestPaper, Pagination },
  data () {
    return {
      state: true,
      no: 0,//错题
      // 排序
      sort: [
        { name: "时间正序", value: "last_time", },
        { name: "时间倒序", value: "-last_time", state: true },
        { name: "项目", value: "question__chapter__subject_id" },
      ],
      // 选择栏
      SelectData: [{
        name: "科目",
        value: 0,
        list: []
      }],
      // 模拟数据 样板 使用时删除
      list: [],
      // 分页
      pagination: {

      },
      // 活动状态
      active: { subject: '', sort: "-last_time" }
    };
  },
  created () {
    Home.wrongquestion_type().then(res => {
      return new Promise(resolve => {
        try {
          let SelectData = [{
            name: "科目",
            value: 0,
            list: []
          }];
          let { data } = res, list = ['不限'];
          data.subject.forEach(item => list.push(item.name));
          SelectData[0]['list'] = list;
          SelectData[0]["python"] = [{ name: "不限", id: '' }, ...data.subject];
          this.SelectData = SelectData;
          resolve();
        } catch (err) {
          console.error(`数据错误处理：${err}`)
        }
      })
    }).then(res => this.Request())
  },
  methods: {
    // 选择栏
    SelectFunc (data) {
      this.active = { ...this.active, subject: this.SelectData[0]["python"][data[0]]["id"] };
      this.Request();
    },
    // 排序
    SortFunc (data) {
      let sort = JSON.parse(JSON.stringify(this.sort));
      sort = sort.map(item => {
        let obj = item.name == data.name ? { name: item.name, state: true, value: item.value } : { name: item.name, state: false, value: item.value }
        item.name == data.name ? this.active = { ...this.active, sort: item.value } : '';
        return obj
      })
      this.sort = sort;
      this.Request();
    },
    // 请求数据
    Request (data = {}) {
      let query = { ...data, ...this.active }
      Home.wrongquestion_sort(query).then(res => {
        try {
          let { currentPage, data, totalResult, totalPage } = res;
          this.no = totalResult;
          this.pagination = {
            currentPage,
            page_size: 10,
            total: totalResult,
            page_count: totalPage
          }
          let list = [];
          data.forEach((item, index) => {
            let obj = {
              content: item.question.title,
              type: item.question.type == 1 ? 'radio' : item.question.type == 2 ? 'checkbox' : item.question.type == 3 ? 'input' : 'bool',
            }
            let value = [], values = [];
            if (item.question.type == 4) {
              value = [{ id: 1, label: "正确", state: item.question.judgment == '1' ? true : false }, { id: 0, label: "错误", state: item.question.judgment == '1' ? false : true }];
              values = [{ id: 1, label: "正确", state: item.question.judgment == '0' ? true : false }, { id: 0, label: "错误", state: item.question.judgment == '0' ? false : true }]
            } else {
              item.question.items.forEach((it, ind) => {
                let obj = {}, objs = {};
                if (item.question.type == 3) {
                  obj = { id: it.order, label: it.content }
                  objs = {
                    id: item.answer.item[ind].order,
                    label: item.answer.item[ind].content,
                  }
                } else {
                  obj = { id: it.id, label: it.content, key: ABC[ind], state: it.right }
                  let arr = item.answer.item.filter(em => em.option == it.id);
                  objs = { id: it.id, label: it.content, key: ABC[ind], state: (arr.length != 0 ? true : false) }
                }
                value.push(obj);
                values.push(objs);
              })
            }

            obj["value"] = value;
            obj["values"] = values;
            obj["desc"] = item.question.analysis;
            obj["header"] = `${item.exam_name}>>>共错误${item.wrong_count}次>>>最后一次出错：${item.last_time}`;
            list.push(obj)
          })
          this.list = list;
        } catch (err) {
          console.error(`数据处理：${err}`);
        }
      })
    },
  }
}
</script>
<style lang="less" scoped>
.wrongquestion {
  .item {
    margin: 20px 0;
  }
  .tishi {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .right {
      display: flex;
      align-items: center;
      .sort {
        display: flex;
        align-items: center;
        div {
          border: 1px solid #3867b7;
          padding: 3px 5px;
          border-right: 0;
        }
        & > :last-child {
          border-right: 1px solid #3867b7;
        }
        .foucs {
          background-color: #3867b7;
          color: #fff;
        }
      }
    }
  }
}
</style>