<template>
	<!-- 顶部导航栏 -->
	<view class="search-bar-container">
		<view class="search-box" :style="{marginTop:searchBarTop + 'px',height:searchBarHeight + 'px'}">
			<view class="top-left">
				<view class="back-button" hover-class="back-button-active" @click="goBack">
					<u-icon name="arrow-left" color="#fff;" />
				</view>
				<view class="search-input">
					<u-input v-if="!readOnly" v-model="queryParamF" :focus="true" placeholder="搜索优质产品"
						prefixIcon="search" :border="false" style="background-color: #fff;border: none;"
						confirm-type="go" @confirm="goSearch(queryParamF)" />
					<view v-else style="width: 360rpx;padding: 10rpx 20rpx;display: flex;align-items: center;"
						@click="goSearch">
						<u-icon name="search" color="#969696" size="22"></u-icon>
						<text
							style="margin-left:10rpx;font-size: 30rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #969696;line-height: 37rpx;">搜索优质商品</text>
					</view>
					<view class="search-btn" @click="goSearch">搜索</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "searchBar",
		props: {
			searchBarTop: {
				//搜索栏的外边框高度，单位px
				type: Number,
				default: 30
			},
			searchBarHeight: {
				//搜索栏的高度，单位px
				type: Number,
				default: 30
			},
			queryParam: {
				type: String,
				default: null
			},
			readOnly: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				queryParamF: ''
			}
		},
		watch: {
			queryParam: {
				handler(val) {
					this.queryParamF = this.queryParam || ''
				},
				immediate: true
			}
		},
		methods: {
			goSearch(value) {
				if (!this.queryParamF && value) {
					this.queryParamF = value
				}
				if (this.readOnly) {
					this.$emit('navigate')
					return
				}
				this.$emit('search', this.queryParamF)
			},
			goBack() {
				this.$emit('back')
			}
		}
	}
</script>

<style lang="less">
	.search-bar-container {
		position: fixed;
		top: 0;
		left: 0;
		// z-index: 999;
		width: 100%;
		background-color: #12CA64;

		.search-box {
			margin: 10rpx 10rpx;
			display: flex;
			align-items: center;

			.top-left {
				width: calc(100% - 200rpx);
				display: flex;
				justify-content: space-around;
				align-items: center;
				height: 100%;

				.search-input {
					display: flex;
					border: 2rpx solid #fff;
					background-color: #fff;
					border-radius: 50rpx;
					height: 100%;
					margin-left: 10rpx;

					.search-btn {
						font-size: 32rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #3E3E3E;
						line-height: 64rpx;
						margin-right: 18rpx;
					}
				}
			}
		}
	}
</style>
