<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 } from 'vue';
    import ProSearch from '@/components/CommonPage/ProSearch2.vue';

    const emit = defineEmits(['search']);

    const formItems = reactive([
        {
            type: 'datetimerange',
            label: '更新时间',
            prop: 'time',
            props: {
                format: 'YYYY-MM-DD HH:mm:ss',
                valueFormat: 'YYYY-MM-DD HH:mm:ss',
                onChange: (value) => {
                    initKeys.startTime = value ? value[0] : '';
                    initKeys.endTime = value ? value[1] : '';
                    searchRef.value?.setData(initKeys);
                }
            },
            colProps: {
                span: 6
            }
        }
    ]);

    const initKeys = reactive({
        startTime: '',
        endTime: ''
    });

    const searchRef = ref(null);
    function search(data) {
        delete data.time;
        emit('search', { ...data });
    }
</script>
