<template>
  <b-page @bPageLoaded="voiceCallback"></b-page>
  <count-down times=300 bottomOffset="10" rightOffset="10" fontSize="24" ref="child"></count-down>
    <div  class="back" style="height: 100%;" >

        <div class="top">
            <div class="topTitle">
              请确认您的身份
            </div>
            <div class="topImg">
                <div style="float: left;margin-left: 190px">
                   <img @click="legal"  src="../assets/images/self.png">
                </div>
                <div style="margin-left:40px;width: 1100px;" v-if="serviceId!='S100537'">
                  <img @click="entrust" :src="entrustUrl">
                </div>
            </div>
        </div>

        <div class="below" v-if="isEntrust&&entrustType==3">
            <div class="belowTitle">
                请选择身份验证的方式
            </div>
            <div class="belowImg">
               <div style="float: left;margin-left: 190px">
                   <span @click="goUserCard" class="belowLeft">法人手持身份证照片</span>
                   <img  @click="goUserCard" src="../assets/images/legalCard.png">
               </div>
               <div style="width: 1100px">
                   <span @click="goUserCopies" class="belowRight">法人+委托书原件或复印件</span>
                   <img  @click="goUserCopies" style="margin-left:40px"  src="../assets/images/copies.png">
               </div>
            </div>
        </div>

    </div>
</template>
<script>

import BPage from "@/components/registerVoice";

export default{
  components: {
    BPage,
  },

  data() {
    return {
        isEntrust:false,
        entrustUrl:require('../assets/images/entrustNot.png'),
        projectId: '',//事项ID
        serviceId: '',//机器人ID
        projectName:'',//事项名称
        entrustType:'',//办理类型：1:法人手持身份证照片, 2：法人+委托书原件或复印件,3：法人手持身份证照片及法人+委托书原件或复印件
        voiceParameter:{//语音播放参数
          cmd: "cmd",//语音指令，可参考属性voiceInstruct
          animation: 0,//虚拟任务动作编号可参考属性animationEnum
          videocontent: "请选择办理身份。",//语音内容
          callback: "PlayAudioCallback"//接口回调函数
        },
    }
  },

  created() {
      this.projectId = this.$route.query.projectId;
      this.serviceId = this.$route.query.serviceId
      this.projectName = this.$route.query.projectName;
      this.queryEntrustType();//获取委托人办理类型
      this.upStorageDate();
      if (robotType)this.openVoice();//语音播放

      //将方法绑定到window下面，提供给外部调用
      window.PlayAudioCallback = (res)=> this.PlayAudioCallback(res);//语音播放
  },

  methods:{
    queryEntrustType(){
        this.$axios.get(window.config.api + '/lilo/aiCase/getRobotCaseMethod', {
          params: {
            projectId : this.projectId
          }
        }).then(item => {
          if (item.data.success&&item.data.obj!=null) {
            if (item.data.obj.entrustType!=''&&item.data.obj.entrustType!=null){
                this.entrustType=item.data.obj.entrustType;
            }else{
              this.message("该事项委托人代办初始化失败,请稍后再试！");//提示框
            }
          }else{
            this.message("服务器异常,初始化失败！");//提示框
          }
        }).catch(err => {
          this.message("服务器异常,初始化失败！");//提示框
        })
    },

    legal(){
       this.$LocalStorage.SessionPut("userType",'0');//userType 0:法人类型
       this.$router.push({path:'/material'});//跳转材料页面
    },

    entrust(){
      this.updateTimes()//刷新时间
       this.$LocalStorage.SessionPut("userType",'1');//userType 1:委托人类型
       if (this.entrustType==1){
         this.$router.push({path:'/userCard'});//跳转手持身份证照片页面
       }else if (this.entrustType==2){
         this.$router.push({path:'/userCopies'});//跳转法人+委托书原件或复印件页面
       }else if (this.entrustType==3){
         this.isEntrust=true;
         this.entrustUrl=require('../assets/images/entrustYes.png');
       }
    },

    goUserCard(){
       this.$router.push({path:'/userCard'});//跳转手持身份证照片页面
    },

    goUserCopies(){
       this.$router.push({path:'/userCopies'});//跳转法人+委托书原件或复印件页面
    },

    upStorageDate(){
       this.$LocalStorage.SessionPut("projectId",this.projectId);
       this.$LocalStorage.SessionPut("serviceId",this.serviceId);
       this.$LocalStorage.SessionPut("projectName",this.projectName);
    },

    message(content){
      if (robotType) {
        robotsdk.showMessage({//提示框
          isOpen: true,//true 打开 false 关闭
          content: content,//消息内容
          isAutoClose: true//true 5秒自动关闭 false 用户点确认关闭
        });
      }
    },

    openVoice(){
      robotsdk.playAudio(this.voiceParameter);//虚拟人物播放语音及动作
    },

    PlayAudioCallback (res){
      console.info("语音播放回调结果============"+res);
    },

    updateTimes(){
      this.$refs.child.counter=300;
    },

    //语音回调（只处理退出）
    voiceCallback(res){
      if (res=="quit"){
        if(robotType){
          robotsdk.closeExternalApp({
            mode:0
          });
        }
      }
    }

  }
}
</script>
<style scoped>

.back{
  background-image: url('../assets/images/background.png');
  background-repeat:no-repeat;
  background-size:100% 100%;
  background-size: cover;
  overflow:auto;
}
.topTitle{
  font-size: 30px;
  color: #FFFFFF;
  text-align: left;
  padding-left: 100px;
}
.belowTitle{
  font-size: 30px;
  color: #FFFFFF;
  text-align: left;
  padding-left: 100px;
}
.top{
  padding-top:40px;
}
.topImg{
  padding-top: 30px;
}
.below{
  padding-top: 20px;
}
.belowImg{
  padding-top: 27px;
}
.btnNext{
  position: absolute;
  left: 37%;
  top: 86%;
}
.belowLeft{
  position: absolute;
  font-size: 30px;
  color: #ffffff;
  left: 260px;
  top: 590px;
}
.belowRight{
  position: absolute;
  font-size: 30px;
  color: #ffffff;
  left: 690px;
  top: 590px;
}
</style>