<template>
  <div class="app-container">
    <mx-table :rows="dataList" :prop-defines="tableColumns">
      <template #report="{row}">
        <el-button type="text" icon="el-icon-paperclip" @click="handleReport(row)">
          查看报告
        </el-button>
      </template>
    </mx-table>
    <pagination v-show="total>queryParams.pageSize" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="loadTestHistory"/>

    <!--  报告  -->
    <el-drawer :visible.sync="reportVisible" :title="testTypeOptions.title+'报告'" size="60%" append-to-body>
      <test-report v-if="reportVisible" :category="category" :source="testResult"
                   @changed="$emit('changed')"></test-report>
    </el-drawer>
  </div>
</template>

<script>
import { getTestList, getTestMajorResult } from '@/api/webApi/test-major'
import config from '@/common/mx-config'
import TestReport from '@/views/elective/test/components/test-report'

export default {
  name: 'test-history',
  components: { TestReport },
  props: {
    category: {
      type: Number | String,
      default: ''
    },
    testType: {
      type: Number | String,
      default: ''
    }
  },
  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 20
      },
      total: 0,
      dataList: [],
      tableColumns: {
        beginTime: {
          label: '测评时间'
        },
        action: {
          label: '操作',
          slot: 'report'
        }
      },
      //
      reportVisible: false,
      testResult: {}
    }
  },
  computed: {
    testTypeOptions() {
      return config.roundSelectTestEntryOptions[this.category] || {}
    }
  },
  mounted() {
    this.loadTestHistory()
  },
  methods: {
    loadTestHistory() {
      getTestList({ ...this.queryParams, testType: this.testType }).then(res => {
        this.total = res['total']
        this.dataList = res['rows']
      })
    },
    handleReport(row) {
      getTestMajorResult({
        examineeId: row.examineeId,
        testType: this.testType
      }).then(res => {
        this.testResult = res.data || {}
        this.reportVisible = true
      })
    }
  }
}
</script>

<style scoped>

</style>
