<template>
  <div>
    <div class="tab1">
      <!-- <div class="title">能力自测 测试说明</div> -->
      <img src="../../assets/images/tab1bg.png" alt="">
      <p class="ti">考试时间20分钟</p>
      <p class="tx">考试题目共22题，分四部分</p>
      <p class="tx">单选题共8题</p>
      <p class="tx">多选题共8题</p>
      <p class="tx">判断题共5题</p>
      <p class="tx">案例题共1题</p>
      <p class="ti2">了解自己知识掌握情况</p>
      <p class="ti2">成绩报告准确分析定位</p>
      <div class="comp">
        <div class="btn" @click="abilityExam">开始测试</div>
      </div>
    </div>
    <div class="exam_submit" v-if="isExamPop">
      <div class="pop">
        <div class="tit">考前摸底</div>
        <div class="txt">您上次未做完试题</div>
        <div class="btn_box">
          <div class="btn" @click="goAbilityExam(1)">重新答题</div>
          <div class="btn btn2" @click="goAbilityExam(0)">继续答题</div>
        </div>
      </div>
    </div>
    <div class="exam_submit" v-if="isExamPopTo">
      <div class="pop">
        <div class="tit">考前摸底</div>
        <div class="txt">考试还未结束确定退出考试？</div>
        <div class="btn_box">
          <div class="btn" @click="isExamPopTo = false">退出考试</div>
          <div class="btn btn2" @click="goAbilityExam(0)">继续考试</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as api from '@/api/courseExam.js'
export default {
  metaInfo: {
    title: '考前摸底'
  },
  data() {
    return {
      isExamPop: false,
      isExamPopTo: false
    }
  },
  mounted() {
    if (window.localStorage.isExamEnd === 'true' || window.localStorage.isExamEnd === true) {
      this.init()
    }
  },
  methods: {
    async abilityExam() {
      const isLogin = await this.$store.dispatch('checkLogin')
      if (!isLogin) {
        this.goAbilityExam(1)
        return false
      }
      const param = {
        type: 1
      }
      api.getExamStatus(param).then(res => {
        if (parseInt(res.status) === 0 || parseInt(res.status) === 3) {
          this.isExamPop = true
        } else {
          this.goAbilityExam(1)
        }
      })
    },
    goAbilityExam(n) {
      window.localStorage.isExamEnd = true
      window.localStorage.examTab = 0
      this.$router.push({
        path: '/exam/answer',
        query: {
          type: 1,
          is_create: n,
          papersUrl: 'zy/v2/examination/examination-papers'
        }
      })
    },
    async init() {
      const param = {
        type: 1
      }
      const isLogin = await this.$store.dispatch('checkLogin')
      if (isLogin) {
        api.getExamStatus(param).then(res => {
          if (parseInt(res.status) === 0 || parseInt(res.status) === 3) {
            this.isExamPopTo = true
          }
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.tab1{
  // padding-top: .2rem;
  padding: .8rem .4rem 1rem .4rem;
  .txt{
    font-size: .26rem;
    color: #222;
    line-height: .26ren;
  }
  .comp{
    position: fixed;
    bottom: .15rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .btn{
    width:6.7rem;
    height:.8rem;
    background:#C62245;
    border-radius:.12rem;
    text-align: center;
    line-height: .8rem;
    color: #fff;
    font-size: .3rem;
  }
  .title{
    font-size:.4rem;
    font-weight:bold;
    color:rgba(255,103,103,1);
    line-height: 100%;
    padding-top: .2rem;
    text-align: center;
  }
  img{
    width: 5.01rem;
    height: 3.98rem;
    display: block;
    margin: 0.2rem auto 0 auto;
  }
  p{
    line-height: 100%;
    font-size: .26rem;
    color: #222;
    text-align: center;
  }
  .tx{
    margin-top: .2rem;
  }
  .ti{
    font-size: .3rem;
    margin: .4rem 0 .2rem 0;
    font-weight: bold;
  }
  .ti2{
    font-size: .3rem;
    font-weight: bold;
    margin-top: .4rem;
  }
}
.exam_submit{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  .pop{
    width: 5.9rem;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    background:rgba(255,255,255,1);
    border-radius:.12rem;
    padding: 0.4rem 0;
    .tit{
      font-weight:bold;
      color:rgba(34,34,34,1);
      font-size:.3rem;
      text-align: center;
      line-height: 100%;
    }
    .txt{
      color:rgba(34,34,34,1);
      font-size:.3rem;
      text-align: center;
      line-height: 100%;
      margin-top: .8rem;
    }
    .btn_box{
      padding:0 0.2rem;
      display: flex;
      margin-top: .8rem;
      .btn{
        width:2.6rem;
        height:.7rem;
        background:#C62245;
        border-radius:.12rem;
        text-align: center;
        line-height: .7rem;
        color: #fff;
        font-size: .3rem;
      }
      .btn2{
        margin-left: auto;
      }
    }
  }
}
</style>
