<template>
  <div class="block">
    <TableLayout  :column="column" :data="table_data" :pageInfo="pageInfo" :height="300"
        @current-change="(e) => pagingChange({ currentPage: e })" @size-change="(e) => pagingChange({ pageSize: e })">
<template v-slot:action="scope">
      <el-button type="text"  @click="lookPaper(scope.row)" >查看</el-button>
    </template>
      </TableLayout>
      <DialogLayout :visible="show" @onCancel="onCancel" width="900px" title="详情" @onConfirm="onCancel">
      <div class="chart-layout">
        <ExamDetailsScorePercent :exam="currentExam" />
      <ExamDetailsMistakesPercent :exam="currentExam" />
      <PaperDifficultyByHistoryPercent :exam="currentExam" />
      </div>

    </DialogLayout>
  </div>
</template>

<script>
import { TableLayout, DialogLayout } from '@/components/layout/index'
import { findStatisticDataApi } from '@/api/statistic'
import ExamDetailsScorePercent from '../score/ExamDetailsScorePercent.vue'
import ExamDetailsMistakesPercent from '../score/ExamDetailsMistakesPercent.vue'
import PaperDifficultyByHistoryPercent from './PaperDifficultyByHistoryPercent.vue'
export default {
  components: { TableLayout, DialogLayout, ExamDetailsScorePercent, ExamDetailsMistakesPercent, PaperDifficultyByHistoryPercent },
  data: _ => ({
    column: [
      // { label: '序号', type: 'index' },
      { prop: 'historyId', label: '序号', align: 'center', 'show-overflow-tooltip': true },
      { prop: 'title', label: '答卷名称', align: 'center', 'show-overflow-tooltip': true },
      { prop: 'paperType', label: '答卷类型', align: 'center', 'show-overflow-tooltip': true },
      { prop: 'classify', label: '答卷分类', align: 'center', 'show-overflow-tooltip': true },
      { prop: 'score', label: '试卷总分', align: 'center', 'show-overflow-tooltip': true },
      { prop: 'qCount', label: '试题总数', align: 'center', 'show-overflow-tooltip': true },
      { prop: 'examScore', label: '考试总分', width: 150, align: 'center', 'show-overflow-tooltip': true },
      { prop: 'isPass', label: '答卷成绩', width: 150, align: 'center', 'show-overflow-tooltip': true },
      { prop: 'action', label: '操作', minWidth: 100, align: 'center', 'show-overflow-tooltip': true }
    ],
    table_data: [],
    pageInfo: { currentPage: 1, pageSize: 5, total: 0, layout: 'total, prev, pager, next, jumper' },
    show: false,
    currentExam: null
  }),
  mounted () {
    this.findData()
  },
  methods: {
    onCancel () {
      this.show = false
    },
    lookPaper (row) {
      this.currentExam = row
      this.show = true
    },
    // 挂载页面时调用的函数。
    async findData () {
      const data = await findStatisticDataApi('paper-details-table', { ...this.pageInfo })
      this.table_data = data.data
      this.pageInfo.total = data.total
      this.pageInfo.currentPage = data.currentPage
      this.pageInfo.pageSize = data.pageSize
    },
    // 更改页面时调用的函数。
    pagingChange (event) {
      if ((typeof event.currentPage !== 'number') && (typeof event.pageSize !== 'number')) return

      this.pageInfo = { ...this.pageInfo, ...event }
      this.findData()
    }
  }
}
</script>
<style lang="scss">
.chart-layout{
  display: flex;
}
.gy-chart {
      margin-right: 20px;
      margin-bottom: 20px;
      width: 33%;
      min-width: 180px;
      height: 300px;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
      overflow: hidden;
      position: relative;

      &::before {
        content: attr(data-title);
        position: absolute;
        left: 12px;
        top: 12px;
        font-size: 15px;
        color: #3d3d3d;
        font-weight: bold;
      }
}
</style>
