<!-- eslint-disable vue/no-deprecated-v-bind-sync -->
<template>
  <div class="v-page classify_page">
    <div class="v-ctx" v-loading="paper_list_loading">
      <FormLayout ref="formLayoutRef" :items="formItems" :model="form" :rules="rules" label-width="70px"
        label-position="right" :inline="true">
        <template v-slot:title>
          <QueryInput v-model="form.title" @query="pagingFindList"></QueryInput>
        </template>
        <template v-slot:btns>
        </template>
      </FormLayout>
      <TableLayout :column="column" :data="table_data" :pageInfo="page_info"
        @current-change="(e) => pagingChange({ currentPage: e })" @size-change="(e) => pagingChange({ pageSize: e })">
        <template v-slot:action="props">
          <!-- <el-button type="text" icon="i-j-jxzb-datika" @click="getLastExamHistory(props.row.classifyId)">查看答卷
          </el-button> -->
          <el-button type="text" icon="i-j-jxzb-datika" @click="toMistakeModeLinkAndRow(3,props.row)">查看答卷
          </el-button>
          <el-button type="text" icon="i-j-ksap-bianji2" @click="toMistakeAgain(props.row)">巩固练习
          </el-button>
        </template>
      </TableLayout>
    </div>
    <DialogLayout :shadowBar="false" :visible="mode_selector_dialog_show" title="练习方式" :actionBarOption="{noCencel:true,noConfirm:true}" @onCancel="mode_selector_dialog_show=false;current_classify=null">
      <div class="links">
        <div class="link-item" @click="toMistakeModeLink(2)">
          <i class="el-icon-edit"></i>
          答题模式
        </div>
        <div class="link-item"  @click="toMistakeModeLink(1)">
          <i class="el-icon-document"></i>
          背题模式
        </div>
      </div>
    </DialogLayout>
  </div>
</template>

<script>
import { TableLayout, FormLayout, DialogLayout } from '@/components/layout'
import '@/views/assessment-evaluation/utils/gyStyle.scss'
import { pagingMistakeListApi, getLastExamHistoryId } from '@/api/assessment-evaluation/mistake'
import QueryInput from '@/components/widget/QueryInput.vue'
import { dataReportMixin } from '@/utils/data-report'
export default {
  components: {
    TableLayout, FormLayout, QueryInput, DialogLayout
  },

  data: () => ({
    table_data: [],
    page_info: { currentPage: 1, pageSize: 10, total: 0 },
    // 试题分类树是否加载中
    paper_list_loading: false,
    form: { title: '', isPractive: 1 },
    mode_selector_dialog_show: false,
    current_classify: null
  }),
  props: {
    isMountedLoad: {
      default: false
    }
  },
  created () {
    this.formItems = [
      { prop: 'title' },
      { prop: 'btns', model: { class: 'gy-btns' } }
    ]
    this.column = [
      { prop: 'classify', label: '试题分类', 'min-width': 150, align: 'center', 'show-overflow-tooltip': true },
      { prop: '单选题', label: '单选题', 'min-width': 80, align: 'center', 'show-overflow-tooltip': true },
      { prop: '多选题', label: '多选题', 'min-width': 80, align: 'center', 'show-overflow-tooltip': true },
      { prop: '判断题', label: '判断题', 'min-width': 80, align: 'center', 'show-overflow-tooltip': true },
      { prop: '填空题', label: '填空题', 'min-width': 80, align: 'center', 'show-overflow-tooltip': true },
      // { prop: 'shouldCount', label: '应交试卷', 'min-width': 80, align: 'center', 'show-overflow-tooltip': true },
      { prop: '简答题', label: '简答题', 'min-width': 80, align: 'center', 'show-overflow-tooltip': true },
      {
        prop: 'action',
        label: '操作',
        //  width: 350,
        width: 200,
        align: 'center',
        'show-overflow-tooltip': true
      }
    ]
  },
  mounted () {
    if (this.isMountedLoad) {
      this.pagingFindList()
    }
  },
  activated () {
    this.pagingFindList()
  },
  methods: {
    // 当用户单击“查看答案卷”按钮时调用的方法。
    getLastExamHistory (classifyId) {
      getLastExamHistoryId(classifyId).then(res => {
        if (res.data.length > 0) {
          this.$router.push({ path: '/assessment-evaluation/wrong-topic-consolidate/history-exam-priview/' + res.data[0].id, query: { preview: 1 } })
        } else {
          this.$message.error('未找到考试记录')
        }
      })
    },
    // 按钮调用的方法。
    toMistakeModeLinkAndRow (mode, row) {
      this.current_classify = row
      this.$router.push({ path: '/assessment-evaluation/wrong-topic-consolidate/mistake-again/' + this.current_classify.classifyId + '/' + mode })
    },
    // 当用户单击“巩固练习”按钮时调用的函数。
    toMistakeModeLink (mode) {
      this.$router.push({ path: '/assessment-evaluation/wrong-topic-consolidate/mistake-again/' + this.current_classify.classifyId + '/' + mode })
      this.mode_selector_dialog_show = false
      this.current_classify = null
    },
    // 当用户单击“巩固练习”按钮时调用的函数。
    toMistakeAgain (row) {
      this.current_classify = row
      this.mode_selector_dialog_show = true
      // this.$router.push({ path: '/assessment-evaluation/wrong-topic-consolidate/mistake-again/' + row.classifyId + '/' + 1 })
    },
    // 修改是否为匿名评卷
    formatTime (msTime) {
      const time = msTime / 1000
      let hour = Math.floor(time / 60 / 60)
      hour = hour.toString().padStart(2, '0')
      let minute = Math.floor(time / 60) % 60
      minute = minute.toString().padStart(2, '0')
      let second = Math.floor(time) % 60
      second = second.toString().padStart(2, '0')
      return `${hour}:${minute}:${second}`
    },
    // 当用户单击页码时调用的函数。
    pagingChange (event) {
      if ((typeof event.currentPage !== 'number') && (typeof event.pageSize !== 'number')) return

      this.page_info = { ...this.page_info, ...event }
      this.pagingFindList()
    },
    // 将 page_info 设置为默认值。
    initPageInfo () {
      this.page_info = { currentPage: 1, pageSize: this.page_info.pageSize, total: 0 }
    },
    // 当用户单击“查看答题纸”按钮时调用的函数。
    pagingFindList (e) {
      if (e instanceof PointerEvent) {
        this.initPageInfo()
      }
      this.paper_list_loading = true
      pagingMistakeListApi({ ...this.page_info, ...this.form }).then(res => {
        const { currentPage, pageSize, total, types } = res.data
        const tableData = res.data.data
        tableData.forEach((item) => {
          const itemTimes = item.times.split(',')
          const itemTimeArr = itemTimes.map(typeTimes => {
            return typeTimes.split(':')
          })

          types.forEach((type) => {
            const itemCount = itemTimeArr.find(arrItem => +arrItem[0] === type.id)
            if (itemCount) {
              item[type.name] = itemCount[1]
            } else {
              item[type.name] = 0
            }
          })
        })
        this.table_data = res.data.data
        // eslint-disable-next-line eqeqeq
        if (this.table_data.length === 0 && this.page_info.currentPage != 1) {
          this.initPageInfo()
          this.pagingFindList()
        }

        this.page_info = { currentPage, pageSize, total }
      }).finally(_ => {
        this.paper_list_loading = false
      })
    }

  },

  mixins: [
    /**
     * 数据上报
     */
    dataReportMixin('ERROR_CONSOLIDATION')
  ]
}
</script>

<style lang="scss" scoped>
.links{
  display: flex;
  width: 100%;
  justify-content: space-around;
  .link-item{
    display: flex;
    flex-direction: column;
    cursor: pointer;
    align-items: center;
    [class^="el-icon"]{
      font-size: 35px;
      color:$--color-primary;
      margin-bottom: 5px;
    }
    color:#666;
  }
}
::v-deep .form_layout {
  margin-top: 16px;
  .suf {
  line-height: 1 !important;
}
  .el-form-item:last-child {
    float: right;
  }
}

.exam-status {
  width: 60px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #ccc;
  border-radius: 20px;
}
</style>
