<template>
  <div class="previewTestPaper">
    <div class="paper-header">
      <i class="el-icon-warning-outline" style="color: #FF9F45;"></i
      >提示：预览过程中只看效果，不保存数据
    </div>
    <div class="paper-content">
      <!-- {{testPapers}} -->
      <div class="content-box">
        <h1 class="title">{{ testPapers.name }}</h1>
        <el-divider></el-divider>
        <div class="footer">
          <div>考试说明</div>
          <div class="box-item">
            <span>考生名称：</span>
            <span>{{ $store.state.login.currentUser.username }}</span>
          </div>
          <div class="box-item">
            <span>考试时长：</span>
            <span>{{ testPapers.timeLength }}分钟</span>
          </div>
          <div class="box-item">
            <span>总分数：</span>
            <span>{{ testPapers.totalScore }}</span>
          </div>
          <div class="box-item">
            <span>及格分数：</span>
            <span>60</span>
          </div>
          <!-- <div class="box-item">
						<span>考试次数：</span>
						<span>可考无限次</span>
					</div> -->
          <div class="box-item">
            <span
              >如果考试中途异常中断，请退出并及时按同样步骤进入，继续考试</span
            >
          </div>
          <el-button style="margin-top: 40px;" type="primary" @click="startTest"
            >进入考试
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {TableMixin} from '@/mixins/tableMixin'

import paperMenu from '@/api/examination/paperMenu.js'

export default {
  mixins: [TableMixin],
  name: 'previewTestPaper',
  components: {},
  data() {
    return {
      testPapers: {}
    }
  },
  computed: {},
  methods: {
    loadData(page) {
      paperMenu.getTaskInfo(this.$route.params.id, res => {
        if (res) {
          this.testPapers = res
          this.testPapers.paperId = this.$route.params.id
        }
      })
    },
    startTest() {
      this.$router.push({
        name: 'formalTestPaper',
        params: this.testPapers
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.previewTestPaper {
  background-color: #ebeef5;

  .paper-header {
    color: #ff0000;
  }

  .paper-content {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .content-box {
      width: 500px;
      height: 600px;
      padding: 30px;
      box-sizing: border-box;
      border-radius: 30px;
      background-color: #fff;

      .title {
        font-size: 24px;
        text-align: center;
      }

      .footer {
        padding: 0 50px;
        text-align: center;

        .box-item {
          display: flex;
          padding: 10px;
          justify-content: space-between;
          border-bottom: 1px solid #f0f0f0;
        }
      }
    }
  }
}

::v-deep .warning-row {
  // background-color: #C1C2C5 !important;
}
</style>
