<template>
	<!-- 搜索框 -->
	<view class="boxs">
		<view class="searchInput flexJ" @click="jump">
			<view class="left flexA">
				<image src="/static/indexIc/indexSearchIc.png" mode=""></image>
				<input :disabled="disabled" confirm-type="search" v-model="inputText" @confirm="doSearchs" @input="input" type="text" placeholder="请输入" placeholder-class="ples">
			</view>
			<view class="right flexA" @click="doSearchs(0)">
				<view class="line"></view>
				<text>搜索</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref,onMounted,defineEmits } from 'vue'
	const props = defineProps({
		disabled:{
			type:Boolean,
			default:true
		},
		keyWord:{
			type:String,
			default:''
		}
	})
	let inputText = ref('')  //输入框文字
	onMounted(()=> {
		inputText.value = props.keyWord
		// console.log('首艘',props.disabled)
	})
	const emit = defineEmits(['doSearchs','input'])
	// 回车事件
	const doSearchs = (e)=> {
		if(e==0) {
			if(inputText.value.trim() == '') return
			emit('doSearchs',inputText.value)
		} else {
			emit('doSearchs',e.detail.value)
		}
	}
	// 输入框为空
	const input = (e)=> {
		if(e.detail.value == '') {
			emit('input',e.detail.value)
		}
	}
	// // 点击搜索按钮
	// const search = ()=> {
	// 	console.log('搜索为你做')
	// }
	const jump = ()=> {
		props.disabled ? uni.navigateTo({url:'/pages/index/search'}) : ''
	}
</script>

<style lang="scss">
	.boxs {
		width: 100%;
		height: 96rpx;
		padding: 18rpx 32rpx;
		box-sizing: border-box;
		
		.searchInput {
			width: 100%;
			height: 100%;
			background-color: #FFFFFF;
			border-radius: 38rpx;
			padding: 14rpx 24rpx;
			box-sizing: border-box;
			
			.left {
				image {
					margin-right: 8rpx;
					width: 32rpx;
					height: 32rpx;
				}
				
				input {
					width: 500rpx !important;
				}
				
				.ples {
					 color: #00000042;
					 font-size: 26rpx;
				}
			}
			
			.right {
				.line {
					height: 30rpx;
					width: 1rpx;
					background-color: #FC6A3D;
					margin-right: 14rpx;
				}
				
				text {
					 font-size: 28rpx;
					 font-weight: 700;
					 color: #FB753C;
				}
			}
		}
	}
</style>