<template>
  <div class="app-container">
    <el-card shadow="always">
      <!-- 表单 -->
      <el-form :model="queryParams" ref="queryForm" size="small" label-width="120px">
        <el-form-item label="培训主题名称:" prop="trainingName">
          <span>{{ queryParams.trainingName }}</span>
        </el-form-item>
        <el-form-item label="培训内容:" prop="content">
          <span>{{ queryParams.content }}</span>
        </el-form-item>
        <el-form-item label="培训地点:" prop="trainingPlace">
          <span>{{ queryParams.trainingPlace }}</span>
        </el-form-item>
        <el-form-item label="培训级别:" prop="trainingLevel">
          <span>{{ queryParams.trainingLevel }}</span>
        </el-form-item>
        <el-form-item label="培训日期:" prop="trainingDate">
          <span>{{ queryParams.trainingDate }}</span>
        </el-form-item>
        <el-form-item label="培训时长:" prop="trainingDuration">
          <span>{{ queryParams.trainingDuration }}分钟</span>
        </el-form-item>
        <el-form-item label="主讲人:" prop="lecturer">
          <span>{{ queryParams.lecturer }}</span>
        </el-form-item>
        <el-form-item label="培训人数:" prop="trainNum">
          <span>{{ queryParams.trainNum || 0 }}人</span>
        </el-form-item>

        <el-form-item label="考试信息:">
          <el-card :style="{ marginTop: '20px' }">
            <!-- 考试信息 -->
            <div>
              <el-table :data="examTableData" highlight-current-row style="width: 100%">
                <el-table-column type="index" width="55" label="序号" align="center" />
                <el-table-column prop="examPaperName" label="考试名称" align="center" />
                <el-table-column prop="questionNum" label="试题数" align="center" />
                <el-table-column prop="score" label="得分" align="center">
                  <template slot-scope="scope">
                    <span v-if="scope.row.score >= 0">{{ scope.row.score }}分</span>
                    <span v-else>-</span>
                  </template>
                </el-table-column>
                <el-table-column prop="isPass" label="是否及格" align="center" />
                <el-table-column label="操作" align="center">
                  <template slot-scope="scope">
                    <el-button v-if="scope.row.isPass == '是'" type="text" size="mini" @click="handleDetail(scope.row)">
                      查看
                    </el-button>
                    <el-button v-else type="text" size="mini" @click="openExam(scope.row)">开始考试</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-card>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 考试弹窗 -->
    <BeforeExamDialog ref="beforeExamDialog" />
  </div>
</template>

<script>
import { webTrainingDetail } from '@/api/educTrainLearn'
import BeforeExamDialog from '@/views/educTrainLearn/components/BeforeExamDialog'

export default {
  components: { BeforeExamDialog },
  data() {
    return {
      userId: this.$store.state.user.id, // 用户id
      trainId: '', //任务id-编辑时传入
      row: {}, // 表格行数据
      queryParams: {},
      examTableData: [
        // {
        //   examPaperName: '考试名称',
        //   examTemplateName: '试卷名称',
        //   questionNum: '试题数',
        //   scope: '得分',
        //   isPass: '是否及格',
        // },
      ],
    }
  },
  created() {
    // this.trainId = this.$route.query.trainId || ''
    console.log('🚀 ~ query', this.$route.query)
    this.row = { ...this.$route.query }
    this.getTrainingTaskDetail()
  },
  methods: {
    async getTrainingTaskDetail() {
      try {
        const params = { id: this.row.id, userId: this.userId }
        const res = await webTrainingDetail(params)
        console.log('🚀 ~ getTrainingTaskDetail ~ res:', res)
        this.queryParams = res.data.data
        this.examTableData = res.data.data.examPaperList
      } catch (error) {
        console.error('🚀 ~ getTrainingTaskDetail ~ error:', error)
      }
    },
    openExam(row) {
      console.log('🚀 ~ openExam ~ row:', this.queryParams)
      const timeArr = this.queryParams.trainingDate.split(' ~ ')
      const startTime = new Date(timeArr[0]).getTime()
      const endTime = new Date(timeArr[1]).getTime()
      const nowTime = new Date().getTime()
      if (nowTime < startTime || nowTime > endTime) {
        this.$message.error('不在考试时间范围内')
        return
      }
      if (!this.queryParams.signTime) {
        this.$message.error('请先签到后再开始考试')
        return
      }
      row.isStudyTask = false
      row.fileName = row.examPaperName
      row.userId = this.userId
      row.type = 2
      row.isTrainTask = true
      console.log('🚀 ~ openExam ~ row:', row)
      this.$refs.beforeExamDialog.openDialog(row)
    },
    handleDetail(row) {
      this.$router.push({
        path: '/educTrainLearn/examTask/examDetails',
        query: {
          examPaperId: row.examPaperId,
          userId: this.userId,
          isStudyTask: true,
          type: 2,
        },
      })
    },
  },
}
</script>

<style lang="scss" scoped></style>
