<template>
	<view class="wrapper" :class="{'dark-icon': darkIcon}">
		<input type="password" style='width:0;height:0;min-height:0;position: absolute;'/>
		<input type="text" autocomplete="off" style='width:0;height:0;min-height:0;position: absolute;'/>
		<easyinput
		 v-bind="$attrs"
		 @iconClick="$emit('iconClick', $event)"
		 @input="$emit('input', $event)"
		 @confirm="$emit('confirm', $event)"
		 clearable
		 :disabled="mode == 'boardcast'"></easyinput>
		 
		 <!-- #ifdef APP-PLUS -->
		 <view v-if="$platform === 'android'" class="icon" @click="changeMode">
		 	<!-- <uni-icons :type="mode == 'boardcast' ? 'navigate' : 'font'" size="30"></uni-icons> -->
			<!-- 需求方要求：广播就是广播模式，点击可以切换，广播模式显示广播图标，键盘模式显示键盘图标 -->
			<image v-if="mode == 'keyboard'" src="../../static/images/keyboard.png"></image>
			<image v-if="mode == 'boardcast'" src="../../static/images/broadcast.png"></image>
		 </view>
		 <!-- #endif -->
	</view>
</template>

<script>
	import scaninput from './scanInput.js'
	if(uni.getSystemInfoSync().platform == 'android'){
		scaninput.initScan()
		scaninput.startScan()
	}
	
	export default {
		name:"scan-listener",
		props:{
			darkIcon: Boolean // 是否是深色图标
		},
		created() {
			console.log('创建扫码')
			// #ifdef APP-PLUS
			if(this.$platform === 'android'){
				this.mode = uni.getStorageSync('scanMode') || 'boardcast' // 默认是键盘输入模式
				scaninput.install(this.scanHandle)
			}
			// #endif
		},
		beforeDestroy() {
			// #ifdef APP-PLUS
			if(this.$platform === 'android'){
				console.log("销毁扫码")
				scaninput.uninstall(this.scanHandle)
			}
			// #endif
		},
		watch: {
			mode(newValue, oldValue) {
				uni.setStorageSync('scanMode',  this.mode)
			}
		},
		methods: {
			scanHandle(code) {
				// console.log('广播模式')
				if(this.mode != 'boardcast'){
					console.log('键盘输入模式，不做处理')
					return false
				}
				this.inputVal = code
				this.$emit('submit', code)
			},
			changeMode(){
				this.mode = this.mode == 'boardcast' ? 'keyboard' : 'boardcast'
			}
		},
		data() {
			return {
				mode: 'keyboard', // 默认键盘输入模式，可选boardcast广播模式
				inputVal: '',
			};
		}
	}
</script>
<script module="keyboard" lang="renderjs">
/* export default {
  mounted () {
    const onKey = (event) => {
      const keys1 = ['type', 'timeStamp']
      const keys2 = ['altKey', 'code', 'ctrlKey', 'isComposing', 'key', 'location', 'metaKey', 'repeat', 'shiftKey']
      const keys3 = ['char', 'charCode', 'keyCode', 'keyIdentifier', 'keyLocation', 'which']
      const data = {}
      keys1.concat(keys2, keys3).forEach(key => data[key] = event[key])
      this.$ownerInstance.callMethod('onEvent', data)
    }
    const names = ['keyup'] //'keydown', 
    names.forEach(name => {
      document.addEventListener(name, onKey, false)
    })
    this.$on('hook:beforeDestroy', () => {
      names.forEach(name => {
        document.removeEventListener(name, onKey, false)
      })
    })
  }
} */
</script>

<style lang="scss">
.wrapper{
	display: flex;
	align-items: center;
	.icon{
		margin-left: 10px;
		display: flex;
		align-items: center;
		image{
			width: 50rpx;
			height: 50rpx;
		}
	}
}
.dark-icon{
	.icon image{
		filter: invert(100%);
	}
}
</style>