<template>
  <div>
    <el-card class="box-card">
      <el-table :data="tableData" stripe size="mini">
        <el-table-column prop="paperName" label="考试名称" min-width="150px"></el-table-column>
        <el-table-column label="考试时间" min-width="250px">
          <template v-slot:default="scope">
            {{scope.row.startTime | date-format}} ~ {{scope.row.endTime | date-format}}
          </template>
        </el-table-column>
        <el-table-column label="难度系数">
         <template slot-scope="scope">
          <el-rate
            v-model="scope.row.paperDifficulty"
            disabled
            text-color="#ff9900"/>
          </template>
        </el-table-column>
        <el-table-column label="考试时长(分钟)">
            <template v-slot:default="scope">{{scope.row.paperDuration/60 }}</template>
        </el-table-column>
        <el-table-column prop="totalNum" label="题量"></el-table-column>
        <el-table-column prop="totalScore" label="卷面总分"></el-table-column>
        <!-- <el-table-column prop="participateNum" label="及格分数"></el-table-column> -->
        <el-table-column label="考试分类" width="120px;">
          <template v-slot:default="scope">{{scope.row.langName }}</template>
        </el-table-column>

        <el-table-column label="操作" width="100px;">
          <template v-slot:default="scope">
            <el-button
              v-if="scope.row.testState == 0"
              size="mini"
              type="warning"
              disabledv
              round
            >暂未开始</el-button>
            <el-button v-if="scope.row.paperStatus == 0" size="mini" type="success" round @click="toStartExam(scope.row.paperId)">开始考试</el-button>
            <el-button v-if="scope.row.paperStatus == 2" size="mini" disabled type="info" round>考试结束</el-button>
            <el-button v-if="scope.row.paperStatus == 2" size="mini" disabled type="primary" round>答卷完毕</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="queryInfo.rows"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      ></el-pagination> -->
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //表格数据
      tableData: [],
      //总条数
      total: 0,
      //分页查询参数
      queryInfo: {
        page: 1, //当前页数
        rows: 10, //每页显示条数
        grade: [],
        fkTestGradeId: ""
      },
    };
  },
  //钩子函数，已加载完成
  mounted() {
    //加载表格数据
    this.getExams();
  },
  methods: {
    //每页显示多少条改变
    handleSizeChange(newRows) {
      this.queryInfo.rows = newRows;
      this.getTests();
    },
    //当前页码改变
    handleCurrentChange(newPage) {
      this.queryInfo.page = newPage;
      this.getTests();
    },
    //分页获取表格数据
    async getExams() {
      this.$http
        .get("/exam/getCurrentPaperList?paperStatus=0", {
        //   params: {
        //     page: this.queryInfo.page,
        //     rows: this.queryInfo.rows,
        //     fkTestGradeId: res2.data.data.fkUserQGradeId,
        //     userQId: res.data.data.userId
        //   }
        })
        .then(response => {
          const res = response.data;
          console.log(res)
          if (res.statu === 0) {
            this.tableData = res.data;
            this.total = res.data.length;
          }
        })
    },
    toStartExam(paperId){
        this.$confirm('确定开始考试吗?', '提示').then(action => {
          this.$router.push(`/exam/start/${paperId}`)
        }).catch();
    }
  }
};
</script>

<style  scoped>
.el-card {
  margin: 20px;
}
</style>
