<template>
  <TableLayout
    :column="column"
    :data="table_data"
    :pageInfo="page_info"
    @current-change="(e) => pagingChange({ currentPage: e })"
    @size-change="(e) => pagingChange({ pageSize: e })"
  >
    <template v-slot:examStartTime="props">
      <div>
        <p>开始时间：{{ props.row.examStartTime }}</p>
        <p>结束时间：{{ props.row.examEndTime }}</p>
      </div>
    </template>
    <template v-slot:passPercent="props">
      <p>
        {{ Math.round((props.row.passPercent * props.row.totalScore) / 100) }}
      </p>
    </template>
    <template v-slot:myDuration="props">
      <p>{{ formatTime(props.row.myDuration) }}</p>
    </template>
    <template v-slot:status="props">
      <div
        :style="{
          'background-color':
            props.row.examTimes - props.row.myTimes <= 0
              ? '#999999'
              : ['#10a6b4', '#01c883', '#999999'][props.row.status],
        }"
        class="exam-status"
      >
        <span v-if="props.row.examTimes - props.row.myTimes <= 0">
          已结束
        </span>
        <span v-else>
          {{ ["待开考", "已开始", "已结束"][props.row.status] }}
        </span>
      </div>
    </template>
    <template v-slot:action="props">
      <!-- <el-button type="text" icon="el-icon-edit">{{ props.row.type }}</el-button> -->
      <el-button
        type="text"
        icon="i-j-fbks-yulan"
        @click="toPrint(props.row)"
        v-if="
          props.row.status == 2 || props.row.examTimes - props.row.myTimes <= 0
        "
        >打印
      </el-button>
    </template>
  </TableLayout>
</template>

<script>
import {
  pagingOnlineExamListApi,
  getLastedHistoryApi
} from '@/api/assessment-evaluation/onlineTest'
import { TableLayout } from '@/components/layout'
export default {
  components: { TableLayout },
  data () {
    return {
      page_info: { currentPage: 1, pageSize: 10, total: 0 },
      column: []
    }
  },
  activated () {
    this.pagingFindList()
  },
  created () {
    this.pagingFindList()
    this.column = [
      {
        prop: 'title',
        label: '考试名称',
        'min-width': 130,
        align: 'center',
        'show-overflow-tooltip': true
      },
      {
        prop: 'classify',
        label: '考试分类',
        'min-width': 80,
        align: 'center',
        'show-overflow-tooltip': true
      },
      {
        prop: 'totalScore',
        label: '总分',
        'min-width': 60,
        align: 'center',
        'show-overflow-tooltip': true
      },
      {
        prop: 'passPercent',
        label: '及格分',
        'min-width': 60,
        align: 'center',
        'show-overflow-tooltip': true
      },
      {
        prop: 'myScore',
        label: '成绩',
        'min-width': 50,
        align: 'center',
        'show-overflow-tooltip': true
      },
      {
        prop: 'myDuration',
        label: '考试用时',
        'min-width': 80,
        align: 'center',
        'show-overflow-tooltip': true
      },
      {
        prop: 'mistakes',
        label: '错题',
        'min-width': 50,
        align: 'center',
        'show-overflow-tooltip': true
      },
      {
        prop: 'examStartTime',
        label: '考试时间',
        'min-width': 220,
        align: 'center',
        'show-overflow-tooltip': true
      },
      {
        prop: 'status',
        label: '状态',
        width: 80,
        align: 'center',
        'show-overflow-tooltip': true
      },
      {
        prop: 'action',
        label: '操作',
        //  width: 350,
        width: 200,
        align: 'center'
      }
    ]
  },
  methods: {
    pagingFindList (e) {
      if (e instanceof PointerEvent) {
        this.initPageInfo()
      }
      this.paper_list_loading = true
      pagingOnlineExamListApi({ ...this.page_info, ...this.form })
        .then((res) => {
          const { currentPage, pageSize, total } = res.data
          this.table_data = res.data.data
          // eslint-disable-next-line eqeqeq
          if (this.table_data.length === 0 && this.page_info.currentPage != 1) {
            this.initPageInfo()
            this.pagingFindList()
          }
          this.page_info = { currentPage, pageSize, total }
        })
        .finally((_) => {
          this.paper_list_loading = false
        })
    },
    pagingChange (event) {
      if (
        typeof event.currentPage !== 'number' &&
        typeof event.pageSize !== 'number'
      ) {
        return
      }

      this.page_info = { ...this.page_info, ...event }
      this.pagingFindList()
    },
    toExamHandler (type = 2, row) {
      if (type === 2) {
        this.is_show_info = true
      } else if (type === 1) {
        this.is_show_info = false
      }
      this.current_exam = row
      this.exam_info_dialog_show = true
    },
    /*
      初始化分页数据
    */
    initPageInfo () {
      this.page_info = {
        currentPage: 1,
        pageSize: this.page_info.pageSize,
        total: 0
      }
    },
    formatTime (msTime) {
      const time = msTime / 1000
      let hour = Math.floor(time / 60 / 60)
      hour = hour.toString().padStart(2, '0')
      let minute = Math.floor(time / 60) % 60
      minute = minute.toString().padStart(2, '0')
      let second = Math.floor(time) % 60
      second = second.toString().padStart(2, '0')
      return `${hour}:${minute}:${second}`
    },
    /*
      获取最后一次考试的考试记录
    */
    lookLastExam (row) {
      this.paper_list_loading = true
      getLastedHistoryApi(row.id)
        .then((res) => {
          if (res.data == null) {
            return this.$message.error('该场考试没有查询到您的考试记录')
          }
          this.$router.push({
            path:
              '/assessment-evaluation/online-test/begin-online-exam/' +
              res.data.id,
            query: { preview: 1 }
          })
        })
        .finally((_) => {
          this.paper_list_loading = false
        })
    },
    toPrint (row) {
      console.log(row)
    }
  }
}
</script>

<style lang="scss" scoped>
.exam-status {
  width: 60px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: #ccc;
  border-radius: 20px;
}
</style>
