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

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

    const emit = defineEmits(['search']);
    const formItems = computed(() => {
        return [
            { type: 'input', label: '活动名称', prop: 'activityName' },
            {
                type: 'select',
                label: '状态',
                prop: 'status',
                options: [
                    { label: '开启', value: '1' },
                    { label: '关闭', value: '0' }
                ]
            },
            {
                type: 'daterange',
                label: '开始时间',
                prop: 'timeRange',
                style: {
                    minWidth: '300px'
                },
                props: {
                    valueFormat: 'YYYY-MM-DD HH:mm:ss',
                    format: 'YYYY-MM-DD HH:mm:ss',
                    startPlaceholder: '开始日期',
                    endPlaceholder: '结束日期',
                    defaultTime: [
                        new Date(2000, 1, 1, 0, 0, 0),
                        new Date(2000, 1, 1, 23, 59, 59)
                    ]
                }
            }
        ];
    });

    const initKeys = reactive({
        activityName: '',
        status: '',
        timeRange: []
    });

    const searchRef = ref(null);
    /** 搜索 */
    const search = (data) => {
        const params = { ...data };
        if (params.timeRange && params.timeRange.length === 2) {
            params.startTimeStart = params.timeRange[0];
            params.startTimeEnd = params.timeRange[1];
        }
        delete params.timeRange;
        emit('search', params);
    };
</script>
