<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;
		}
	},
	methods: {
		handleInput(event) {
			const newValue = event.target.value;
			this.localValue = newValue;
			this.$emit('input', newValue);
		},
		// 新增：处理查询事件
		handleSearch() {
			this.$emit('search', this.localValue);
		}
	}
}
</script>

<template>
	<div class="input-container flex items-center" :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 {
	height: 60px;
	padding: 10px 20px;
	border-radius: 12px;
	background-color: #fff;
	input {
		outline: none;
		font-size: $normal-font-size;
		transition: border-color 0.3s ease;
		color: #1e293b;
		flex: 1;
		background: #fff !important;
		border: none;
		padding: 0;
		margin: 0;
		box-shadow: none;
		height: 40px;

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

	img {
		position: relative;
		right: 0;
		width: 54px;
		height: 40px;
		cursor: pointer;
		margin-left: 10px;
	}

	&.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>
