<!-- 回收明细搜索组件 -->
<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, getCurrentInstance } from 'vue';
    import ProSearch from '@/components/CommonPage/ProSearch2.vue';

    defineOptions({ name: 'RecycleSearch' });

    let { proxy } = getCurrentInstance();
    const emit = defineEmits(['search']);

    const formItems = reactive([
        { type: 'input', label: '发货人姓名', prop: 'sendName' },
        { type: 'input', label: '发货人电话', prop: 'sendMobile' },
        { type: 'input', label: '发货人地址', prop: 'sendSsq' },
        {
            type: 'daterange',
            label: '日期范围',
            prop: 'dateRange',
            keys: ['startTime', 'endTime'],
            colProps: { span: 6 },
            props: {
                format: 'YYYY-MM-DD',
                valueFormat: 'YYYY-MM-DD',
                onChange: (val) => {
                    searchRef.value?.setData({
                        startTime: val && val.length > 0 ? val[0] : '',
                        endTime: val && val.length > 0 ? val[1] : ''
                    });
                }
            }
        }
    ]);

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

    const searchRef = ref(null);

    /** 搜索 */
    const search = (data) => {
        let params = JSON.parse(JSON.stringify(data));
        delete params.dateRange;
        emit('search', params);
    };

    /** 重置 */
    const reset = () => {
        searchRef.value?.reset();
    };

    defineExpose({
        reset
    });
</script>
