<!-- 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: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:action="props">
          <el-button
            type="text"
             class="print-icon"
            :icon="
              props.row.isGradePaper == 1
                ? 'el-icon-refresh'
                : 'el-icon-finished'
            "
            @click="toGradePaper(props.row)"
            >{{ props.row.isGradePaper == 1 ? "重新" : "开始" }}判分
          </el-button>
          <el-button
            type="text"
            class="print-icon"
            icon="el-icon-download"
            v-if="props.row.isGradePaper == 1"
            @click="previewPaper(props.row)"
            >下载
          </el-button>
          <el-button
            type="text"
            icon="el-icon-printer"
            class="print-icon"
            v-if="props.row.isGradePaper == 1"
            @click="printPaper(props.row)"
            >打印
          </el-button>
        </template>
        <template v-slot:realname>
          <p>保密</p>
        </template>
        <template v-slot:myDuration="props">
          <p>{{ formatTime(props.row.myDuration) }}</p>
        </template>
        <template v-slot:isGradePaper="props">
          <p>{{ ["未判卷", "已判卷"][props.row.isGradePaper] }}</p>
        </template>
        <template v-slot:passScore="props">
          <p>{{ +props.row.score >= +props.row.passScore ? "是" : "否" }}</p>
        </template>
      </TableLayout>
      <DialogLayout
        title="预览"
        width="600px"
        :visible="preview_paper_dialog_show"
        @onCancel="preview_paper_dialog_show = false"
        :actionBarOption="{ confirmTxt: '打印' }"
        @onConfirm="printx"
      >
        <ExercisePerviewPaper
          :questions="preview_current_questions_list"
          :title="current_select_paper?.title"
          :mode="1"
          ref="printRef"
        ></ExercisePerviewPaper>
      </DialogLayout>
    </div>
  </div>
</template>

<script>
import { TableLayout, FormLayout, DialogLayout } from '@/components/layout'
import '@/views/assessment-evaluation/utils/gyStyle.scss'
import { pagingGradeDetailsApi } from '@/api/assessment-evaluation/humanEval.js'
import QueryInput from '@/components/widget/QueryInput.vue'
import ExercisePerviewPaper from '@/views/statistic/components/ExercisePerviewPaper.vue'
import { getOnlineExamResultApi } from '@/api/assessment-evaluation/onlineTest'
export default {
  components: {
    TableLayout,
    FormLayout,
    QueryInput,
    ExercisePerviewPaper,
    DialogLayout
  },

  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,
    examId: null,
    preview_paper_dialog_show: false,
    current_select_paper: null,
    preview_current_questions_list: []
  }),

  created () {
    this.formItems = [
      { prop: 'title' },
      { prop: 'btns', model: { class: 'gy-btns' } }
    ]
    this.column = [
      {
        prop: 'username',
        label: '账号',
        align: 'center',
        'show-overflow-tooltip': true
      },
      {
        prop: 'realname',
        label: '用户名',
        align: 'center',
        'show-overflow-tooltip': true
      },
      {
        prop: 'createTime',
        label: '开始时间',
        'min-width': 150,
        align: 'center',
        'show-overflow-tooltip': true
      },
      {
        prop: 'reportTime',
        label: '交卷时间',
        'min-width': 150,
        align: 'center',
        'show-overflow-tooltip': true
      },
      {
        prop: 'myDuration',
        label: '答题时长',
        'min-width': 80,
        align: 'center',
        'show-overflow-tooltip': true
      },
      {
        prop: 'score',
        label: '分数',
        'min-width': 80,
        align: 'center',
        'show-overflow-tooltip': true
      },
      // { prop: 'shouldCount', label: '应交试卷', 'min-width': 80, align: 'center', 'show-overflow-tooltip': true },
      {
        prop: 'passScore',
        label: '及格',
        'min-width': 80,
        align: 'center',
        'show-overflow-tooltip': true
      },
      {
        prop: 'isGradePaper',
        label: '判卷记录',
        'min-width': 80,
        align: 'center',
        'show-overflow-tooltip': true
      },
      {
        prop: 'action',
        label: '操作',
        //  width: 350,
        width: 180,
        align: 'center'
      }
    ]
  },
  activated () {
    this.examId = this.$route.params.examId
    this.pagingFindList()
  },
  methods: {
    // 当用户点击“下载”按钮时调用的方法。
    previewPaper (row) {
      this.paper_list_loading = true
      getOnlineExamResultApi(row.historyId)
        .then((res) => {
          this.current_select_paper = res.data.exam
          this.preview_current_questions_list = res.data.questions
          this.preview_paper_dialog_show = true
        })
        .finally((_) => {
          this.paper_list_loading = false
        })
    },
    // 当用户单击“打印”按钮时调用的方法。
    printx () {
      if (window.printElement) {
        window.printElement.remove()
      }
      window.printElement = document.createElement('iframe')
      window.printElement.style = 'display:none;'
      window.printElement.onload = () => {
        const printBody = window.printElement.contentWindow.document.body
        printBody.appendChild(document.head.cloneNode(1))
        printBody.style = '-webkit-print-color-adjust:exact;background:#fff;'
        printBody.appendChild(this.$refs.printRef.$el.cloneNode(1))
        window.printElement.contentWindow.print()
      }
      document.body.appendChild(window.printElement)
    },
    printPaper (row) {
      this.$router.push({
        path: '/print-paper/' + row.paperId,
        query: { examIdPaperId: row.historyId }
      })
    },
    // 当用户点击“开始判分”按钮时调用的方法。
    toGradePaper (row) {
      if (+row.isOver === 0) {
        this.$confirm(
          '本场考试还没有结束，学员可重新考试，是否要进行判卷？',
          '提示',
          { type: 'info' }
        )
          .then((res) => {
            this.$router.push({
              path:
              '/assessment-evaluation/human-evaluation/begin-eval/' +
              row.historyId,
              query: { preview: 3 }
            })
          })
          .catch((_) => {})
      } else {
        this.$router.push({
          path:
          '/assessment-evaluation/human-evaluation/begin-eval/' +
          row.historyId,
          query: { preview: 3 }
        })
      }
    },
    // 将毫秒数转换为“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 (!this.examId) return
      if (e instanceof PointerEvent) {
        this.initPageInfo()
      }
      this.paper_list_loading = true
      pagingGradeDetailsApi({
        ...this.page_info,
        ...this.form,
        id: this.examId
      })
        .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>
