<template>
    <view class="bg-white">
        <view class="px-20 pt-10">
            <uv-search v-model="localKeyword" placeholder="请输入院校名称" search-icon-color="primary"
                       @clear="confirmKeyword" @search="confirmKeyword" @custom="confirmKeyword"/>
        </view>
        <ai-dropdown/>
    </view>
</template>

<script>

import AiDropdown from "@/pagesOther/pages/ie/entry-ai-form/components/filter/ai-dropdown.vue";
import InjectAIDataMixin from "@/pagesOther/pages/ie/entry-ai-form/components/InjectAIDataMixin";

export default {
    name: "ai-form-filter",
    components: {AiDropdown},
    mixins: [InjectAIDataMixin],
    data() {
        return {
            // NOTE: entry-ai-form is watching 'filter',
            // so we use localKeyword to delay keyword change.
            localKeyword: this.filter?.keyword || ''
        }
    },
    watch: {
        'filter.keyword': function (val) {
            this.localKeyword = val
        }
    },
    methods: {
        confirmKeyword() {
            const changed = this.filter.keyword != this.localKeyword
            this.filter.keyword = this.localKeyword
            if (!changed) this.$emit('force')
        }
    }
}
</script>

<style scoped>

</style>