<template>
	<view class="searchBox">
		<!-- <view class="set" style="width:28%;margin-right: 15rpx;">
			<select-lay :showplaceholder='false' class="seclectpaytype" :value="type_name" slabel="name"
				svalue="id" placeholder="请选择" :options="type_data" height="150rpx" @selectitem="changeType"
				:disabled="disable" :clean="false" :uninput="true"></select-lay>
		</view> -->
		<view class="search">
			<u-search v-model="searchResult" :showAction="false" actionText="搜索" @clear="clearSearch"
				@custom="search_rw" @search="search_rw" :clearabled='true' :disabled="true"
				@click="$u.throttle(search_sel)" :placeholder="placeholder" :hover-class="btnHover"></u-search>
			<view class="icon" @click="$u.throttle(scanAction)" :hover-class="btnHover" style="margin-right: 4px;">
				<u-icon size="35" name="scan" color="$main-bg-color"></u-icon>
			</view>
		</view>
		<lineView v-if="showLine" :left="left" />
	</view>
</template>

<script>
	import lineView from "@/components/form/lineView.vue";
	export default {
		name: "searchScanBtn",
		components: {
			lineView,
		},
		props: {
			placeholder: {
				type: String,
				default: "请选择"
			},
			value: {
				type: String,
				default: ""
			},
			showLine: {
				type: Boolean,
				default: true, //是否展示底部细线
			},
			left: {
				type: Number,
				default: 0,
			}

		},
		mounted() {},
		data() {
			return {
				searchResult: '',
				btnHover: "btn-hover-class",
			};
		},
		watch: {
			value: {
				immediate: true,
				handler(newVal, oldVal) {
					this.searchResult = newVal;
				},
			},
		},
		computed: {},
		methods: {
			search_sel() {
				//使用中
				this.$emit('click');
			},
			search_rw() {
				//不使用
			},
			clearSearch() {

			},
			scanAction() {
				let sigin = "searchScan";
				uni.$off(sigin)
				uni.$once(sigin, (data) => {
					//一码多用扫描结果处理
					//扫码页面返回数据
					let result = JSON.parse(data);
					this.$emit('callbackScanResult', result);
				})
				let url = "/pages/generalPage/scan/scanDefault?page=" + sigin;
				uni.navigateTo({
					url: url,
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.searchBox {
		width: 750rpx;
		display: flex;
		flex-direction: column;

		.search {
			width: 750rpx;
			display: flex;
			padding-right: 0px;
			padding-left: 15px;
			height: 50px;
			align-items: center;
			justify-content: center;

			.icon {
				width: 45px;
				background-color: #fff;
				display: flex;
				height: 50px;
				justify-content: center;
				align-items: center;
			}

			.btn-hover-class {
				color: #ffffff !important;
				background: $btn-default-btn-hover-color !important;
			}
		}
	}
</style>