<template>
	<view class="serach">
		<view class="content" :style="{'border-radius':radius+'px'}">
			<view class="content-box" :class="{'center':mode === 2}" >
				<text class="icon icon-serach"></text>
				<input :placeholder="placeholder" @input="inputChange" confirm-type="search" @confirm="triggerConfirm" class="input" :class="{'center':!data.active && mode === 2}" :focus="data.isFocus" v-model="data.inputVal" @focus="focus" @blur="blur"/>
				<text v-if="data.isDelShow" class="icon icon-del"  @click.stop="clear"></text>
			</view>
			<view v-show="(data.active&&show&&button === 'inside')||(data.isDelShow && button === 'inside')" class="serachBtn" @click="search">
				搜索
			</view>
		</view>
		<view  v-if="button === 'outside'" class="button" :class="{'active':show||active}" @click="search">
			<view class="button-item">{{!show?searchName:'搜索'}}</view>
		</view>
	</view>
</template>

<script setup>
	import { ref,watch } from "vue";
	
	const props = defineProps({
		mode: {
			value: Number,
			default: 1
		},
		placeholder: {
			value: String,
			default: '请输入搜索内容'
		},
		modelValue: {
			type: String,
			default: ''
		},
		button: {
			value: String,
			default: 'outside'
		},
		show: {
			value: Boolean,
			default: true
		},
		radius: {
			value: String,
			default: 60
		}
	});
	
	const emits = defineEmits(["modelValue","update:modelValue","confirm","input","search"]);
	
	let data = ref({
		active: false,
		inputVal: '',
		searchName: '取消',
		isDelShow: false,
		isFocus: true
	});
	
	const triggerConfirm = ()=>{
		emits('confirm', false);
	}
	
	const inputChange = (event)=>{
		var keyword = event.detail.value;
		emits('input', keyword);
		if (data.value.inputVal) {
			data.value.isDelShow = true;
		}
	}
	
	const focus = ()=>{
		data.value.active = true;
		//HM修改 增加获取焦点判断
		if (data.value.inputVal) {
			data.value.isDelShow = true;
		}
	}
	
	const blur = ()=>{
		data.value.isFocus = false;
		if (!data.value.inputVal) {
			data.value.active = false;
		}
	}
	
	const clear = ()=>{
		//HM修改 收起键盘
		uni.hideKeyboard();
		data.value.isFocus = false;
		data.value.inputVal = '';
		data.value.active = false;
		emits('input', '');
	}
	
	const getFocus = ()=>{
		if(!data.value.isFocus){
			data.value.isFocus = true;
		}
	}
	
	const search = ()=>{
		if (!data.value.inputVal) {
			if(!props.show && data.value.searchName == '取消'){
				uni.hideKeyboard();
				data.value.isFocus = false;
				data.value.active = false;
				return;
			}
		}
		
		emits('search', data.value.inputVal ? data.value.inputVal : props.placeholder);
	}
	
	watch(()=>data.value.inputVal,(newValue,oldValue)=>{
		if (newValue) {
			data.value.searchName = '搜索';
		} else {
			data.value.searchName = '取消';
			data.value.isDelShow = false;
		}
	});
	
	watch(()=>props.modelValue,(newValue,oldValue)=>{
		data.value.inputVal = newValue;
	});
	
</script>

<style lang="scss" scoped>
	.serach {
		display: flex;
		width: 100%;
		box-sizing: border-box;
		font-size: $uni-font-size-base;
		.content {
			display: flex;
			align-items: center;
			width: 100%;
			height: 60rpx;
			background: #fff;
			overflow: hidden;
			transition: all 0.2s linear;
			border-radius: 30px;
	
			.content-box {
				width: 100%;
				display: flex;
				align-items: center;
				&.center {
					justify-content: center;
				}
				.icon {
					padding: 0 15rpx;
					&.icon-del {
						font-size: 38rpx;
						&:before {content:"\e644";}
					}
					&.icon-serach:before {content:"\e61c";}
				}
				.input {
					width: 100%;
					max-width: 100%;
					line-height: 60rpx;
					height: 60rpx;
					transition: all 0.2s linear;
					&.center {
						width: 200rpx;
					}
					&.sub {
						width: auto;
						color: grey;
					}
				}
			}
			.serachBtn {
				height: 100%;
				flex-shrink: 0;
				padding: 0 30rpx;
				background:linear-gradient(to right,#ff9801,#ff570a);
				line-height: 60rpx;
				color: #fff;
				transition: all 0.3s;
			}
		}
	
		.button {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			flex-shrink: 0;
			width: 0;
			transition: all 0.2s linear;
			white-space: nowrap;
			overflow: hidden;
			&.active {
				padding-left: 15rpx;
				width: 100rpx;
			}
		}
	}
	//HM修改 把字体改成本地加载
	@font-face {font-family:"iconfont";src:url('data:application/x-font-woff;charset=utf-8;base64,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');}
	
	
	.icon {
		font-family: iconfont;
		font-size: 32rpx;
		font-style: normal;
		color: #999;
	}
</style>