<template>
	<view>
		<view :class="modal?'show-qrcode':'hide-qrcode'">
			<canvas :style="{width:`${width}px`,height:`${height}px`}" :canvas-id="qrcode_id">
				<!-- #ifndef MP -->
				<view v-if="modal&&is_themeImg"  >
					<image :style="{width:`${h_w_img}px`,height:`${h_w_img}px`}"  :src="themeImg"></image>
				</view>
				<!-- #endif -->
			</canvas>
		</view>
	</view>
</template>

<script>
	var qr_we = require("./qrcode_wx.js");
	const qrCode = require('./weapp-qrcode.js')
	export default {
		props: {
			modal: {
				type: Boolean,
				default: false
			},
			url: {
				type: String,
				default: ''
			},
			height: {
				type: Number,
				default: 200
			},
			width: {
				type: Number,
				default: 200
			},
			themeColor: {
				type: String,
				default: '#333333',
			},
			qrcode_id: {
				type: String,
				default: 'qrcode_id',
			},
			is_themeImg: {
				type: Boolean,
				default: false,
			},
			themeImg: {
				type: String,
				default: 'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/educationStu/coffee/cup.png',
			},
			h_w_img: {
				type: Number,
				default: 40
			},
		},
		watch:{
			modal(val){
				if(!val){
				var cvs = uni.createCanvasContext(this.qrcode_id)
				console.log(cvs)
				cvs.draw()
				}
			}
		},
		methods: {
			hideQrcode() {
				this.$emit("hideQrcode")
			},
			// 二维码生成工具
			crtQrCode() {
				let that = this;
				//#ifndef MP
				new qrCode(that.qrcode_id, {
					text: this.url,
					width: that.width,
					height: that.height,
					colorDark: that.themeColor,//#333333
					colorLight: "#FFFFFF",
					correctLevel: qrCode.CorrectLevel.H,
				})
				// #endif
				//#ifdef MP
				that.createQrCode(this.url, that.qrcode_id, that.width, that.height,that.themeColor,that.is_themeImg,that.themeImg,that.h_w_img);
				// #endif
			},
			//#ifdef MP
			createQrCode: function(url, canvasId, cavW, cavH,cavColor,haveImg,imgurl,imgsize) {
				//调用插件中的draw方法，绘制二维码图片
				qr_we.api.draw(url, canvasId, cavW, cavH,cavColor,haveImg,imgurl,imgsize, this, this.canvasToTempImage);
			},
			// #endif
		},
	}
</script>

<style scoped lang="scss">
	.opacity-qrcode {
		opacity: 0;
		display: block;
	}
	.show-qrcode {
		display: block;
		animation: fade 0.7s;
	}
	.hide-qrcode {
		animation: hide 0.7s;
	}

	@keyframes fade {
		from {
			opacity: 0.8;
		}

		to {
			opacity: 1;
		}
	}

	@keyframes hide {
		from {
			opacity: 1;
		}

		to {
			opacity: 0;
		}
	}
</style>