<template>
  <div class="self-container" >
    <iframe v-show="!show" width="98%" id="iframe" height="96%" :src="pageUrl"></iframe>
    <div v-show="openCount">
      <count-down times=36000 bottomOffset="0" rightOffset="10" fontSize="16" ref="child"></count-down>
    </div>
    <div v-show="show" style="width: 100%; height: 100%;">
      <div class="gif" :style="{top: position + '%' }" v-show="showTip">
        <img :src="imgSrc" style="border-radius: 35px;">
      </div>
      <div class="print" v-show="showTip">
        {{ tips }}
      </div>
    </div>
  </div>
</template>

<script>
import { layer } from "@layui/layer-vue";
import websocket from '../assets/js/websocket';
import waitGit from '../assets/images/wait.gif';
import printGit from '../assets/images/print.gif';
import icoOK from '../assets/images/ico/ico_ok.png';
var _this;
export default {
  data() {
	  return {
      pageUrl: '',
      batchId: '',
      show: false,
      windowName: '',
      tips: '',
      showTip: false,
      imgSrc: '',
      position: 0,
      openCount: false,
      callbackMethod: '' //打印页面回调方法
    }
	},
  created() {
    var caseData = this.$LocalStorage.SessionGet("caseData");
    this.batchId = caseData.batchId;
    this.pageUrl = caseData.pageUrl;
    this.init(caseData);
  },
  mounted () {
    // 将Vue方法传到全局对象window中
    window.receiveMsg = this.receiveMsg;
    window.printReport = this.printReport;
    window.printSuccess = this.printSuccess;
    window.printError = this.printError;
    window.playAudio = this.playAudio;
    window.printCallback = this.printCallback;
    window.IDCardCallback = this.IDCardCallback;
    _this = this;
  },
	methods:{
		init(caseData) {
      this.$nextTick(() => {
        //获取iframe元素
        const iframe = document.getElementById("iframe");
        iframe.onload = function (e) {
          //推送数据到表单页面
          iframe.contentWindow.postMessage({
            action: "init",
            result: caseData
          }, "*");
        }
      });
		},
    //接收websocket消息，rpa回调
    receiveMsg(obj){
      layer.closeAll('loading');
      var success = eval(obj.success);
      if(success){
        this.openCount = true;
        this.$refs.child.counter= 300;
        this.showTip = true;
        var rpa =  obj.rpaCallBackData;
        if(rpa != null){
          this.tips = '请稍等，正在为您远程打印证照！';
          this.imgSrc = printGit;
          this.position = 20;
          var base64 = rpa.printData;
          var remotePrintName = rpa.remotePrintName;
          this.windowName = rpa.windowName;
          if(robotType){
            robotsdk.printFile({
              filetype: 'doc',
              base64: base64,
              remoteprintname: remotePrintName,
              replyvoice: '请稍等，正在为您远程打印证照！',
              callback: "printReport"
            });
          }
        } else {
          this.tips = '后台已办理完成，请继续后续流程！';
          this.imgSrc = icoOK;
          this.position = 30;
          if(robotType){
            robotsdk.playAudio({
              cmd: 'playAudio',
              animation: 0,
              videocontent: '后台办理完成，请继续后续流程',
              callback: "playAudio"
            });
          }
        }
      } else {
        this.$router.push({ path: '/errorPage'});
      }
    },
    printReport(obj){
      if (obj) {
        this.tips = '您的证照已打印，请到'+ this.windowName + '领取!';
        this.imgSrc = icoOK;
        robotsdk.playAudio({
          cmd: 'playAudio',
          animation: 0,
          videocontent: '您的证照已打印，请到'+ this.windowName + '领取!',
          callback: "printSuccess"
        });
      } else {
        robotsdk.playAudio({
          cmd: 'playAudio',
          animation: 0,
          videocontent: '暂不能为您打印证照!给您带来不便,请谅解!',
          callback: "printError"
        });
      }
    },
    //打印证照成功，跳转资料袋装袋页面
    printSuccess(){
      this.$router.push({ path: '/information'});
    },
    //打印证照失败，跳转错误提示页面
    printError(){
      this.$router.push({ path: '/errorPage'});
    },
    //rpa完成
    playAudio(){
      this.$router.push({ path: '/information'});
    },
    printCallback(bool){
      //获取iframe元素
      const iframe = document.getElementById("iframe");
      //推送数据到表单页面
      iframe.contentWindow.postMessage({
        action: "printCallback",
        result: {
          'bool': bool,
          'callbackMethod': this.callbackMethod
        }
      }, "*");
    },
    IDCardCallback(json){
      //获取iframe元素
      const iframe = document.getElementById("iframe");
      //推送数据到表单页面
      iframe.contentWindow.postMessage({
        action: "IDCardCallback",
        result: {
          'json': json
        }
      }, "*");
    }
  }
}

//接收表单页面按钮点击事件(rpa响应结果)
/*{
  "success": 1,
  "msg": "",
  "waittime": 1
}
success：0是成功，1加入队列（抓取上一次流程时间，乘以目前排队条数），2失败
msg：执行情况说明，如success为1时，可以返回msg为加入队列成功；如success为0时，可以返回msg执行失败原因
waittime：预估等待时长，单位秒；当success为0或2时，可以没有waittime或waittime为0；当success为1时，计算RPA流程处理需要等待的预估时间*/
window.addEventListener("message", message => {
  var data = message.data;
  if('next' == data.action){
    var result = data.result;
    var success = result.success;
    if('0' == success || '1' == success){
      //转圈圈等待
      websocket.openClick(_this.batchId);
      //layer.load();
      _this.openCount = true;
      _this.$refs.child.counter= result.waittime + 30; //修改子组件data
      _this.show = true;
      _this.showTip = true;
      _this.tips = "后台正在为您办理中，请稍等!";
      _this.imgSrc = waitGit;
      _this.position = 30;
      if(robotType){
        robotsdk.playAudio({
          cmd: 'playAudio',
          animation: 0,
          videocontent: '后台正在为您办理中，请稍等',
          callback: ""
        });
      }
    } else {
      //跳转到错误页面提示
      _this.$router.push({ path: '/errorPage'});
    }
  }else if ('evaluation' == data.action){//跳评价页面
    _this.$router.push({ path: '/evaluation'});
  } else if ('information' == data.action){//跳资料袋页面
    var caseData = _this.$LocalStorage.SessionGet("caseData");
    if (data.result!=null && data.result!="" && data.result!=undefined){
      var result = data.result;
      caseData.lastNum = result.lastNum;
    }
    _this.$LocalStorage.SessionPut("caseData", caseData);
    _this.$router.push({ path: '/information'});
  }  else if('closeExternalApp' == data.action){//退出到咨询页面
    robotsdk.closeExternalApp({
      mode:0
    });
  } else if ('playAudio' == data.action){//语音播报
    var result = data.result;
    var videocontent = result.videocontent;
    robotsdk.playAudio({
      cmd: 'playAudio',
      animation: 0,
      videocontent: videocontent,
      callback: ""
    });
  } else if ('openKeyBoard' == data.action){//打开键盘
    robotsdk.openKeyBoard({
      oldContent: "",
      type: "",
    })
  } else if ('closeKeyBoard' == data.action){//关闭键盘
    robotsdk.closeKeyBoard();
  } else if ('printFile' == data.action){//打印
    var result = data.result;
    var base64Byte = result.base64Byte;
    var remoteprintname = result.remoteprintname;
    var replyvoice = result.replyvoice;
    _this.callbackMethod = result.callbackMethod;//打印页面回调方法
    robotsdk.printFile({
      filetype: "doc",					              //文件类型
      base64: base64Byte,		                  //文件内容base64字符串
      remoteprintname: remoteprintname,				//远程打印机名称
      replyvoice: replyvoice,	                //打印提示语音
      callback: "printCallback"		          	//接口回调函数
    })
  }else if ('readIDCard' == data.action){//读取身份证
    var result = data.result;
    var remindvoice = result.remindvoice;
    robotsdk.readIDCard({
      remindvoice: remindvoice,     //播放的声音内容
      callback: "IDCardCallback"    //接口回调函数
    })
  }
})



</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .self-container {
    background-image: url('../assets/images/background.png');
    background-repeat: no-repeat;
    background-size: cover;
    overflow: auto;
    height: 100%;
    padding: 0;
    margin: 0;
  }

  .print{
    color: #ffffffc9;
    font-size: 24px;
    position: absolute;
    bottom: 30%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .gif {
    position: relative;
    padding: 0;
    margin: 0;
  }
</style>
