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

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

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

    const godownList = ref([]);
    const provinceList = ref([]);
    function getProviceList(id = 1) {
        return proxy.$http.get(`/baseinfo/districtInfo/findInfo/${id}`);
    }
    getProviceList().then((res) => {
        provinceList.value = res.data.data;
    });

    const formItems = computed(() => {
        return [
            {
                type: 'select',
                label: '省份',
                prop: 'provinceId',
                options: provinceList.value.map((d) => {
                    return { label: d.district, value: d.id };
                }),
                props: {
                    filterable: true,
                    multiple: true,
                    onChange: (value) => {
                        searchRef.value?.setData({
                            provinceIdList: value
                        });
                    }
                }
            },
            {
                type: 'select',
                label: '收货仓库',
                prop: 'godownId',
                options: godownList.value.map((item) => ({
                    label: item.godownName,
                    value: item.id
                })),
                props: {
                    placeholder: '请选择收货仓库',
                    clearable: true
                }
            },
            {
                type: 'daterange',
                label: '统计日期',
                prop: 'time',
                props: {
                    format: 'YYYY-MM-DD',
                    valueFormat: 'YYYY-MM-DD',
                    onChange: (value) => {
                        searchRef.value?.setData({
                            statDateStart: value ? value[0] : '',
                            statDateEnd: value ? value[1] : ''
                        });
                    }
                },
                colProps: {
                    span: 6
                }
            }
        ];
    });

    const initKeys = reactive({
        statDateStart: '',
        statDateEnd: '',
        godownId: '',
        provinceIdList: []
    });

    function getStoreList(name = '') {
        return proxy.$http.post(`/baseinfo/godown/searchGodown?name=${name}`);
    }
    getStoreList().then((res) => {
        godownList.value = res.data.data;
    });

    const searchRef = ref(null);
    /** 搜索 */
    const search = (data) => {
        const searchParams = {
            godownId: data.godownId,
            statDateStart: data.statDateStart || initKeys.statDateStart,
            statDateEnd: data.statDateEnd || initKeys.statDateEnd,
            provinceIdList:
                data.provinceIdList.join(',') ||
                initKeys.provinceIdList.join(',')
        };
        emit('search', searchParams);
    };
</script>
