<!-- 搜索表单 -->
<template>
    <ProSearch :items="formItems" @search="search" :initKeys="initKeys" />
</template>

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

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

    const formItems = computed(() => [
        {
            type: 'input',
            label: '用户ID',
            prop: 'userId',
            props: { placeholder: '请输入用户ID' }
        },
        {
            type: 'input',
            label: '订单ID',
            prop: 'orderId',
            props: { placeholder: '请输入订单ID' }
        },
        {
            type: 'daterange',
            label: '参与时间',
            prop: 'timeRange',
            colProps: {
                span: 8
            },
            props: {
                valueFormat: 'YYYY-MM-DD HH:mm:ss',
                startPlaceholder: '开始时间',
                endPlaceholder: '结束时间'
            }
        }
    ]);

    const initKeys = reactive({
        userId: '',
        orderId: '',
        timeRange: []
    });

    const search = (data) => {
        const params = { ...data };
        if (params.timeRange && params.timeRange.length === 2) {
            params.startTime = params.timeRange[0];
            params.endTime = params.timeRange[1];
        }
        delete params.timeRange;
        emit('search', params);
    };
</script>
