<template>
    <component v-if="column.search.el" :is="isComponent()" v-bind="column.search.props" v-on="column.search.listeners"
        v-model="searchParam[column.search.key ? column.search.key : column.prop]" :placeholder="placeholder(column)"
        size="small" :clearable="clearable(column)" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"
        class="full-width-input" @focus="(event) => { vOn('onfocus', event) }" @blur="(event) => { vOn('onblur', event) }"
        @change="(event) => { vOn('onchange', event) }" @input="(event, flag) => { vOn('oninput', event, flag) }"
        @clear="(event) => { vOn('onclear', event) }">
    </component>
</template>

<script>
export default {
    props: {
        column: Object, // 具体每一个搜索项的配置
        searchParam: Object, // 搜索参数
        search: Function, // 搜索方法
    },
    methods: {
        //设置渲染的组件
        isComponent () {
            let result = ''
            let { column } = this
            if (column.search.el && typeof column.search.el === "string") {
                switch (column.search.el) {
                    case 'select': result = ProSelect; break;
                    case 'select-tree': result = ProSelectTree; break;
                    case 'switch': result = ProSwitch; break;
                    case 'cascader': result = ProCascader; break;
                    case 'yearPicker': result = YearPicker; break;
                    case 'table-select': result = TableSelect; break;
                    case 'date-picker': result = `pro-${column.search.el}`; break;
                    case 'time-picker': result = `pro-${column.search.el}`; break;
                    case 'time-select': result = `pro-${column.search.el}`; break;
                    case 'input-number': result = `pro-${column.search.el}`; break;
                    case 'input-number-range': result = `pro-${column.search.el}`; break;
                    default: result = `el-${column.search.el}`; break;
                }
            } else {
                result = column.search.el
            }
            return result
        },
        // 判断 fieldNames 设置 label && value 的 key 值
        placeholder (column) {
            return column.search?.props?.placeholder ?? (column.search?.el === "input" ? "请输入" : "请选择");
        },
        // 判断 placeholder
        fieldNames () {
            return {
                label: column.fieldNames?.label ?? "label",
                value: column.fieldNames?.value ?? "value"
            };
        },
        // 是否有清除按钮 (当搜索项有默认值时，清除按钮不显示)
        clearable (column) {
            return column.search?.props?.clearable ?? (column.search?.defaultValue == null || column.search?.defaultValue == undefined);
        },
        //设置事件监听
        vOn (type, event, flag) {
            let { column } = this
            if (column.search.props && column.search.props[type]) {
                column.search.props[type](event)
            }
            if (flag == true) {
                this.search(this.searchParam)
            }
        }
    }
}
</script>
