<script>
export default {
	props: {
		value: {
			type: String,
			default: ''
		},
		placeholder: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			localValue: this.value, // 创建本地副本
			isInputFocused: false,
		};
	},
	watch: {
		value(newVal) {
			this.localValue = newVal; // 监听外部 value 变化并同步到本地
		}
	},
	methods: {
		handleInput(event) {
			const newValue = event.target.value;
			this.localValue = newValue;
			this.$emit('input', newValue); // 触发 input 事件以支持 v-model
		},
		// 新增：处理查询事件
		handleSearch() {
			this.$emit('search', this.localValue);
		}
	}
}
</script>

<template>
	<div class="input-container" :class="{ focused: isInputFocused || localValue }">
		<input
			type="text"
			:placeholder="placeholder"
			:value="localValue"
			@input="handleInput"
			@focus="isInputFocused = true"
			@blur="isInputFocused = false"
			@keydown.enter="handleSearch"
		>
		<img
			alt=""
			:src="isInputFocused || localValue ? '/search/home_search_s.png' : '/search/home_search.png'"
			@click="handleSearch"
		/>
	</div>
</template>


<style scoped lang="scss">
/* 添加输入框容器聚焦状态样式 */
.input-container {
	position: relative;

	input {
		width: 100%;
		height: 60px;
		padding: 0 20px;
		border-radius: 12px;
		border: 2px solid transparent;
		outline: none;
		font-size: $normal-font-size;
		transition: border-color 0.3s ease;

		&::placeholder {
			color: #ccc;
		}
	}

	img {
		position: absolute;
		right: 15px;
		top: 50%;
		transform: translateY(-50%);
		width: 54px;
		height: 40px;
		pointer-events: none;
		cursor: pointer;
	}

	&.focused {
		background:
			linear-gradient(white, white) padding-box,
			linear-gradient(90deg, $linear-gradient-start 22%, $linear-gradient-end 73%) border-box;
		border-radius: 12px;
		border: 1px solid transparent;
	}
}
</style>
