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

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

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

    // 仓库列表
    const godownList = ref([]);
    function getStoreList(name = '') {
        return proxy.$http.post(`/baseinfo/godown/searchGodown?name=${name}`);
    }
    getStoreList().then((res) => {
        godownList.value = res.data.data;
    });
    // 用户列表
    const userList = ref([]);
    function getUserList(query = '') {
        return proxy.$http.get(`/system/user/list?username=${query}`);
    }

    const formItems = computed(() => {
        return [
            {
                type: 'select',
                label: '仓库名称',
                prop: 'godownId',
                options: godownList.value.map((item) => ({
                    label: item.godownName,
                    value: item.id
                }))
            },
            { type: 'input', label: '出库库位', prop: 'positionCode' },
            { type: 'input', label: '物流单号', prop: 'waybillCode' },
            { type: 'input', label: '订单编号', prop: 'orderId' },
            { type: 'input', label: '出库单号', prop: 'stockCode' },
            // {
            //     type: 'select',
            //     label: '操作员',
            //     prop: 'userId',
            //     options: userList.value.map((item) => ({
            //         label: item.userName,
            //         value: item.userId
            //     })),
            //     props: {
            //         filterable: true,
            //         remote: true,
            //         reserveKeyword: true,
            //         remoteMethod: (query) => {
            //             getUserList(query).then((res) => {
            //                 userList.value = res.data.rows;
            //             });
            //         }
            //     }
            // },
            { type: 'input', label: '员工姓名', prop: 'userName' },
            { type: 'input', label: '反馈', prop: 'remark' },
            {
                type: 'datetimerange',
                label: '出库时间',
                prop: 'dateRange',
                startProp: 'startTime',
                endProp: 'endTime',
                colProps: { span: 6 },
                props: {
                    format: 'YYYY-MM-DD HH:mm:ss',
                    valueFormat: 'YYYY-MM-DD HH:mm:ss',
                    rangeSeparator: '至',
                    onChange: (val) => {
                        searchRef.value?.setData({
                            startTime: val?.[0] || '',
                            endTime: val?.[1] || ''
                        });
                    }
                }
            }
        ];
    });

    const initKeys = reactive({
        godownId: '',
        positionCode: '',
        waybillCode: '',
        orderId: '',
        stockCode: '',
        userId: '',
        remark: '',
        startTime: '',
        endTime: '',
        dateRange: []
    });

    const searchRef = ref(null);

    /** 搜索 */
    const search = (data) => {
        emit('search', { ...data });
    };
</script>
