<template>
	<view class="nav_content" :style="{height: height + 'rpx'}">
		<view class="container">
			<view class="container__content">
				<view class="container__content__icon">
					<image class="image" src="../../static/imgs/public/img_search.png" mode="aspectFit"></image>
				</view>
				<input class="container__content__input"
				v-model="search_content"
				placeholder="输入关键字"
				placeholder-class="#e9e9e9e"
				confirm-type="search"
				@input="onInput"
				@confirm="clickSearch"
				type="text" />
			</view>
			<view class="container__btn" @click="clickSearch">搜索</view>
		</view>
	</view>
	
</template>

<script setup lang="ts">
    import { ref, watch } from 'vue';
	
	const props = defineProps({
		height:Number,
		searchContent:String,
	})
	watch(()=>props.searchContent, (new_v,old_v)=>{
	    // console.log('searchContent 观察 新值:',new_v,'旧值:',old_v)
		if(new_v) {
			search_content.value = new_v
		}
	},{immediate:true})
	
	let search_content = ref('')
	const emits = defineEmits(['clickSearch','onInput'])
	
	function onInput() {
		// console.log('search_content',search_content.value)
		emits('onInput', search_content.value)
	}
	
	function clickSearch() {
		emits('clickSearch',search_content.value)
	}
	
</script>

<style lang="scss">
	.nav_content{
		position: fixed;
		display: flex;
		flex-direction: column;
		width: 100%;
		left: 0;
		z-index: 10;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		background-color: #ffffff;
		// border-bottom-width: 1rpx;
		// border-bottom-style: solid;
		// border-bottom-color: #eee;
		// background-color: purple;
		
		.container{
			display: flex;
			flex-direction: row;
			align-items: center;
			height: 100%;
			// background-color: yellow;
			
			&__content {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-left: 3%;
				width: 85%;
				height: 80%;
				padding: 0 1%;
				border-radius: 25rpx;
				border: 2rpx solid #000000;
				// background-color: green;
				&__icon{
					padding: 0 4%;
					flex-shrink: 0;
					width: 53rpx;
					height: 53rpx;
					.image {
						width: 100%;
						height: 100%;
					}
				}
				&__input {
					width: 80%;
					height: 70%;
					// background-color: skyblue;
				}
			}
			&__btn {
				display: flex;
				width: 15%;
				height: 100%;
				justify-content: center;
				align-items: center;
				// background-color: blue;
			}
		}
		
	}
	
</style>