<template>
  <div class="app-container">
    <el-row :gutter="24">

      <el-col :span="24" style="margin-bottom: 20px">

        <el-alert
          title="点击`开始考试`后将自动进入考试，请诚信考试！"
          type="error"
          style="margin-bottom: 10px"
        />

        <el-card class="pre-exam">

          <div><strong>考试名称：</strong>{{ detailData.title }}</div>
          <div><strong>考试时长：</strong>{{ detailData.totalTime }}分钟</div>
          <div><strong>试卷总分：</strong>{{ detailData.totalScore }}分</div>
          <div><strong>及格分数：</strong>{{ detailData.qualifyScore }}分</div>
          <div><strong>考试描述：</strong>{{ detailData.content }}</div>

        </el-card>

      </el-col>

      <el-col :span="24">

        <el-button :loading="loading" type="primary" icon="el-icon-caret-right" @click="handleCreate">
          开始考试
        </el-button>

        <el-button @click="handleBack">
          返回
        </el-button>

      </el-col>

    </el-row>
  </div>
</template>

<script>
import { listExam, getExam, delExam, addExam, updateExam, exportExam, importTemplate} from "@/api/training/elearn/exam";
import { createPaper} from "@/api/training/elearn/paper";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "Exam",
  components: { Treeselect },
  // components: { Editor },
  data() {
    return {
      detailData: {},
      loading: false,
      postForm: {
        examId: '',
      },
    };
  },
  watch: {

  },
  created() {
    this.postForm.examId = this.$route.params.examId
    getExam(this.$route.params.examId).then(response => {
      this.detailData = response.data;
    });
  },
  methods: {

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const examId = row.examId || this.ids
      getExam(examId).then(response => {
        this.form = response.data;
        this.repoList = this.form.repoList
        this.open = true;
        this.title = "修改考试";
      });
    },
    handleCreate() {
      const that = this
      this.loading = true

      createPaper(this.postForm).then(response => {
        console.log(response)

        if (response.code === 200) {
          setTimeout(function() {
            this.loading = false
            that.dialogVisible = false
            that.$router.push({ name: 'StartExam', params: { paperId: response.data.paperId }})
          }, 1000)
        }
      }).catch(() => {
        this.loading = false
      })
    },
    handleBack() {
      this.$router.push({ name: 'paper' })
    }
  }
};
</script>
<style scoped>

.pre-exam div {

  line-height: 42px;
  color: #555555;
}

</style>
