<template>
  <h-view id="body-check">
    <transition name="trans">
      <div v-if="downNum" class="modal-show">
        <div class="modal-box">
          <div class="down">
            <div class="down-content">
              <span class="title">请牢记以下验证码</span>
              <p class="compute">
                此验证码将于
                <span>{{ time }}</span>秒后过期
                <br >用普通话朗读数字，视频时长
                <span>3~8</span>秒最佳
              </p>

            </div>
            <div class="number">
              <span v-for="(item,index) in codeList" :key="index">{{ item }}</span>
            </div>
            <h-button :disabled="lastTime!=0" class="button" @click.native="recordVdeo">记住了，开始录制<span v-if="lastTime!=0">({{ lastTime }}s)</span></h-button>
          </div>
          <div class="close" @click="downNum=false">X</div>
        </div>
      </div>
    </transition>
    <h-header :proportion="[5,1,1]" class="bar-custom">
      <div slot="left" class="h-header-btn">
        <img src="@/assets/userBind/arrow.png" @click="$routeGo()" >
        <span>活体检测</span>
      </div>
    </h-header>
    <h-content>
      <div class="top">
        <div class="top-box">
          <img src="@/assets/constractSigning/sketch.png" >
          <span>正面平视手机，保证光线充足</span>
          <span>请勿遮挡面部</span>
        </div>
      </div>
      <div class="bottom">
        <ul>
          <li>
            <span>1</span>
            <span>牢记验证码，点击开始录制</span>
            <p />
          </li>
          <li>
            <span>2</span>
            <span>开启前置摄像头，用普通话朗读数字</span>
            <p />
          </li>
          <li>
            <span>3</span>
            <span>完成录制，等待验证结果</span>
          </li>
        </ul>
      </div>
    </h-content>
    <bottom-tab class="footer-button">
      <tab-button class="approve" @click.native="getCode">下一步</tab-button>
    </bottom-tab>
  </h-view>
</template>
<script>
export default {
  data () {
    return {
      downNum: false,
      time: 60,
      lastTime: 3,
      code: '',
      file: '',
      sessionId: '',
      codeList: [],
    }
  },
  methods: {
    recordVdeo () { // 开始录制
      let vm = this
      vm.downNum = false // 模态框消失
      let onSuccess = function (mediaFiles) {
        // 遍历获取录制的文件（iOS 只支持一次录制一个视频）
      /*  for (let i = 0; i < mediaFiles.length; i++) {
          alert('录制成功！\n\n' + '文件名：' + mediaFiles[i].name + '\n' + '大小：' + mediaFiles[i].size + '\n\n' + 'localURL地址：' + mediaFiles[i].localURL + '\n\n' + 'fullPath地址：' + mediaFiles[i].fullPath)
        } */
        console.log('录制成功！\n\n' + '文件名：' + mediaFiles[0].name + '\n' + '大小：' + mediaFiles[0].size + '\n\n' + 'localURL地址：' + mediaFiles[0].localURL + '\n\n' + 'fullPath地址：' + mediaFiles[0].fullPath)
        vm.succesCall(mediaFiles[0].fullPath)
      }
      let onError = function (error) {
        hlsPopup.showLongcenter('录制失败，请重新录制')
      }
      hlsUtil.captureVideo(onSuccess, onError)
    },

    succesCall (fileUrl) { // 录制成功后进行检测
      let vm = this
      console.log('fileUrl ' + fileUrl)
      console.log('sessionId ' + vm.sessionId)
      let url = process.env.ocrPath + '/baidu/ocr/videoFaceliveness'
      let param = {
        fileUrl: fileUrl,
        sessionId: vm.sessionId,
      }
      vm.hlsPopup.showLoading('正在检测')
      var flag = false
      var loadInterval = setInterval(function () {
        vm.hlsPopup.showLoading('视频过大，请耐心等待')
        if (flag) {
          vm.hlsPopup.hideLoading()
          clearInterval(loadInterval)
        }
      }, 5000)
      hlsUtil.baiduOcrVideo(param, url, function (res) {
        flag = true
        vm.hlsPopup.hideLoading()
        console.log('##########res ' + JSON.stringify(res))
        if (res.result.result.thresholds.frr_1e - 2 < 0.9) {
          vm.hlsPopup.showLongCenter('检测失败，请重新尝试')
        } else {
          vm.hlsPopup.showLongCenter('检测成功')
        }
      })
    },
    getCode () { // 获取验证码
      // this.downNum = true
      this.computeTime()
      this.time = 60
      this.lastTime = 3
      let vm = this
      let url = process.env.ocrPath + '/baidu/ocr/videoSessioncode'
      let param = {}
      vm.hlsPopup.showLoading('请稍后')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.success) {
          vm.codeList = [...res.result.result.code]
          vm.sessionId = res.result.result.session_id
          vm.downNum = true
        }
      })
      /* let str = '098672'
       vm.codeList = [...str] */
    },
    computeTime () { // 倒计时
      let vm = this
      let timer = setInterval(() => {
        if (vm.time > 0) {
          vm.time--
        } else {
          clearInterval(timer)
        }
      }, 1000)
      let lastTime = setInterval(() => {
        if (vm.lastTime > 0) {
          vm.lastTime--
        } else {
          clearInterval(lastTime)
        }
      }, 1000)
    },
  },

}
</script>
<style lang="less" scoped>
#body-check {
  .trans-enter-active,
  .trans-leave-active {
    transition: opacity 0.5s;
  }
  .trans-enter,
  .trans-leave-active {
    opacity: 0;
  }
  .modal-show {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 900;
    background-color: rgba(56, 63, 69, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    .modal-box {
      width: 314px;
      display: flex;
      justify-content: center;
      flex-flow: wrap row;
    }
    .down {
      position: relative;
      width: 314px;
      height: 286px;
      background-size: 301px 24.7px;
      background-color: #fff;
      display: flex;
      justify-content: center;
      flex-flow: wrap row;
      .button{
          width:90%;
          height: 50px;
          background-color: #0073eb;
          color: #fff !important;
          border-radius: 4px;
      }
      .down-content {
        width: 290px;
        margin: 0 auto;
        margin-top: 30px;
        text-align: center;
        .title {
          font-size: 16px;
          color: #333;
        }
        .compute {
          margin-top: 16px;
          font-size: 14px;
          line-height: 20px;
          color: #666;
          span {
            color: red;
          }
        }
      }
             .number {
          width: 100%;
          display: flex;
          justify-content: center;
          span {
            width: 40px;
            height: 60px;
            font-size: 30px;
            font-weight: bold;
            line-height: 60px;
            color: #333;
            display: inline-block;
            border: 1px solid #e1e1e1;
            border-radius: 10px;
            text-align: center;
          }
        }
    }
    .close {
      border: 1px solid #fff;
      width: 40px;
      height: 40px;
      color: #fff;
      background-color: rgba(0, 0, 0, 0.3);
      margin-top: 20px;
      border-radius: 50%;
      text-align: center;
      line-height: 40px;
    }
  }
  .content{
    display: flex;
    flex-direction: column;
  }
  .top {
    height: 340px;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    .top-box {
      width: 60%;
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      img {
        width: 80%;
        height: 100%;
        margin-top: 10px;
      }
      span {
        font-size: 14px;
        color: #999;
        line-height: 25px;
        letter-spacing: 2px;
      }
    }
  }
  .bottom {
   flex: 1;
    background-color: #fff;
    box-shadow: 0 -4px 10px 0 #e8e8e8;
    display: flex;
    justify-content: center;
    ul {
      width: 80%;
      margin-top: 40px;
      li {
        height: 60px;
        p {
          height: 35px;
          border-left: 1px solid #0073eb;
          margin-left: 12px;
        }
        span:first-child {
          border-radius: 50%;
          border: 1px solid #0073eb;
          text-align: center;
          color: #0073eb;
          display: inline-block;
          width: 25px;
          height: 25px;
          line-height: 25px;
          font-size: 12px;
          margin-right: 10px;
          letter-spacing: 0;
        }
      }
    }
  }
  .approve {
    background: @headerColor;
    border-radius: 4px;
    color: #fff;
    font-family: PingFangSC-Semibold;
    font-size: 15px;
  }
}
</style>
