<template>

  <div>

    <el-table :data="paperList"  border>
      <el-table-column label="考试标题" align="center" prop="title" :show-overflow-tooltip="true"/>
      <el-table-column label="用户时长（分钟）" align="center" prop="userTime" :show-overflow-tooltip="true"/>
      <el-table-column label="用户得分" align="center" prop="userScore" :show-overflow-tooltip="true"/>
      <el-table-column label="考试时间" align="center" prop="createdate" width="200">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createdate, '{y}-{m}-{d} {h}:{i}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="120" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="checkResult(scope.row)"
          >查看试卷</el-button>
        </template>
      </el-table-column>
    </el-table>

  </div>

</template>

<script>

import { listPaper } from '@/api/training/elearn/paper'

export default {

  name: 'UserPaperList',
  props: {
    examId: {
      type: String,
      default: ''
    },
    userId: {
      type: String,
      default: ''
    },
    staffId: {
      type: String,
      default: ''
    }
  },

  data() {
    return {
      value1: null,
      paperList: []
    }
  },

  watch: {

    // 检测查询变化
    examId: {
      handler() {
        this.fetchPaperList()
      },
      deep: true
    },

    // 检测查询变化
    userId: {
      handler() {
        this.fetchPaperList()
      },
      deep: true
    }
  },

  created() {
    this.fetchPaperList()
  },
  methods: {

    fetchPaperList() {
      const param = {userId:this.userId ,examId: this.examId,staffId: this.staffId }
      listPaper(param).then(response => {
        this.paperList = response.rows
      })
    },
    checkResult(row){
      this.$router.push({ name: 'ShowExam', params: { id: row.paperId }})
    }
  }
}
</script>
