<template xlang="wxml" minapp="mpvue">
	<view class="cQrcode">
		<!-- #ifndef MP-ALIPAY -->
		<canvas class="cQrcode-canvas" :canvas-id="cid" :style="{width:cpSize+'px',height:cpSize+'px'}" />
		<!-- #endif -->
		<!-- #ifdef MP-ALIPAY -->
		<canvas :id="cid" :width="cpSize" :height="cpSize" class="cQrcode-canvas" />
		<!-- #endif -->
		<image v-show="show" :src="result" :style="{width:cpSize+'px',height:cpSize+'px'}" />
	</view>
</template>

<script>
// Based on tki-qrcode 组件： https://github.com/q310550690/uni-app-qrcode , https://ext.dcloud.net.cn/plugin?id=39
import QRCode from "./qrcode.js"
let qrcode
export default {
	name: "cQrcode",
	props: {
		cid: {
			type: String,
			default: 'cQrcodeCanvas'
		},
		size: {
			type: [Number, String],
			default: 200
		},
		unit: {
			type: String,
			default: 'px'
		},
		show: {
			type: [Boolean, String],
			default: true
		},
		val: {
			type: String,
			default: ''
		},
		background: {
			type: String,
			default: '#ffffff'
		},
		foreground: {
			type: String,
			default: '#000000'
		},
		pdground: {
			type: String,
			default: '#000000'
		},
		icon: {
			type: String,
			default: ''
		},
		iconSize: {
			type: [Number, String],
			default: 40
		},
		lv: {
			type: [Number, String],
			default: 3
		},
		onval: {
			type: [Boolean, String],
			default: true
		},
		loadMake: {
			type: [Boolean, String],
			default: true
		},
		usingComponents: {
			type: [Boolean, String],
			default: true
		},
		showLoading: {
			type: [Boolean, String],
			default: false
		},
		loadingText: {
			type: String,
			default: '......'
		},
	},
	data() {
		return {
			result: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAYAAACAvzbMAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGAGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgeG1wOkNyZWF0ZURhdGU9IjIwMjAtMDMtMjJUMjE6NDQ6MjErMDg6MDAiIHhtcDpNb2RpZnlEYXRlPSIyMDIwLTAzLTIzVDA5OjE1OjQxKzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDIwLTAzLTIzVDA5OjE1OjQxKzA4OjAwIiBkYzpmb3JtYXQ9ImltYWdlL3BuZyIgcGhvdG9zaG9wOkNvbG9yTW9kZT0iMyIgcGhvdG9zaG9wOklDQ1Byb2ZpbGU9InNSR0IgSUVDNjE5NjYtMi4xIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOmU1YjIzY2JmLWE3NjEtNGRiNS1hMjQwLWRiNjhlYzYyZWVhNSIgeG1wTU06RG9jdW1lbnRJRD0iYWRvYmU6ZG9jaWQ6cGhvdG9zaG9wOjkwN2FlNzJjLTMwMWMtZjE0ZS1hMTYxLTU3YTAzNDc3YzdjNyIgeG1wTU06T3JpZ2luYWxEb2N1bWVudElEPSJ4bXAuZGlkOjdkMDZjYzRmLTE0YWEtNGE5MS1hNTRmLWVlZGFhMTEwNDI1MSI+IDx4bXBNTTpIaXN0b3J5PiA8cmRmOlNlcT4gPHJkZjpsaSBzdEV2dDphY3Rpb249ImNyZWF0ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6N2QwNmNjNGYtMTRhYS00YTkxLWE1NGYtZWVkYWExMTA0MjUxIiBzdEV2dDp3aGVuPSIyMDIwLTAzLTIyVDIxOjQ0OjIxKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ZTViMjNjYmYtYTc2MS00ZGI1LWEyNDAtZGI2OGVjNjJlZWE1IiBzdEV2dDp3aGVuPSIyMDIwLTAzLTIzVDA5OjE1OjQxKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoTWFjaW50b3NoKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8L3JkZjpTZXE+IDwveG1wTU06SGlzdG9yeT4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5L/Y2mAAANpUlEQVR42u3dwW5U1x3AYR6BR/AjeNmWSPEb1LtCNvEbwCJB3TFvgCUSZYnfwJN0UYUsPJJNujLjXU26sGMjUCuR8QJjqZt/zxmu3YkxMHPn3vHMvd+RPpkQCK3FvT+dc+49cyMibgDApHwTABAQAAQEAAEBQEAAQEAAEBAABAQAAQFAQABAQAAQEAAEBAABAUBAAEBAABAQAAQEAAEBQEAAQEAAEBAABAQAAQFAQABAQAAQEAAEBAABAUBAAEBAABAQ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TV1/dt74rjogWd6UFxAEBAFp8Eg3+14tAZnBuyECgoAgIAIiIAgIAiIgAoKAQDsCchRdAREQBAQBmXjkR24rfwrrqPrDHQUEAUFA5mxsvoqlymcgR+U+AVBAEBAEpOX7IE1YvhIQBAQBmf3LhL2mfF9cAwgIAjKjFwrz3kdeEhMQBAR/QVo2pjmRdxiPF/W9MS8gCAgCMv8zkfUSZ18dNi0eAoKAICBl9kTeHe++N+6HSDXh3CsBQUAQkApH/nCoYkbSy0tU57ON/M/5/ZEm7XcICAICgIAAICAACAgACAgAAgKAgAAgIAAICAAICAACAoCAACAgAAgIAAgIAAICgIAAICAACAgACAgAAgKAgAAgIAAICAAICAACAoCAACAgAAgIAAgIAAICgIAAICAACAgACAgAAgKAgAAgIAAIiG8CAAICgIAAICAACAgACAgAAgKAgAAgIAAICAAICAACAoCAACAgAAgIAAgIAAICgIAAICAACAgACAgAAgKAgAAgIAAICAAICAACAoCAACAgAAgIAAgIAAICgIAAICAACAgACAgAAgKAgAAgIAAgIAAICAACAoCAACAgACAgAAgIAAICgIAAICAAICAACAgAAgKAgAAgIAAgIAAICAACAoCAACAgACAgAAgIAAICgIAAICAAICAACAgAAgKAgAAgIAAgIAAICAACAoCAACAgvgkACAgAAgKAgAAgIAAgIAAICAACAoCAACAgACAgAAgIAAICgIAAICAAICAACAgAAgKAgAAgIAAgIAAICAACAoCAACAgAPAp/wN7p4IhtkXo/QAAAABJRU5ErkJggg==' // '../static/cQrcode.loading.png',
		}
	},
	methods: {
		_makeCode() {
			let that = this
			if (!this._empty(this.val)) {
				qrcode = new QRCode({
					context: that, // 上下文环境
					canvasId:that.cid, // canvas-id
					usingComponents: that.usingComponents===true||that.usingComponents==='true', // 是否是自定义组件
					showLoading: that.showLoading===true||that.showLoading==='true', // 是否显示loading
					loadingText: that.loadingText, // loading文字
					text: that.val, // 生成内容
					size: that.cpSize, // 二维码大小
					background: that.background, // 背景色
					foreground: that.foreground, // 前景色
					pdground: that.pdground, // 定位角点颜色
					correctLevel: Number(that.lv), // 容错级别
					image: that.icon, // 二维码图标
					imageSize: Number(that.iconSize),// 二维码图标大小
					cbResult: function (res) { // 生成二维码的回调
						that._result(res)
          },
				});
			} else {
				uni.showToast({
					title: '二维码内容不能为空',
					icon: 'none',
					duration: 2000
				});
			}
		},
		_clearCode() {
			this._result('')
			qrcode.clear()
		},
		_saveCode() {
			let that = this;
			if (this.result != "") {
				uni.saveImageToPhotosAlbum({
					filePath: that.result,
					success: function () {
						uni.showToast({
							title: '二维码保存成功',
							icon: 'success',
							duration: 2000
						});
					}
				});
			}
		},
		_result(res) {
			this.result = res;
			this.$emit('result', res)
		},
		_empty(v) {
			let tp = typeof v,
				rt = false;
			if (tp == "number" && String(v) == "") {
				rt = true
			} else if (tp == "undefined") {
				rt = true
			} else if (tp == "object") {
				if (JSON.stringify(v) == "{}" || JSON.stringify(v) == "[]" || v == null) rt = true
			} else if (tp == "string") {
				if (v == "" || v == "undefined" || v == "null" || v == "{}" || v == "[]") rt = true
			} else if (tp == "function") {
				rt = false
			}
			return rt
		}
	},
	watch: {
		size: function (n, o) {
			if (n != o && !this._empty(n)) {
				this.cSize = n
				if (!this._empty(this.val)) {
					setTimeout(() => {
						this._makeCode()
					}, 100);
				}
			}
		},
		val: function (n, o) {
			if (this.onval===true || this.onval==='true') {
				if (n != o && !this._empty(n)) {
					setTimeout(() => {
						this._makeCode()
					}, 0);
				}
			}
		}
	},
	computed: {
		cpSize() {
			if(this.unit == "upx"){
				return uni.upx2px(this.size)
			}else{
				return this.size
			}
		}
	},
	mounted: function () {
		if (this.loadMake===true || this.loadMake==='true') {
			if (!this._empty(this.val)) {
				setTimeout(() => {
					this._makeCode()
				}, 0);
			}
		}
	},
}
</script>
<style>
.cQrcode {
  position: relative;
}
.cQrcode-canvas {
  position: fixed;
  top: -99999upx;
  left: -99999upx;
  z-index: -99999;
}
</style>
