<template>
	<view :class="button?'topClass haveIcon':'topClass noIcon'">
		<u-search id="search" :placeholder="placeholder" v-model="searchModel" @search="search()" :show-action="false"
			:showAction="false" @click="click_search" actionText="搜索" @custom="search()" @change="change" shape="square"
			:clearabled="true" :disabled="open" @clear="clearHandle"></u-search>
		<view class="btn" v-if="button">
			<button type="default" @click="scan">扫码</button>
		</view>
	</view>
</template>

<script>
	import {
		setWeixinConfig,
		onScanH5Weixin,
	} from './weixinSdkManager.js'
	export default { //搜索框，带扫描图标
		name: "searchBar",
		props: {
			value: {
				type: String,
				default: ""
			},
			showScan: { //是否展示扫描组件
				type: Boolean,
				default: true,
			},
			placeholder: { //非只读状态无内容时的显示
				type: String,
				default: "请输入搜索内容"
			},
			open: {
				type: Boolean,
				default: false,
			},
			button:{
				type: Boolean,
				default: false,
			}
		},
		data() {
			return {
				searchModel: '',
				btnHover: "btn-hover-class",
			}
		},
		watch: {
			value: {
				immediate: true,
				handler(newVal, oldVal) {
					this.searchModel = newVal;
				},
				deep: true
			},
		},
		created() {
			// 微信授权
			// #ifdef H5
			setWeixinConfig()
			// #endif
		},
		methods: {
			search() {
				this.$emit('search', this.searchModel);
			},
			scan(){
				this.$emit('scan');
			},
			scanAction() {
				// #ifdef H5
				onScanH5Weixin((res) => {
					// 二维码识别成功
					this.$emit('callbackScanResult', res)
				})
				// #endif
				// app扫码
				// #ifdef APP-PLUS
				let sigin = "searchScan1";
				uni.$off(sigin)
				uni.$once(sigin, (data) => {
					//一码多用扫描结果处理
					//扫码页面返回数据
					let result = JSON.parse(data);
					this.$emit('callbackScanResult', result.result);
				})
				let url = "/pages/generalPage/scan/scanDefault?page=" + sigin;
				uni.navigateTo({
					url: url,
				})
				// #endif
			},
			change(e) {
				this.$emit('input', e)
			},
			click_search() {
				this.$emit('click');
			},
			// 清除事件
			clearHandle() {
				this.$emit('clear');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topClass {
		display: flex;
		justify-content: space-between;
		width: 100%;
		background-color: white;
		align-items: center;
		box-sizing: border-box;
		height: 50px;
		padding-left: 15px;
	}

	.haveIcon {
		padding-right: 2px;
	}

	.noIcon {
		padding-right: 15px;
	}

	.icon {
		padding-left: 10px;
		padding-right: 15px;
		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;
	}
	.btn{
		padding: 0rpx 15rpx;
		button{
			padding: 0rpx 20rpx;
			font-size: 28rpx;
			background-color:#003D54;
			border-color: #003D54;
			color: #fff;
		}
	}
</style>