<template>
  <div class="mian">
    <div class="content">
      <div class="title">我的考试</div>
      <div class="card-box">
        <ul>
          <li v-for="(item, index) in examinaList" :key="index" @click="popShow">
            <img :src="item.img" alt="">
            <div class="txt">{{ item.text }}</div>
          </li>
        </ul>
      </div>
    </div>
    <div class="dialog" v-show="dialogVisible">
      <div class="click-pop" @click="popHide"></div>
      <div class="scroll" :style="{height:(popHeight-50)+'px'}">
        <div class="cont" :style="{height:(popHeight-130)+'px'}">
          <div class="tit">考试须知</div>
          <p>请各位考生认真阅读以下内容，明确考试规则，遵守考试纪律。预祝大家考试顺利！</p>
          <div class="passage">
            <div class="age-tit">一、考试规则</div>
            <p>1、登陆考试系统前,请确认监考摄像头按要求连接完毕。</p>
            <p>2、使用电脑Chrome浏览器，凭本人学习账号登陆在线学习系统，进入考试。</p>
            <p>3、考前15分钟，学员可通过“人脸识别”进行身份认证，请按系统提示填写本人真实信息；认证失败请选择“人工审核”。</p>
            <p>4、考试时长60分钟，考试开始15分钟后，迟到考生无法进入系统；考试开始30分钟内，不可提前交卷；考试时间结束仍未提交试卷的，系统将自动提交。</p>
            <p>5、本次考试为闭卷考试，考试过程中请保持监考摄像头和电脑摄像头同时开启，系统会启动实时监控、随机拍照、及防切屏功能，切换及刷新页面超过3次、页面超时无操作，系统将强制交卷。</p>
          </div>
          <div class="passage">
            <div class="age-tit">二、考试纪律</div>
            <p>1、考生应诚信考试并自觉服从监考人员管理，不得以任何理由妨碍监考员等考试工作人员履行职责，不得扰乱考试秩序。</p>
            <p>2、考场环境要求：网络稳定通畅的独立空间,考场内不得摆放考试教材及任何与考试相关的参考资料，不得有考生以外的任何人出入；监考摄像头连接完毕后，请将手机静音放置在镜头可见处。</p>
            <p>3、考试过程中不得查看手机、翻看资料；不得随意走动、离开考场；答题期间不得无故关闭、遮挡摄像头；出现上述行为，一律按无效试卷处理。</p>
            <p>4、考试过程中遇到任何系统问题，请面向监考摄像头举手示意，得到监考老师同意后，方可电话联系班主任解决。</p>
          </div>
        </div>
        <div class="btn-block">
          <div @click="goExam">我已阅读，开始考试</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import cAction from '@action'

export default {
  data () {
    return {
      popHeight: 0,
      dialogVisible: false,
      examinaList: [
        {
          img: 'https://zws-imgs-pub.ezijing.com/static/public/0ac7dcc2d5ec217a0683bfde6be94fb3.png',
          text: '模拟测试'
        },
        {
          img: 'https://zws-imgs-pub.ezijing.com/static/public/fefcecaa877e30d8d299f771280057a1.png',
          text: '高级财富管理师'
        }
      ]
    }
  },
  mounted () {
    this.setHeight()
  },
  methods: {
    setHeight () {
      const viewHeight = document.body.offsetHeight
      this.popHeight = viewHeight
    },
    popShow () {
      this.dialogVisible = true
    },
    popHide () {
      this.dialogVisible = false
      this.$router.go(0)
    },
    goExam () {
      const loading = this.$loading({ lock: true, text: '', spinner: '', background: 'rgba(255, 255, 255, 0.9)' })
      cAction.Other.examAutoLogin({
        user_id: 'A' + window.G.UserInfo.id,
        user_name: (window.G.UserInfo && window.G.UserInfo.student_info && window.G.UserInfo.student_info.personal_name) || '匿名',
        password: md5('111111'),
        department: '部门'
      }).then(res => {
        loading.close()
        if (res.msg === 'success') {
          window.open(res.url)
          this.dialogVisible = false
          this.$router.go(0)
        } else {
          this.$message.error(res.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.mian{
  padding: 40px;
  .content{
    background:rgba(255,255,255,1);
    border-radius:6px;
    padding: 0 40px;
    .title{
      color: #333333;
      font-size: 18px;
      line-height: 65px;
      border-bottom: 1px solid rgba(204,204,204,1);
    }
    .card-box{
      padding:40px 0;
      ul{
        margin: 0;
        padding: 0;
        overflow: hidden;
        li{
          float: left;
          width: 250px;
          height: 360px;
          margin-right: 40px;
          background:rgba(255,255,255,1);
          box-shadow:0px 2px 10px 0px rgba(0,0,0,0.2);
          border-radius:6px;
          overflow: hidden;
          list-style: none;
          margin-bottom: 40px;
          cursor: pointer;
          img{
            width:100%;
            height:295px;
            display: block;
          }
          .txt{
            line-height: 65px;
            color:rgba(41,148,234,1);
            font-size:18px;
            text-align: center;
          }
        }
      }
    }
  }
  .dialog{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background:rgba(0,0,0,0.3);
    z-index: 999;
    .scroll{
      position:absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%,-50%);
      transform: translate(-50%,-50%);
      -ms-transform: translate(-50%,-50%);
      -o-transform: translate(-50%,-50%);
      border-radius:6px;
      overflow: hidden;
      z-index: 9;
    }
    .click-pop{
      position:absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .cont{
      width: 600px;
      padding: 30px 30px;
      background: #fff;
      overflow: scroll;
      .tit{
        text-align: center;
        font-size:30px;
        color:rgba(51,51,51,1);
        line-height: 100%;
        margin-bottom: 10px;
      }
      p{
        text-indent: 2em;
        font-size:18px;
        color: #333333;
        line-height: 25px;
      }
      .passage{
        .age-tit{
          font-size:20px;
          font-weight: bold;
          line-height: 40px;
        }
      }
      .text{
        font-size:14px;
        color:rgba(102,102,102,1);
        line-height:25px;
      }
      .video{
        width:100%;
        height:315px;
        background:rgba(0,0,0,1);
        border-radius:7px;
        margin: 0 auto;
        overflow: hidden;
        margin-top: 15px;
        video{
          width: 100%;
          height: 100%;
        }
      }
    }
    .btn-block{
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 52px;
      background: #fff;
      box-shadow: 0px -5px 30px rgba(237,240,238,0.7);
      padding-top: 13px;
      div{
        width: 206px;
        height: 41px;
        line-height: 41px;
        font-size: 14px;
        color: #fff;
        text-align: center;
        border-radius: 5px;
        margin: 0 auto;
        background: rgba(56,148,231);
        cursor: pointer;
      }
    }
  }
}

</style>
