<template>
	<!-- 搜索输入框 -->
	<view class="searchBox">
		<view class="cont">
			<view class="box">
				<up-icon name="search" size="17" color="#A8A8A8"></up-icon>
				<input class="input"
				   :auto-focus="show"
				   type="text"
				   :value="keyword"
				   placeholder="搜索商品"
				   @input="getValue"
				   @confirm="search" />
			</view>
			<view class="btn" @click="search">搜索</view>
		</view>
	</view>
</template>

<script>
import { ref, reactive, toRefs, watch } from 'vue'
export default {
	props: {
		searchValue: {
			type: String,
			default: ''
		},
		show: {
			type: Boolean,
			default: false
		}
	},
	setup(props, context) {
		const data = reactive({
			Color: uni.getStorageSync('theme_color')
		})
		
		watch(props, async (newProps) => {
			if (newProps) {
				keyword.value = newProps.searchValue
			}
		})
		
		const keyword = ref('')
		function getValue(e) {
			keyword.value = e.detail.value
			context.emit('getvalue', e.detail.value)
		}
		
		function search() {
			context.emit('searchBtn', keyword.value)
		}
		
		return {
			...toRefs(data),
			keyword,
			getValue,
			search
		}
	}
}
</script>

<style lang="scss" scoped>
.searchBox{
	.cont{
		display: flex;
		background-color: #fff;
		padding: 10rpx 30rpx;
		box-sizing: border-box;
		.box{
			display: flex;
			align-items: center;
			flex: 1;
			height: 66rpx;
			border-radius: 33rpx;
			background-color: #f5f5f5;
			padding: 0 30rpx;
			.input{
				font-size: 28rpx;
				flex: 1;
			}
		}
		.btn{
			color: v-bind('Color');
			font-size: 30rpx;
			text-align: center;
			line-height: 66rpx;
			width: 100rpx;
			height: 66rpx;
		}
	}
}
</style>
