<template>
  <div class="report">
	<el-container style="margin: 20px;">
		<el-main width="70%">
			<div class="content" style="font-size:40px;margin-top: 20px;text-align: center;">人工智能预审报告</div>
			<div class="content" style="margin-top: 60px;">{{contentOne}}</div>
			<div class="content">
				<div class="text">申请人</div>
				<div class="content1">{{name}}</div>
			</div>
			<div class="content" style="margin-top: 20px;">
				<div class="text">手机号</div>
				<div class="content1">{{mobile}}</div>
			</div>
			<div class="content" style="margin-top: 20px;">
				<div class="text">申请事项</div>
				<div class="content1">{{projectName}}</div>
			</div>
			<div class="content" style="text-indent:2em;margin-top: 100px;" v-show="success">您提交的{{projectName}}申请材料，经人工智能预审员审查，{{contentYes}}</div>
      <div class="content" style="text-indent:2em;margin-top: 100px;" v-show="!success">您提交的{{projectName}}申请材料，经人工智能预审员审查，{{contentNo}}</div>
			<div class="content" style="text-align: right;">日期：{{date}}</div>
      <div class="button">
        <div class="print" @click="print" v-show="!printSuccess"></div>
        <div class="printNo" v-show="printSuccess"></div>
        <div class="nextStep" @click="nextStep"></div>
      </div>
		</el-main>
		<el-aside width="5px">
			<img src="../assets/images/337.png" style="height: 687px;width: 5px;" />
		</el-aside>
		<el-aside width="30%">
				<div style="display: block;line-height: 110px;margin-top: 110px;" v-if="success">
					<img src="../assets/images/ico/2x.png" style="height: 110px;width: 140px;" />
				</div>
				<div style="display: block;line-height: 110px;margin-top: 110px;" v-else>
					<img src="../assets/images/ico/ico_abnormal.png" style="height: 110px;width: 140px;" />
				</div>
				<div id="qqq" style="margin-top: 70px;background-color: white">
					<div id="qrCode" ref="qrCodeDiv"></div>
				</div>
				<div style="display: block;line-height: 60px;margin-top: 35px;color:#fff;font-size:26px;">
					扫描二维码获取预审报告
				</div>
		</el-aside>
	</el-container>
  </div>
  <count-down times=300 bottomOffset="10" rightOffset="10" fontSize="18" ref="child"></count-down>
  <b-page @bPageLoaded="voiceCallback"></b-page>
</template>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.report{
		background-image: url('../assets/images/background.png');
		background-repeat: no-repeat;
		background-size: cover;
		overflow:auto;
		height:100%;
	}
	.el-aside {
		/* background-color: #D3DCE6; */
		color: #333;
		text-align: center;
		line-height: 720px;
	}
	.el-main {
		/* background-color: #E9EEF3; */
		color: #333;
		text-align: center;
		line-height: 720px;
	}
	.content {
		line-height: 40px;
		color:#fff;
		font-size:24px;
		margin-top: 20px;
		text-align: left;
		clear: both;
	}
	.text {
		height: 57px;
		width: 21%;
		line-height: 57px;
		text-align:center;
		background-image: url('../assets/images/title4.png');
		background-repeat:no-repeat;
		margin-left: 110px;
		float: left;
	}
	.content1 {
		width: 63%;
		color:#00EEFF;
		font-size:36px;
		float: left;
		margin-top: 7px;
	}
	.right {
		height: 57px;
		width: 15%;
		text-align:center;
		/* line-height: 57px; */
		padding-left: 20px;
		padding-right: 20px;
	}
	#qqq {
	  width:200px;
	  height:200px;
	  margin: 0 auto; /*水平居中*/
	  position: relative;
    padding: 7px;
	}

  .button{
    display: inline-flex;
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 0);
  }

  .nextStep{
    width: 300px;
    height: 85px;
    background-image: url('../assets/images/btn/btnNext.png');
    background-repeat:no-repeat;
  }
  .print{
    width: 300px;
    height: 85px;
    margin-right: 20px;
    background-image: url('../assets/images/btn/btnPrint.png');
    background-repeat:no-repeat;
  }
  .printNo{
    width: 300px;
    height: 85px;
    margin-right: 20px;
    background-image: url('../assets/images/btn/btnPrint_Not.png');
    background-repeat:no-repeat;
  }
</style>

<script>
import QRCode from 'qrcodejs2';
import commonUtil from '../assets/js/commonUtil';
import { layer } from "@layui/layer-vue";
import BPage from "@/components/registerVoice";

export default{
  components: {
    BPage,
  },

	data() {
	  return {
		  title: '',
		  contentOne: '注：人工智能预审结果，仅作为材料准备阶段形式审查辅助，不作为最终受理意见，最终受理意见请将材料提交至AI专用收件窗口，由受理窗口出具。',
		  contentYes: '材料齐全、材料填写内容合格，符合该事项的申报要求，请您将申报材料提交至受理窗口！',
      contentNo: '存在问题，请您对材料内容进行核实和修订，完成后提交至人工智能专用受理窗口。',
		  date: '',
      name: '',
      idcard: '',
      mobile: '',
      projectName: '',
      projectId: '',
      success: false,
      scanUrl: '',
      printSuccess: false //是否打印成功
	  }
	},
	created() {
    var caseData = this.$LocalStorage.SessionGet("caseData");
    this.name = caseData.name;
    this.idcard = caseData.idcard;
    this.mobile = caseData.mobile;
    this.projectName = caseData.projectName;
    this.projectId = caseData.projectId;
    this.scanUrl = caseData.scanUrl;
		this.success = eval(caseData.success);
    this.printSuccess = caseData.printSuccess == null ? false : eval(caseData.printSuccess);
    this.PlayAudio();
		this.date = commonUtil.getNowDate();
		//this.getMethod();
	},
	mounted: function () {
	  this.$nextTick(function () {
	    this.bindQRCode();
	  })
	},
	computed:{
	},
	methods:{
    PlayAudio(){
      if (robotType) {
        if (this.success){
          robotsdk.playAudio({
            cmd: "cmd",
            animation: 0,
            videocontent: "您提交的"+this.projectName+"申请材料，经人工智能预审员审查，"+this.contentYes,
            callback: ""
          })
        }else {
          robotsdk.playAudio({
            cmd: "cmd",
            animation: 0,
            videocontent: "您提交的"+this.projectName+"申请材料，经人工智能预审员审查，"+this.contentNo,
            callback: ""
          })
        }
      }
    },

		bindQRCode() {
		  new QRCode(this.$refs.qrCodeDiv, {
		    text: this.scanUrl,
		    width: 186,
		    height: 186,
		    colorDark: "#FFFFFF", //二维码颜色
		    colorLight: "#02E2FC", //二维码背景色
		    correctLevel: QRCode.CorrectLevel.L//容错率，L/M/H
		  })
		},

		/*getMethod() {
			var _this = this;
			$.ajax({
				type: "get",
				url: window.config.api + 'lilo/aiCase/getRobotCaseMethod',
				async: false, //改为同步请求
				data: {projectId: this.projectId},
				success:function(data){
					if(data.success){
						_this.contentOne = data.obj.contentOne;
						_this.title = data.obj.title;
						var enterpriseName = data.obj.enterpriseName;
						var content;
						if(_this.success){
							content = data.obj.contentYes;
						} else {
							content = data.obj.contentNo;
						}
						_this.contentYes = content.replaceAll("${name}",_this.name).replaceAll("${projectName}",_this.projectName).replaceAll("${enterpriseName}",enterpriseName);
					} else {
            layer.msg("系统繁忙，请到窗口办理！", { time: 1500, icon: 3 });
            console.log(data.msg);
					}
				},error: function(error){
          layer.msg("系统繁忙，请到窗口办理！", { time: 1500, icon: 3 });
          console.log(error);
				}
			})
		},*/

    nextStep() {
		  if(this.success){
		    //预审成功进入装袋页面
        this.$router.push({ path: '/information'});
      } else {
        //预审失败进入评价页面
        this.$router.push({ path: '/evaluation'});
      }
    },

    print() {
      //进入打印页面
      this.$router.push({ path: '/printReport'});
    },

    //语音回调（只处理下一步和退出）
    voiceCallback(res){
      if (res=="nextStep"){
        this.nextStep();
      }

      if (res=="quit"){
        if(robotType){
          robotsdk.closeExternalApp({
            mode:0
          });
        }
      }
    }

	}
}
</script>