<template>
  <div class="mock-box" v-if="pageShow">
    <div class="top-tit">
      <div class="left">考试时间90分钟</div>
      <div class="right">总分100分</div>
    </div>
    <div class="intr">模拟考试介绍：</div>
    <div class="answer-type">
      <div class="tit">共分为四部分：</div>
      <div class="type">
        <p>单选题共1题</p>
        <p>单选题共1题</p>
        <p>单选题共1题</p>
        <p>单选题共1题</p>
      </div>
    </div>
    <div class="role-tit">选择角色：</div>
    <div class="describe">请认真选择角色，选定后,模拟考试题型会针对角色为您匹配最准确的题型！</div>
    <div class="sele-role">
      <div @click="changeActive(1)" :class="roleChange === 1 ? 'btn active' : 'btn'">
        <i></i>
        <div class="txt">管理人员</div>
      </div>
      <div @click="changeActive(2)" :class="roleChange === 2 ? 'btn active' : 'btn'">
        <i></i>
        <div class="txt">安全人员</div>
      </div>
    </div>
    <div class="start-exam">
      <div class="b" @click="setRole">开始考试</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>
</template>

<script>
import * as api from '@/api/courseExam.js'
export default {
  data() {
    return {
      roleChange: 1,
      isExamPop: false,
      pageShow: false
    }
  },
  mounted() {
    this.abilityExam()
  },
  methods: {
    changeActive(e) {
      this.roleChange = e
    },
    abilityExam() {
      const param = {
        type: 2
      }
      api.getExamStatus(param).then(res => {
        if (res.status === '0' || res.status === '3') {
          this.isExamPop = true
        }
        this.pageShow = true
      })
    },
    goAbilityExam(n) {
      this.$router.push({
        path: '/mock/answer',
        query: {
          type: 2,
          is_create: n,
          papersUrl: 'zy/v2/examination/examination-papers'
        }
      })
    },
    setRole() {
      api.setRole({ role: this.roleChange }).then(res => {
        console.log(res.code)
        if (res.code === 0) {
          this.goAbilityExam(1)
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.mock-box{
  padding: 0 0.4rem;
}
.top-tit{
  border-bottom: 0.01rem solid #EEE;
  display: flex;
  line-height: 1.1rem;
  div{
    font-weight: bold;
    font-size: .3rem;
    color: #222;
  }
  .right{
    margin-left: auto;
  }
}
.intr{
  line-height: 1.1rem;
  font-weight: bold;
  font-size: .3rem;
  color: #222;
}
.answer-type{
  padding-bottom: .2rem;
  border-bottom: 0.01rem solid #EEE;
  display: flex;
  .tit{
    font-size: .26rem;
    color: #222;
    line-height: 100%;
  }
  p{
    line-height: 100%;
    font-size: .26rem;
    color: #222;
    font-weight: bold;
    margin-bottom: .2rem;
  }
}
.role-tit{
  line-height: 100%;
  font-size: .3rem;
  color: #222;
  font-weight: bold;
  margin: .4rem 0 .18rem 0;
}
.describe{
  font-size: .26rem;
  color: #222;
}
.sele-role{
  width: 5.09rem;
  margin: .4rem auto 0 auto;
  display: flex;
  .btn:nth-child(2){
    margin-left: auto;
  }
  .btn{
    width: 1.76rem;
    height: .8rem;
    border: 0.01rem solid #3a7be6;
    display: flex;
    justify-content: center;
    border-radius: .1rem;
    align-items: center;
    .txt{
      font-size: .26rem;
      color: #222;
      font-weight: bold;
    }
    i{
      width: .28rem;
      height: .28rem;
      margin-right: .1rem;
      background: url('../../assets/images/radio2.png');
      background-size: 100% 100%;
    }
  }
  .btn.active{
    background:#3a7be6;
    .txt{
      color: #fff;
    }
    i{
      background: url('../../assets/images/radio.png');
      background-size: 100% 100%;
    }
  }
}
.start-exam{
  position: fixed;
  bottom: 0;
  left: 0;
  width:7.5rem;
  height:1rem;
  background:rgba(255,255,255,1);
  box-shadow:0 0 .06 0px rgba(0,0,0,0.05);
  .b{
    width:6.7rem;
    height:.7rem;
    background:rgba(43,124,233,1);
    border-radius:.12rem;
    margin: .15rem auto;
    text-align: center;
    line-height: .7rem;
    color: #fff;
    font-size: .3rem;
  }
}
.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:rgba(43,124,233,1);
        border-radius:.12rem;
        text-align: center;
        line-height: .7rem;
        color: #fff;
        font-size: .3rem;
      }
      .btn2{
        margin-left: auto;
      }
    }
  }
}
</style>
