<template>
    <u-search v-model="internalValue" :placeholder="placeholder" :showAction="showAction" :actionText="actionText"
        @search="handleSearch" @custom="handleCustom" @clear="handleClear" :disabled="disabled" :maxlength="maxlength"
        :height="height" :bgColor="bgColor" :color="color" :searchIconColor="searchIconColor"
        :clearButton="clearButton" />
</template>

<script>
export default {
    name: 'HSearch',
    props: {
        // 双向绑定的值
        value: {
            type: String,
            default: ''
        },
        // 占位符文本
        placeholder: {
            type: String,
            default: '请输入关键词'
        },
        // 是否显示搜索按钮
        showAction: {
            type: Boolean,
            default: true
        },
        // 搜索按钮文本
        actionText: {
            type: String,
            default: '搜索'
        },
        // 是否禁用
        disabled: {
            type: Boolean,
            default: false
        },
        // 最大输入长度
        maxlength: {
            type: Number,
            default: 100
        },
        // 搜索框高度
        height: {
            type: Number,
            default: 64
        },
        // 背景颜色
        bgColor: {
            type: String,
            default: '#f5f5f5'
        },
        // 文字颜色
        color: {
            type: String,
            default: '#333333'
        },
        // 搜索图标颜色
        searchIconColor: {
            type: String,
            default: '#999999'
        },
        // 是否显示清除按钮
        clearButton: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {
            internalValue: this.value
        };
    },
    watch: {
        value(newVal) {
            this.internalValue = newVal;
        },
        internalValue(newVal) {
            this.$emit('input', newVal);
            this.$emit('update:value', newVal);
        }
    },
    methods: {
        // 处理搜索事件
        handleSearch(value) {
            this.$emit('search', value);
        },
        // 处理自定义事件（点击搜索按钮）
        handleCustom(value) {
            this.$emit('custom', value);
        },
        // 处理清除事件
        handleClear() {
            this.internalValue = '';
            this.$emit('clear');
            this.$emit('search', '');
        },
        // 聚焦搜索框
        focus() {
            this.$refs.uSearch && this.$refs.uSearch.focus();
        },
        // 失焦搜索框
        blur() {
            this.$refs.uSearch && this.$refs.uSearch.blur();
        },
        // 清空搜索框
        clear() {
            this.internalValue = '';
            this.handleClear();
        }
    }
};
</script>

<style lang="scss" scoped>
// 可以在这里添加自定义样式
.h-search-container {
    width: 100%;
}

::v-deep .u-search__content {


    .u-search__content__input {
        height: 80rpx !important;
        
    }
}
</style>