<template>
    <div class="filter-input">
        <i-input
            v-model="option.data"
            @on-change="onChange"
            @on-enter="onPressEnter"
            clearable
            placeholder="请输入搜索词"
        ></i-input>
    </div>
</template>

<script setup>
import { ref, onMounted, defineProps } from "vue";

/**
 * props参数
 *
 * params   渲染器传递的scope参数
 * option   更新数据模型
 * onChange 更新选项触发事件
 * onPressEnter 确认筛选触发事件
 */
const props = defineProps({
    params: {
        params: Object,
        default: function () {
            return {};
        },
    },
});
const option = ref({ data: null });
onMounted(() => {
    option.value = props.params.column.filters[0];
});
const onChange = () => {
    const { $panel } = props.params;
    const checked = !!option.value.data;
    $panel.changeOption(null, checked, option.value);
};
const onPressEnter = () => {
    const { $panel } = props.params;
    $panel.confirmFilter();
};
</script>

<style lang="less" scoped>
.filter-input {
    padding: 5px;
}
</style>
