<template>
	<view class="search-box">
		<view class="jeepay-search" @touchmove.stop.prevent="moveHandle">
			<image src="/static/img/list-search.svg" alt="" /><!--放大镜-->
			<input type="text" v-model="searchText" :placeholder="placeholder" placeholder-style="font-size:28rpx" @focus="focusHandle" @input="changeHandle($event)" :focus="props.isFocus">
			
			<!-- 清空图片 -->
			<image @click="clearText"  src="../../static/img/clear-test.svg" class="clear-text" mode="" v-if="searchBtn && clearTextIsShow"></image>
			
			<view class="btn">
				<!-- <slot v-if="!searchBtn" name="option"></slot> -->
				<view v-if="searchBtn" @click="searchHandle" class="search-text">
					搜索
				</view>
				
			</view>
			
		</view>
		<slot v-if="!searchBtn" name="option" class="slot"></slot>
	</view>
	<view class="mark" @click="hiddenMask" v-show="searchBtn" @touchmove.stop.prevent="moveHandle">
	</view>
</template>

<script setup>
	import { ref, nextTick, watch } from 'vue'
	import { onShow } from '@dcloudio/uni-app'
	const props = defineProps({
		value: {type: String, default: null},
		placeholder: {type: String, default: '搜索内容'},
		isFocus:{type: Boolean, default: false}
	})
	
	let searchText = ref('') // 搜索内容
	let clearTextIsShow = ref(false) // 清空按钮是否展示
	
	// 搜索按钮
	let searchBtn = ref(false)
	// 获得焦点
	const focusHandle = () => {
		searchBtn.value = true
		emit('focusHandle')
	}
	
	function hiddenMask() {
		searchBtn.value = false
	}
	onShow(() => {
		hiddenMask();
	})
	//监听搜索框中有无内容
	watch( () => searchText.value, () => {
		if(!searchText.value) {
			clearTextIsShow.value = false
		} else {
			clearTextIsShow.value = true
		}
	})
	watch( () => props.value, () => {
		if(props.value === ''){
			searchText.value = ''
		}
	})
	
	// 禁止页码滚动
	const moveHandle = () => {}
	
	const emit = defineEmits(['update:value', 'searchHandle','focusHandle','backPressHandel','orderBackPressHandel'])
	const changeHandle = (e) => emit('update:value', e.detail.value)
	const clearText = () => {
		searchText.value = ''
		emit('update:value', '')
	}
	
	const searchHandle = () => {
		searchBtn.value = false
		emit('searchHandle')
	}
	const backPressHandel = ()=>{
		if(searchBtn.value){
			searchBtn.value = false
			return true
		}
		return false
	}
	const orderBackPressHandel = ()=>{
		if(searchBtn.value){
			searchBtn.value = false
		}
	}
defineExpose({ backPressHandel,orderBackPressHandel });
</script>

<style scoped lang="scss">
	.mark {
		position: absolute; 
		width: 100%;
		height: calc(100vh - 180rpx);
		top: 120rpx;
		left: 0;
		z-index:99;
		background-color: rgba(0,0,0, 0.5);
	}
	.search-box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #f2f2f2;
		border-bottom: 1rpx solid #e6e6e6;
		
		.jeepay-search {
			display: flex;
			padding: 30rpx;
			box-sizing: border-box;
			align-items:center;
			position: relative;
			height: 70rpx;
			width: 100%;
			background-color: #FFF;
			margin: 20rpx 30rpx 30rpx;
			border-radius: 12rpx;
			
			image {
				width: 26rpx;
				height: 26rpx;
				margin-right: 25rpx;
			}
			input {
				flex-grow: 1;
				margin-right: 20rpx;
			}
			.btn{
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
		}
		.search-text {
			color: $uni-color-primary;
			width: 90rpx;
		}
		.clear-text {
			width: 20rpx;
			height: 20rpx;
		}
	}

</style>