<template>
	<view class="scan_wraper">
		<view class="zd-row">
			<view class="zd-col-24 zd-row jcflexstart" @tap="focusState=true">
				<view v-show="scanList.length" class="scaned_font">{{scanList.join()+','}}</view>
				<input
				type="text" 
				class="search_input"
				confirm-type="go"
				v-model="value"
				:focus="focusState"
				@focus="handleFocus"
				@blur="handleBlur"
				@confirm="handleSend">
			</view>
			<uni-icons v-show="scanList.length" class="mgr20" type="clear" size="24" color="#4e6ef2" @tap="toDel"></uni-icons>
			<uni-icons type="scan" size="22" :color="focusState ? '#D7592F' : '#4e6ef2'" @tap="focusState=true"></uni-icons>
		</view>
		<view v-show="scanList.length > 0 && show" class="scan_list_select">
			<view class="pop_arrow"></view>
			<view class="zd-row" v-for="(e, i) in scanList" :key="i">
				<view class="scan_list_item">{{e}}</view>
				<uni-icons type="clear" size="20" color="#666" @tap="toDelItem(i)"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script>
	import permision from "@/utils/permission.js"
	export default {
		data() {
			return {
				focusState: false,
				scanList: [],
				value: '',
				show: false
			};
		},
		methods: {
			handleFocus () {
				this.focusState = true
				this.show = true
			},
			handleBlur () {
				this.focusState = false
				if (this.value) {
					this.scanList.push(this.value)
					this.value = ''
					this.$emit('getScanlist', this.scanList)
				}
				this.show = false
			},
			toDel () {
				this.value = ''
				this.scanList = []
				// setTimeout(()=> {
				// 	this.focusState = true
				// }, 100)
			},
			toDelItem (i) {
				this.scanList.splice(i, 1)
				this.$emit('getScanlist', this.scanList)
				setTimeout(()=> {
					this.focusState = true
				}, 100)
			},
			handleSend (e) {
				if (this.value) {
					this.scanList.push(this.value)
					this.value = ''
				}
				setTimeout(()=> {
					this.focusState = true
				}, 100)
				this.$emit('getScanlist', this.scanList)
			}
		}
	}
</script>

<style lang="stylus" scoped>
@import '../common/style/mixin.styl';
.scan_wraper
	position relative
	_wh(100%, 80rpx)
	background-color: #fff;
	border-radius: 10rpx;
	padding: 0 10rpx
.search_input
	width 50%
	height 80rpx;
	_font(28rpx, 80rpx, #606266,,)
	border: 0;
	background-color: transparent;
.scaned_font
	max-width 50%
	_font(26rpx, 60rpx, #606266,,)
	white-space nowrap
	text-overflow ellipsis
	overflow hidden
	margin-right 6rpx
.scan_list_select
	position absolute
	top calc(100% + 12px)
	left 0
	z-index 3
	width 100%
	background-color: #FFFFFF;
	border: 1px solid #EBEEF5;
	border-radius: 6px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	padding: 8rpx 10rpx
.pop_arrow
	position absolute
	top: -12px
	left: 10%
	border: 6px solid #EBEEF5;
	width: 0;
	height: 0;
	border-top-color: transparent;
	border-left-color: transparent;
	border-right-color: transparent;
.scan_list_select
	_font(26rpx, 80rpx, #606266,,)
</style>
