<template>
  <div class="self-container">
    <div class="top">
      <div class="left">
        <div class="left-content">
          <div ref="qrCodeDiv"></div>
        </div>
      </div>
      <div class="right">
        <div class="qrcode"></div>
      </div>
    </div>
    <div class="word">
      <p>您本次办理的{{projectName}}业务</p>
    </div>
    <div class="word word-bottom">
      <p>其中“{{files}}”资料需要进行远程核验，请您扫描二维码进行确认，确认后请您前往等候区等候。</p>
    </div>
  </div>
</template>
<script>
import { layer } from "@layui/layer-vue";
import QRCode from 'qrcodejs2';
import commonUtil from '../assets/js/commonUtil';
import websocket from '../assets/js/websocket';
export default {
	data() {
		return {
      projectName: '',
      batchId: '',
      type: '',//需要远程核验的材料类型
      files:'',//需要远程核验的材料名称
      urllink: '',//二维码内容
      userId: '',
		}
	},
	created() {
    var caseData = this.$LocalStorage.SessionGet("caseData");
    this.projectName = caseData.projectName;
    this.batchId = caseData.batchId;
    this.userId  = commonUtil.genUserId();
    this.type = caseData.artificialData;
    this.files = caseData.artificialFiles;

    var text = "您本次办理的"+ this.projectName+ "业务,其中“"+ this.files +"”资料需要进行远程核验，请您扫描二维码进行确认，确认后请您前往等候区等候。";
		if(robotType){
			robotsdk.playAudio({
				cmd: 'playAudio',
				animation: 0,
				videocontent: text,
				callback: ""
			});
		}
    this.initWebSocket(this.userId);
    this.generateUrllink();

	},
  mounted: function () {
    this.$nextTick(function () {
      this.bindQRCode();
    });
    // 将Vue方法传到全局对象window中
    window.receiveMsg = this.receiveMsg;
    window.playAudioCallback = this.playAudioCallback;
  },
	methods: {
    bindQRCode() {
      new QRCode(this.$refs.qrCodeDiv, {
        text: this.urllink,
        width: 270,
        height: 270,
        colorDark: "#FFFFFF", //二维码颜色
        colorLight: "#02E2FC", //二维码背景色
        correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
      })
    },
    initWebSocket(userId) {
      console.log("userId:" + userId);
      websocket.openClick(userId);
    },
    generateUrllink() {
      var _this = this;
      $.ajax({
        type: "get",
        url: window.config.api + 'lilo/wxIndex/generateUrllink',
        async: false, //改为同步请求
        data: {batchId: this.batchId, type: this.type, msgType: '1', userId: this.userId},
        success:function(data){
          if(data.success){
            _this.urllink = data.obj;
          } else {
            layer.msg("系统繁忙，请到窗口办理！", { time: 1500, icon: 3 });
            console.log(data.msg);
          }
        },error: function(error){
          layer.msg("系统繁忙，请到窗口办理！", { time: 1500, icon: 3 });
          console.log(error);
        }
      })
    },
    receiveMsg(obj){
      var type = obj.type;
      var msg = obj.msg;
      if('3' == type){ //类型 2.资料扫描下载 3 远程核验 4人工审查 5人工审查确认
        if(robotType){
          robotsdk.playAudio({
            cmd: 'playAudio',
            animation: 0,
            videocontent: "远程核验通知已经送达到工作人员，请到等待区等待审核结果。",
            callback: "playAudioCallback"
          });
        }
      }
    },
    playAudioCallback(){
      robotsdk.closeExternalApp({
        mode:0
      });
    }
	}
}
</script>

<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;
  }

  .top{
    width: 100%;
    height:70%;
  }

  .left{
    float: left;
    width: 50%;
    height:100%;
  }

  .right{
    float: left;
    width: 50%;
    height:100%;
  }

  .left-content {
    width:290px;
    height:290px;
    padding: 10px;
    background-color: white;
    margin-top: 145px;
    margin-left: 250px;
  }

  .qrcode{
    width:355px;
    height:400px;
    background-image: url('../assets/images/scan-qr-code.png');
    background-repeat: no-repeat;
    margin-top: 100px;
    margin-left: 50px;
  }

  .word{
    width: 100%;
    font-size: 26px;
    color: #ffffff;
    text-align: center;
  }
  .word-bottom{
    padding: 0 5%;
  }

</style>