<!-- 搜索表单 -->
<template>
    <ele-card :body-style="{ paddingBottom: '8px' }">
        <ProSearch
            :items="formItems"
            ref="searchRef"
            @search="search"
            :initKeys="initKeys"
        />
    </ele-card>
</template>

<script setup>
    import { reactive, ref, defineEmits, computed } from 'vue';
    import ProSearch from '@/components/CommonPage/ProSearch2.vue';

    defineOptions({ name: 'PageSearch' });

    const emit = defineEmits(['search']);
    const searchRef = ref(null);

    // 初始值
    const initKeys = reactive({
        isbn: '',
        operateUser: '',
        pushStatus: '',
        pushRes: '',
        createTimeStart: '',
        createTimeEnd: '',
        pushTimeStart: '',
        pushTimeEnd: '',
        createTimeRange: [],
        pushTimeRange: []
    });

    // 表单项定义
    const formItems = computed(() => {
        return [
            {
                type: 'input',
                label: 'ISBN',
                prop: 'bookIsbn'
            },
            {
                type: 'input',
                label: '处理人',
                prop: 'operateUser'
            },
            {
                type: 'dictSelect',
                label: '是否推送',
                prop: 'pushStatus',
                props: {
                    code: 'book_stat_is_push'
                }
            },
            {
                type: 'dictSelect',
                label: '推送状态',
                prop: 'pushRes',
                props: {
                    code: 'book_stat_push_status'
                }
            },
            {
                type: 'datetimerange',
                label: '创建时间',
                prop: 'createTimeRange',
                props: {
                    valueFormat: 'YYYY-MM-DD HH:mm:ss',
                    format: 'YYYY-MM-DD HH:mm:ss',
                    startPlaceholder: '开始日期',
                    endPlaceholder: '结束日期',
                    onChange: (value) => {
                        initKeys.createTimeStart = value ? value[0] : '';
                        initKeys.createTimeEnd = value ? value[1] : '';
                        initKeys.createTimeRange = value || [];
                        searchRef.value?.setData({
                            createTimeStart: initKeys.createTimeStart,
                            createTimeEnd: initKeys.createTimeEnd,
                            createTimeRange: initKeys.createTimeRange
                        });
                    }
                },
                colProps: {
                    span: 8
                }
            },
            {
                type: 'datetimerange',
                label: '推送时间',
                prop: 'pushTimeRange',
                props: {
                    valueFormat: 'YYYY-MM-DD HH:mm:ss',
                    format: 'YYYY-MM-DD HH:mm:ss',
                    startPlaceholder: '开始日期',
                    endPlaceholder: '结束日期',
                    onChange: (value) => {
                        initKeys.pushTimeStart = value ? value[0] : '';
                        initKeys.pushTimeEnd = value ? value[1] : '';
                        initKeys.pushTimeRange = value || [];
                        searchRef.value?.setData({
                            pushTimeStart: initKeys.pushTimeStart,
                            pushTimeEnd: initKeys.pushTimeEnd,
                            pushTimeRange: initKeys.pushTimeRange
                        });
                    }
                },
                colProps: {
                    span: 8
                }
            }
        ];
    });

    // 搜索
    const search = (data) => {
        const params = JSON.parse(JSON.stringify(data));
        delete params.createTimeRange;
        delete params.pushTimeRange;
        emit('search', params);
    };
</script>
