<template>
	<div>
		<common ref="common" @asynCallBack="asynCallBack"></common>
		<top-header :pageTitle="pageTitle"></top-header>

		<div class="mui-content">
			<div class="vongi-qrcode-main">
				<div class="vongi-qrcode-head">
					<div class="vongi-qrcode-img">
						<img :src="person_data?person_data.faceImageUrl:''">
					</div>
					<span v-text="person_data.name"></span>
				</div>
				<div class="vongi-qrcode-content" id="qrcode_show">
					<h4>我的关联二维码</h4>
					<img :src="qrCodeImg">
					<p>使用微信扫一扫 </br> 关注公众号补全家属信息</p>
				</div>
			</div>
		</div>

		<div id="qrcode" style="display: none;"></div>

		<loading :visible="isLoading"></loading>
	</div>
</template>

<script>
	import Common from '$project/components/Common.vue'
	import Loading from '$project/components/Loading.vue'
	import TopHeader from '$project/components/TopHeader.vue'
	import NavMenu from '@/components/NavMenu.vue'
	import {
		mapGetters,
		mapMutations
	} from 'vuex'
	import {
		convertCanvasToImage,
	} from '$project/utils'
	import QRCode from 'qrcodejs2'
	import {
		currentTimeStamp,
		parseUnixTime
	} from '$project/utils'
	export default {
		name: 'MasterUserMyCode',
		components: {
			Common,
			Loading,
			TopHeader,
			NavMenu
		},
		data() {
			return {
				isLoading: false,

				pageTitle: '二维码',

				qrCodeUrl: '',
				qrCodeImg: '',
			}
		},
		created() {
			var host = window.location.href.split("#")[0];
			this.qrCodeUrl = host + '#/master/user/relationPersonRegister?id=' + this.person_popedom.id + '&_t=' +
				currentTimeStamp();
		},
		methods: {
			//生成二维码
			qrcode() {
				let qrcode = new QRCode('qrcode', {
					width: 200,
					height: 200,
					text: this.qrCodeUrl, // 二维码内容  
					correctLevel: QRCode.CorrectLevel.M
					// render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）  
					// background: '#f0f'  
					// foreground: '#ff0'  
				})
				console.log(qrcode)
				var canvas = document.getElementsByTagName('canvas')[0];
				this.qrCodeImg = convertCanvasToImage(canvas);
				document.getElementById('qrcode_show').getElementsByTagName("img")[0].style.margin = '15px auto';
			},
			asynCallBack() {

			},
		},
		mounted() {
			//设置背景色
			document.body.style.backgroundColor = '#FF9474';
			//生成二维码
			this.qrcode();
		},
		destroyed() {
			//移除背景色
			document.body.style.backgroundColor = '';
		},
		computed: {
			...mapGetters({
				openId: 'wx_openid',
				token: 'token',
				person_data: 'person_data',
				person_popedom: 'person_popedom',
			})
		}
	}
</script>


<style scoped src="$project/assets/css/pension.css"></style>
<style scoped src="$project/assets/css/xpwyfyy.css"></style>
<style src="$project/assets/css/iconfont.css"></style>
<style>
</style>
