<template>
	<view class="search_wraper">
		<input 
		type="text" 
		class="search_input" 
		:value="value"
		:focus="focused"
		@input="handleChange($event)">
		<view class="buttons_wraper">
			<view class="iconfont icon-del" @tap="toDel">&#xe6dc;</view>
			<view class="iconfont icon_scan" @tap="toScan">&#xe6e2;</view>
			<view v-show="seaShow" class="iconfont icon_search" @tap="toSearch">&#xe6e1;</view>
		</view>
	</view>
</template>

<script>
	import permision from "@/utils/permission.js"
	export default {
		data() {
			return {
				cur: ''
			};
		},
		model: {
			prop: 'value',
			event: 'input'
		},
		props: {
			value: String,
			seaShow: {
			  type: Boolean,
			  default: false
			},
			focused: {
				type: Boolean,
				default: false
			}
		},
		methods: {
			handleChange ($event) {
				this.cur = $event.target.value
				this.$emit('input', this.cur)
				this.$emit('handleChange', this.cur)
			},
			toSearch () {
				this.$emit('toSearch', this.cur)
			},
			toDel () {
				this.$emit('input', '')
			},
			async toScan() {
				// #ifdef APP-PLUS
				let status = await this.checkPermission();
				if (status !== 1) {
				    return;
				}
				// #endif
				uni.scanCode({
					success: (res) => {
						this.$emit('input', res.result)
						this.$emit('handleChange', res.result)
					},
					fail: (err) => {
						// uni.showToast({
						// 	title: '出错',
						// 	icon: 'none'
						// })
					}
				});
			}
			// #ifdef APP-PLUS
			,
			async checkPermission(code) {
				let status = permision.isIOS ? await permision.requestIOS('camera') :
					await permision.requestAndroid('android.permission.CAMERA');
			
				if (status === null || status === 1) {
					status = 1;
				} else {
					uni.showModal({
						content: "需要相机权限",
						confirmText: "设置",
						success: function(res) {
							if (res.confirm) {
								permision.gotoAppSetting();
							}
						}
					})
				}
				return status;
			}
			// #endif
		}
	}
</script>

<style lang="stylus">
@import '../common/style/mixin.styl';
.search_wraper
	position relative
	_wh(100%, 86rpx)
.search_input
	padding-right: 160rpx
	border 1px solid #e5e5e5
	border-radius 4px
	height: 86rpx;
	line-height: 86rpx;
	padding-left 10px;
	padding-right 150rpx;
	font-size: 32rpx;
	color: #6a6a6a
.buttons_wraper
	_fj()
	position absolute
	top 0
	right 0
	_wh(auto, 86rpx)
.icon-del
	_wh(50rpx, 86rpx)
	_font(40rpx,86rpx,#6a6a6a,,center)
.icon_scan
	_wh(50rpx, 86rpx)
	_font(40rpx,86rpx,#6a6a6a,,center)
.icon_search
	_wh(50rpx, 86rpx)
	_font(40rpx,86rpx,#6a6a6a,,center)
</style>
