<template>
	<view class="menu-div">
		<view v-if="template.imageBg" class="workspace" :style="'width:' + template.scaleWidth + 'upx;height:' + template.scaleHeight + 'upx;background: url(' + baseUrl + '/' +template.imageBg + ');backgroundSize:' + template.scaleWidth + 'upx ' + template.scaleHeight + 'upx;'">
			<view v-for="(citem, index) in items" :key="index" :style="'position: absolute;top:' + citem.y + 'upx;left:' + citem.x + 'upx;z-index:' + index + ';width:' + citem.width + 'upx;height:' + citem.height + 'upx;white-space:pre;'">
				<view class="template-item" :style="citem.style">
					<text :style="citem.itemType == 'qrcode' ? 'background: #FFFFFF;position:absolute;width:100%;top:'+citem.height+'upx;text-align:'+citem.align+';font-size:'+citem.fontSize+'upx;letter-spacing:'+citem.wordSpace+'upx;font-family:'+citem.fontFamily : ''" v-cloak>{{citem.itemType == 'qrcode' ? citem.style.itemText : citem.itemText}}</text>
				</view>
			</view>
			<view class="qrimg">
				<tki-qrcode v-if="ifShow" ref="qrcode" :val="val" :size="size" :unit="unit" :onval="onval" :loadMake="loadMake"
				 :usingComponents="true" @result="qrR" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getTemplate
	} from '@/api/index/index'

	import tkiQrcode from 'tki-qrcode/components/tki-qrcode/tki-qrcode.vue'
	import webSocket from '@/utils/weSocket1.js'

	var baseUrl = 'https://fsb.biutag.com:9900/ukeer-pc';

	var wid = document.body.clientWidth

	export default {
		components:{tkiQrcode},
		data() {
			return {
				id: '6fdfec14-8a86-4ae5-9c3a-8a098fe08726',
				baseUrl: 'https://fsb.biutag.com:9900/ukeer-pc',
				template: {
					templateId: '',
					name: '',
					imageBg: '',
					imageReal: '',
					realWidth: 0,
					realHeight: 0,
					scaleWidth: 450,
					scaleHeight: 600,
					scale: 0,
					bl: ''
				},
				ifShow: true,
				items: [],
				val: '', // 要生成的二维码值
				size: 100, // 二维码大小
				unit: 'upx', // 单位
				onval: true, // val值变化时自动重新生成二维码
				loadMake: true, // 组件加载完成后自动生成二维码
				src: '' ,// 二维码生成后的图片地址或base64
				wxcode: undefined,
				codeObj: []
			}
		},
		mounted() {},
		onLoad(e) {
			this.id = e.id
			this.bl = this.template.scaleWidth / 750
			console.log(this.bl)
			// this.bl = 1
			this.getTemplate()
			webSocket.getWebSocket(this)
		},
		methods: {
			getTemplate() {
				let query = {
					id: this.id
				}
				let vm = this
				getTemplate(query).then(res => {
					var qrcodeTemplate = res.data;
					vm.bl = qrcodeTemplate.scaleWidth / 750
					vm.template.templateId = qrcodeTemplate.templateId;
					vm.template.name = qrcodeTemplate.templateName;
					vm.template.imageReal = qrcodeTemplate.imageReal;
					vm.template.imageBg = qrcodeTemplate.imageBg;
					vm.template.realWidth = qrcodeTemplate.realWidth;
					vm.template.realHeight = qrcodeTemplate.realHeight;
					vm.template.scaleWidth = qrcodeTemplate.scaleWidth / vm.bl;
					vm.template.scaleHeight = qrcodeTemplate.scaleHeight / vm.bl;
					vm.template.scale = qrcodeTemplate.scale;
					vm.imageBg = baseUrl + "/" + qrcodeTemplate.imageBg;

					for (var i = 0; i < qrcodeTemplate.elementList.length; i++) {
						var item = qrcodeTemplate.elementList[i];
						var itemdefalut = {};
						itemdefalut.x = item.elementX / vm.bl;
						itemdefalut.y = item.elementY / vm.bl;
						itemdefalut.width = item.elementWidth / vm.bl;
						itemdefalut.height = item.elementHeight / vm.bl;
						itemdefalut.fontBold = item.fontWeight == "true" ? true : false;
						itemdefalut.orgFields = item.orgFields ? item.orgFields.split(',') : [];
						itemdefalut.addrFields = item.addrFields ? item.addrFields.split(',') : [];
						itemdefalut.fontFamily = item.fontFamily;
						itemdefalut.fontSize = item.fontSize / vm.bl;
						itemdefalut.fontColor = item.fontColor ? item.fontColor : '';
						itemdefalut.align = item.align;
						itemdefalut.wordSpace = item.wordSpace;
						itemdefalut.qrcodeType = item.qrcodeType;
						itemdefalut.qrcodeUrl = item.qrcodeUrl;

						if (item.imageUrl) {
							itemdefalut.imageUrl = item.imageUrl;
							vm.qrImage = item.imageUrl;
						}

						itemdefalut.codeType = item.codeType;
						itemdefalut.itemText = item.itemText;
						itemdefalut.itemType = item.itemType;
						// let style = this.getItemStyle(0,itemdefalut)
						itemdefalut['style'] = this.getItemStyle(i,itemdefalut)
						this.items.push(itemdefalut);
					}
				})
			},
			getItemStyle: function(index, item) {
				let vm = this
				const style = {
					borderColor: (index == this.currIndex ? '#FF0000' : '#CFCFCF'),
					width: item.width + 'upx',
					height: item.height + 'upx'
				};

				if ((item.itemType == 'qrcode' && item.qrcodeUrl) || (item.itemType == 'image' && item.imageUrl)) {
					style.background = 'url(' + (item.qrcodeUrl || item.imageUrl) + ')'
					style.backgroundSize = '100% 100%'
					style.backgroundRepeat = 'no-repeat';
				}
				
				if (item.itemType == 'qrcode' && item.qrcodeUrl){
					style.background = 'url(' + item.qrcodeUrl + ')'
					let itemTextBlack = item.itemText
					style['itemText'] = item.itemText
					style['itemTextBlack'] = itemTextBlack
					style['imageUrl'] = 'url(' + item.imageUrl + ')'
					this.codeObj[this.codeObj.length] = style
				}

				if ((item.itemType == 'code' || item.itemType == 'org' || item.itemType == 'address' || item.itemType == 'text') &&
					item.itemText) {
					style.color = item.fontColor;
					style.textAlign = item.align;
					style.fontFamily = item.fontFamily;
					style.fontWeight = item.fontBold ? 'bold' : '';
					style.lineHeight = item.height + 'upx'
					style.fontSize = item.fontSize + 'upx'
					style.letterSpacing = item.wordSpace + 'upx'

				}
				return style;
			},
			workspaceStyle: function() {
				let vm = this
				const template = this.template;
				if (!template.imageBg) {
					return {};
				}
				return {
					backgroundRepeat: 'no-repeat',
					width: template.scaleWidth / vm.bl + 'upx',
					height: template.scaleHeight + 'upx',
					background: 'url(' + baseUrl + '/' + template.imageBg + ')',
					backgroundSize: template.scaleWidth / vm.bl + 'upx ' + template.scaleHeight / vm.bl + 'upx'
				};
			},
			qrR(res){
				this.wxcode = res
				if(this.val != ''){
					for (var i = 0; i < this.codeObj.length; i++) {
						this.codeObj[i].background = 'url(' + this.wxcode + ')'
						this.codeObj[i].itemText = '扫码支付'
						console.log(this.codeObj[i])
					}
				}
			},
			getWxCode(code){
				if(code != undefined && code != this.val){
					this.val = code
				}
				if(code == undefined){
					for (var i = 0; i < this.codeObj.length; i++) {
						this.val = ''
						this.codeObj[i].background = this.codeObj[i].imageUrl
						this.codeObj[i].itemText = this.codeObj[i].itemTextBlack
					}
				}
			}
		}
	}
</script>

<style>
	.menu-div {
		width: 100%;
		height: 100%;
	}

	.workspace {
		width: 100%;
		position: relative;
		backgroundRepeat: 'no-repeat';
	}
	
	.template-item {
		background-size: 100% 100% !important;
		white-space:pre;
	}
	
	.qrimg {
		opacity: 0;
		width: 0;
		height: 0;
	}
</style>
