<template>
	<u-sticky bgColor="#ffffff">
		<view class="card">
			<u-search
				v-model="localInputSearchValue"
				:showAction="true"
				actionText="搜索"
				:animation="false"
				@search="selfHandlerSearch"
				@custom="selfHandlerSearch"
				@clear="selfHandlerClear"
			/>
		</view>
		<app-line />
	</u-sticky>
</template>

<script>
export default {
	props: {
		inputSearchValue: {
			type: String,
			required: true,
		},
	},
	data() {
		return {
			// 使用本地变量存储父组件传递的值
			localInputSearchValue: this.inputSearchValue,
		};
	},
  watch: {
    // 监听父组件传递的 prop 变化
    inputSearchValue(newVal) {
      this.localInputSearchValue = newVal;
    },
  },
	methods: {
		selfHandlerSearch() {
			this.$emit("search", this.localInputSearchValue);
		},
    selfHandlerClear() {
      this.localInputSearchValue = "";
    }
	},
};
</script>

<style lang="scss" scoped>
.key-word-search-input-box {
	margin: 20rpx;
}
</style>
