<template>
  <div class="block" v-loading="loading">
    <TableLayout
      height="300"
      :column="column"
      :data="table_data"
      :pageInfo="page_info"
      @current-change="(e) => pagingChange({ currentPage: e })"
      @size-change="(e) => pagingChange({ pageSize: e })"
    >
      <template v-slot:type="props">
        {{
          ["", "直播课后习题", "课程课后习题", "模拟训练习题", "错题巩固习题"][
            props.row.type
          ]
        }}
      </template>
      <template v-slot:action="props">
        <el-button
          type="text"
          icon="i-j-ksap-fuzhi"
          @click="lookPaper(props.row)"
          >查看</el-button
        >
      </template>
    </TableLayout>
    <DialogLayout
      title="答题详情"
      width="780px"
      :visible="details_dialog_show"
      @onConfirm="closeDialog"
      @onCancel="closeDialog"
      :actionBarOption="{ noCencel: true }"
    >
      <ExercisePerviewPaper :questions="questions" :title="current_title" />
    </DialogLayout>
  </div>
</template>

<script>
import { TableLayout, DialogLayout } from '@/components/layout/index'

import { findStatisticDataApi } from '@/api/statistic'
import ExercisePerviewPaper from '@/views/statistic/components/ExercisePerviewPaper.vue'
export default {
  components: { DialogLayout, TableLayout, ExercisePerviewPaper },
  props: {
    user: {}
  },
  watch: {
    user: {
      deep: true,
      immediate: true,
      handler (nv) {
        if (nv) {
          this.page_info = {
            currentPage: 1,
            pageSize: 5,
            total: 0,
            layout: 'total, prev, pager, next, jumper'
          }
          this.findData(nv.id)
        }
      }
    }
  },
  data: (_) => ({
    loading: false,
    column: [{ label: '序号', type: 'index' }, { prop: 'title', label: '练习名称', align: 'center', 'show-overflow-tooltip': true }, { prop: 'type', label: '练习类型', align: 'center', 'show-overflow-tooltip': true }, { prop: 'duration', label: '练习时长', align: 'center', 'show-overflow-tooltip': true }, { prop: 'percent', label: '正确率', align: 'center', 'show-overflow-tooltip': true }, { prop: 'action', label: '答题详情', width: 100, align: 'center', 'show-overflow-tooltip': true }],
    questions: [],
    table_data: [],
    current_title: '无',
    details_dialog_show: false,
    page_info: { currentPage: 1, pageSize: 5, total: 0, layout: 'total, prev, pager, next, jumper' }
  }),
  methods: {
    // 关闭弹窗并清除数据
    closeDialog () {
      this.details_dialog_show = false
      this.questions = []
      this.current_title = ''
    },
    // 当用户点击“查看”按钮时调用的函数。
    async lookPaper (row) {
      this.loading = true
      try {
        const data = await findStatisticDataApi(
          'exercise-details-questions-get-paper',
          { noCatch: true, ...row, userId: this.user.id }
        )
        this.current_title = data.title
        this.questions = data.questions
        this.details_dialog_show = true
        this.loading = false
      } catch (error) {
        this.$message.error('数据加载失败')
        this.loading = false
      }

      // this.$router.push({ path: '/assessment-evaluation/human-evaluation/begin-eval/' + row.historyId, query: { preview: 1 } })
    },
    // 挂载页面时调用的函数。
    async findData (userId) {
      this.loading = true
      const data = await findStatisticDataApi('exercise-details-table', {
        ...this.page_info,
        userId
      })
      this.table_data = data.data
      this.page_info.total = data.total
      this.page_info.currentPage = data.currentPage
      this.page_info.pageSize = data.pageSize
      this.page_info.layout = 'total, prev, pager, next, jumper'
      this.loading = false
    },
    // 更改页面时调用的函数。
    pagingChange (event) {
      if (
        typeof event.currentPage !== 'number' &&
        typeof event.pageSize !== 'number'
      ) { return }

      this.page_info = { ...this.page_info, ...event }
      this.findData(this.user?.id)
    }
  }
}
</script>

<style>
</style>
