<!-- eslint-disable vue/no-deprecated-v-bind-sync -->
<template>
  <div class="v-page classify_page">
    <div class="v-ctx" v-loading="paper_list_loading">
      <FormLayout
        ref="formLayoutRef"
        :items="formItems"
        :model="form"
        :rules="rules"
        label-width="70px"
        label-position="right"
        :inline="true"
      >
        <template v-slot:title>
          <QueryInput v-model="form.title" @query="pagingFindList"></QueryInput>
        </template>
        <template v-slot:year>
          <el-date-picker
            v-model="current_query_year"
            type="year"
            placeholder="选择年份"
            @change="pagingFindList"
          >
          </el-date-picker>
        </template>
        <template v-slot:btns> </template>
      </FormLayout>
      <TableLayout
        :column="column"
        :data="table_data"
        :pageInfo="page_info"
        @current-change="(e) => pagingChange({ currentPage: e })"
        @size-change="(e) => pagingChange({ pageSize: e })"
      >
        <template v-slot:status="props">
          <el-switch
            v-model="props.row.isAnonymous"
            :active-value="1"
            :inactive-value="0"
            style="margin-left: 10px"
            @change="changeItemIsAnonymous($event, props.row)"
          >
          </el-switch>
        </template>
        <template v-slot:gradeMode="props">
          <el-tag :type="props.row.gradeMode === 1 ? 'success' : 'info'">{{
            props.row.gradeMode === 1 ? "人工" : "机器"
          }}</el-tag>
        </template>
        <template v-slot:action="props">
          <el-button
            type="text"
            icon="i-j-rgpj-xiangqing"
            @click="toDetails(props.row)"
            >查看详情
          </el-button>
        </template>
      </TableLayout>
    </div>
  </div>
</template>

<script>
import { TableLayout, FormLayout } from '@/components/layout'
import '@/views/assessment-evaluation/utils/gyStyle.scss'
import {
  pagingGradePaperApi,
  patchIsAnonymousApi
} from '@/api/assessment-evaluation/humanEval.js'

import QueryInput from '@/components/widget/QueryInput.vue'
export default {
  components: {
    TableLayout,
    FormLayout,
    QueryInput
  },
  props: {
    column: {
      type: Array,
      default: () => [
        {
          prop: 'title',
          label: '考试名称',
          'min-width': 125,
          align: 'center',
          'show-overflow-tooltip': true
        },
        {
          prop: 'examStartTime',
          label: '开始时间',
          'min-width': 130,
          align: 'center',
          'show-overflow-tooltip': true
        },
        {
          prop: 'examEndTime',
          label: '结束时间',
          'min-width': 130,
          align: 'center',
          'show-overflow-tooltip': true
        },
        {
          prop: 'totalScore',
          label: '考试总分',
          'min-width': 80,
          align: 'center',
          'show-overflow-tooltip': true
        },
        {
          prop: 'passScore',
          label: '及格分',
          'min-width': 80,
          align: 'center',
          'show-overflow-tooltip': true
        },
        // { prop: 'shouldCount', label: '应交试卷', 'min-width': 80, align: 'center', 'show-overflow-tooltip': true },
        {
          prop: 'gradeMode',
          label: '判卷方式',
          'min-width': 80,
          align: 'center',
          'show-overflow-tooltip': true
        },
        {
          prop: 'gradedCount',
          label: '已评分人数',
          'min-width': 80,
          align: 'center',
          'show-overflow-tooltip': true
        },
        {
          prop: 'ungradedCount',
          label: '未评分人数',
          'min-width': 80,
          align: 'center',
          'show-overflow-tooltip': true
        },
        {
          prop: 'status',
          label: '匿名判卷',
          width: 100,
          align: 'center',
          'show-overflow-tooltip': true
        },
        {
          prop: 'action',
          label: '操作',
          //  width: 350,
          width: 120,
          align: 'center',
          'show-overflow-tooltip': true
        }
      ]
    }
  },

  data: () => ({
    table_data: [],
    // 存储当前页码和页数的变量。
    page_info: { currentPage: 1, pageSize: 10, total: 0 },
    // 试题分类树是否加载中
    paper_list_loading: false,
    // 用于存储表单数据的变量。
    form: { title: '', isPractive: 1 },
    // 不曾用过。
    is_show_info: false,
    // 什么都不做。
    exam_info_dialog_show: false,
    // 什么都不做。
    current_exam: null,
    // 存储当前年份的变量。
    current_query_year: null
  }),

  created () {
    this.formItems = [
      { prop: 'title' },
      { prop: 'year' },
      { prop: 'btns', model: { class: 'gy-btns' } }
    ]
    this.pagingFindList()
  },
  activated () {
    this.pagingFindList()
  },
  methods: {
    toDetails (row) {
      this.$router.push({
        path:
        '/assessment-evaluation/human-evaluation/eval-details/' + row.examId
      })
    },
    // 修改是否为匿名评卷
    changeItemIsAnonymous (isAnonymous, row) {
      const form = {
        id: row.examId,
        isAnonymous
      }
      patchIsAnonymousApi(form).then((res) => {
        if (res.code !== 0) {
          paperItem.isAnonymous = isAnonymous === 1 ? 0 : 1
          this.$message.error('修改失败')
        }
      })
    },
    // 它将以毫秒为单位的时间格式化为 `hh:mm:ss` 格式的字符串。
    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}`
    },
    // 页面更改时调用的方法。
    pagingChange (event) {
      if (
        typeof event.currentPage !== 'number' &&
        typeof event.pageSize !== 'number'
      ) { return }

      this.page_info = { ...this.page_info, ...event }
      this.pagingFindList()
    },
    // 将 page_info 设置为默认值。
    initPageInfo () {
      this.page_info = {
        currentPage: 1,
        pageSize: this.page_info.pageSize,
        total: 0
      }
    },
    // 加载页面时调用的方法。
    pagingFindList (e) {
      if (e instanceof PointerEvent) {
        this.initPageInfo()
      }
      if (this.current_query_year) {
        this.form.year = this.current_query_year.format('yyyy-MM-dd hh:mm:ss')
      } else {
        this.form.year = null
      }
      this.paper_list_loading = true
      pagingGradePaperApi({ ...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
        })
    }
  }
}
</script>
<style lang="scss">
.classify_page .form_layout {
  margin-top: 16px;
  .suf {
    line-height: 1 !important;
  }
  .el-form-item:last-child {
    float: right;
  }
}
</style>
<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>
