<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>
          <div class="text">省地矿局阿斯科利队将阿斯利康大家阿斯科利队将阿斯科利队将阿斯科利大数据的卢卡斯教练卡升级阿斯科利队将阿斯科利队将阿斯科利队将阿斯科利大数据的省地矿局阿斯科利队将阿斯利康大家阿斯科利队将阿斯科利队将阿</div>
          <div class="text">省地矿局阿斯科利队将阿斯利康大家阿斯科利队将阿斯科利队将阿斯科利大数据的卢卡斯教练卡升级阿斯科利队将阿斯科利队将阿斯科利队将阿斯科利大数据的省地矿局阿斯科利队将阿斯利康大家阿斯科利队将阿斯科利队将阿</div>
          <div class="text">省地矿局阿斯科利队将阿斯利康大家阿斯科利队将阿斯科利队将阿斯科利大数据的卢卡斯教练卡升级阿斯科利队将阿斯科利队将阿斯科利队将阿斯科利大数据的省地矿局阿斯科利队将阿斯利康大家阿斯科利队将阿斯科利队将阿</div>
          <div class="text">省地矿局阿斯科利队将阿斯利康大家阿斯科利队将阿斯科利队将阿斯科利大数据的卢卡斯教练卡升级阿斯科利队将阿斯科利队将阿斯科利队将阿斯科利大数据的省地矿局阿斯科利队将阿斯利康大家阿斯科利队将阿斯科利队将阿</div>
          <div class="video">
            <video controls>
              <source src="https://zws-imgs-pub.ezijing.com/static/public/1d97380341880776f51913d9646fb561.mp4"
              type="video/mp4">
            </video>
          </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)
        }
      })
    }
  }
}
</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: 999999;
    .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: 20px 30px;
      background: #fff;
      overflow: scroll;
      .tit{
        text-align: center;
        font-size:30px;
        color:rgba(51,51,51,1);
        line-height: 100%;
        margin-bottom: 10px;
      }
      .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>
