<template>
	<div>
		<canvas ref="eipqrcode" class="qr-canvas" v-show="showCode"></canvas>
		<div v-show="!showCode">{{ message }}</div>
	</div>
</template>

<script>
import utils from '@/utils.js';
import { mapState } from 'vuex';
import QRCode from 'qrcode';
import req from '@/request.js';

export default {
	name: 'eip-qrcode',
	props: [],
	data() {
		return {
			showCode: false,
			message: '流程实例还未生成',
		};
	},
	methods: {
		//得到url字符串
		getUrlString() {
			let params = this.$route.params;
			//查看实例页面
			if (params.instId) {
				req
					.get(
						window.context.bpmRunTime + '/runtime/instance/v1/' + params.instId
					)
					.then(response => {
						if (response.data) {
							this.qrcode(response.data.id, response.data.supportMobile);
						}
					});
			} else if (params.taskId) {
				//审批任务(根据路由的任务ID得到实例id)
				req
					.get(window.context.bpmRunTime + '/runtime/task/v1/' + params.taskId)
					.then(response => {
						if (response.data) {
							this.qrcode(
								response.data.procInstId,
								response.data.supportMobile
							);
						}
					});
			}
		},
		//生成二维码的Canvas
		qrcode(instId, supportMobile) {
			if (supportMobile != 1) {
				this.message = '请联系管理员绑定手机表单。';
				return;
			}
			if (instId) {
				let me_ = this;
				this.$http
					.post('${portal}/portal/shorturlManage/v1/getShortUrlByLong', {
						url:
							'/shareInst/' +
							instId +
							'/true?token=' +
							this.$store.state.login.currentUser.token,
					})
					.then(function (resp) {
						if (resp.data && resp.data.state) {
							QRCode.toCanvas(
								me_.$refs.eipqrcode,
								req.getContext().mobile + '/' + resp.data.value.shortUrl,
								function (error) {
									console.log(error);
								}
							);
							me_.showCode = true;
						} else {
							me_.$message.error(
								'获取表单外链短链接失败：' + resp.data.message
							);
						}
					});
			}
		},
	},
	mounted() {
		this.getUrlString();
	},
};
</script>
<style lang="stylus" scoped>
div[aria-invalid='true'] >>> .el-input__inner, div[aria-invalid='true'] >>> .el-input__inner:focus {
  border-color: #f56c6c;
}
.qr-canvas{
  height: 130px !important;
  width: 130px !important;
}
</style>
