<template>
  <view>
    <!-- 扫码页面 -->
    <view style="position:fixed;width: 500px; height: 100%; bottom: 0;"></view>
  </view>
</template>

<script>
export default {
  name: 'AppScan',
	data() {
		return {
			barcode: null,
			flash: false,
			scanBarVew: null,
			tip: '将二维码放入框中，即可自动扫描'
		}
	},
	onShow() {
		// 页面展示时，重新启动扫描检测
		if (this.barcode) {
			console.log('onShow')
			// this.barcode.start()
		}
	},
	async mounted() {
		try{
			// plus.navigator.setFullscreen(true); //全屏
			// 创建相机
			let currentWebview = this.$mp.page.$getAppWebview();
			this.createBarcode(currentWebview)
			// this.createTipInfoView(currentWebview)
			this.createFlashBarView(currentWebview)
		}catch(error){
			console.log(error)
		}
	},
	methods: {
		start() {
		  this.barcode.start()
		},
		/**
            * 创建二维码
            * @param {Object} currentWebview
            */
		createBarcode(currentWebview) {
			if (!this.barcode) {
				//条码类型常量数组，默认情况支持QR、EAN13、EAN8类型。 通过此参数可设置扫码识别支持的条码类型（注意：设置支持的条码类型越多，扫描识别速度可能将会降低）
				this.barcode = plus.barcode.create('barcode', [plus.barcode.QR,plus.barcode.CODABAR,plus.barcode.UPCA,plus.barcode.CODE39,plus.barcode.CODE93,plus.barcode.CODE128], {
					top: '38px',
					left: '0px',
					height: '87%',
					width: '500px',
					position: 'absolute',
					background: '#808080',
					frameColor: '#fff',
					scanbarColor: '#FFCC33',
					filters:[0,7,5,8,9,10]
				});
				this.barcode.onmarked = this.onmarked;
				this.barcode.setFlash(this.flash);
				//此处未演示扫码成功回调的地址设置，实际请参考HTML5Plus API自行处理
				//注意扫码区域需为正方形，否则影响扫码识别率
				currentWebview.append(this.barcode);
			}
			console.log('createBarcode')
			this.barcode.start()
		},

		closed() {
      this.barcode.close()
			let currentWebview = this.$mp.page.$getAppWebview();
			currentWebview.remove(this.scanBarVew)
		},

		/**
		 * 创建提示信息
		 * @param {Object} currentWebview
		 */
		createTipInfoView(currentWebview) {
			const content = new plus.nativeObj.View('content', {
					top: '0px',
					left: '0px',
					height: '100%',
					width: '100%'
				},
				[{
					tag: 'font',
					id: 'scanTips',
					text: this.tip,
					textStyles: {
						size: '14px',
						color: '#ffffff',
						whiteSpace: 'normal'
					},
					position: {
						top: '90px',
						left: '10%',
						width: '80%',
						height: 'wrap_content'
					}
				}]);
			currentWebview.append(content);

		},
		// 创建 开关灯按钮
		createFlashBarView(currentWebview) {
			const openImg = this.crtFlashImg('static/yellow-scanBar.png')
			const closeImg = this.crtFlashImg('static/scanBar.png')
			const scanBarVew = new plus.nativeObj.View('scanBarVew', {
					top: '70%',
					left: '15%',
					height: '16%',
					width: '20%',
				},
				closeImg);
			scanBarVew.interceptTouchEvent(true);
			this.scanBarVew = scanBarVew
			currentWebview.append(scanBarVew);

			scanBarVew.addEventListener("click", (e) => { //点亮手电筒
				this.flash = !this.flash;
				if (this.flash) {
					scanBarVew.draw(openImg);
				} else {
					scanBarVew.draw(closeImg)
				}
				if (this.barcode) {
					this.barcode.setFlash(this.flash);
				}
			}, false)
		},
		crtFlashImg(imgsrc) {
			return [{
				tag: 'img',
				id: 'scanBar',
				src: imgsrc,
				position: {
					width: '28%',
					left: '36%',
					height: '30%'
				}
			}, {
				tag: 'font',
				id: 'font',
				text: '轻触照亮',
				textStyles: {
					size: '12px',
					color: '#ffffff'
				},
				position: {
					width: '80%',
					left: '10%'
				}
			}]
		},
		// 扫码成功回调
		onmarked(type, result) {
			this.barcode.cancel()
			this.$emit('getCode',result)
			// 3秒后再次执行扫码
			setTimeout(()=>{
				console.log('onmarked')
				this.barcode.start()
			},2000)
		}
	},

}
</script>

<style scoped lang="scss"></style>
