<template>
    <ele-card :body-style="{ paddingBottom: '8px' }">
        <div class="flex items-start">
            <div class="flex flex-col gap-[12px]">
                <div class="flex items-center gap-2 w-full">
                    <el-select
                        class="w-[120px] flex-1"
                        v-model="initKeys.timeType"
                        @change="handleTimeTypeChange"
                    >
                        <el-option label="创建时间" :value="1" />
                        <el-option label="完成时间" :value="2" />
                    </el-select>
                    <el-radio-group
                        v-model="initKeys.timeRangeType"
                        @change="handleTimeRangeTypeChange"
                    >
                        <el-radio label="今天" :value="1" />
                        <el-radio label="近7天" :value="2" />
                        <el-radio label="近30天" :value="3" />
                    </el-radio-group>
                </div>
                <el-date-picker
                    format="YYYY-MM-DD HH:mm:ss"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    v-model="timeRange"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    @change="handleTimeRangeChange"
                    end-placeholder="结束日期"
                />
            </div>

            <ProSearch
                class="flex-1 ml-8"
                :items="formItems"
                ref="searchRef"
                @search="search"
                :initKeys="initKeys"
            />
        </div>
    </ele-card>
</template>

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

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

    const searchRef = ref(null);
    const initKeys = reactive({
        godownId: '',
        positionCode: '',
        waybillCode: '',
        orderId: '',
        taskCode: '',
        operator: '',
        remark: '',
        taskStatus: '',
        startTime: '',
        endTime: '',
        timeType: 1,
        timeRangeType: 1
    });

    /** 搜索 */
    const search = (data) => {
        if (data.isReset) {
            handleTimeRangeTypeChange(1);
            return;
        }
        emit('search', { ...data });
    };

    const timeRange = ref([]);
    const handleTimeRangeChange = (val) => {
        timeRange.value = val;
        searchRef.value?.setData({
            startTime: val?.[0] || '',
            endTime: val?.[1] || ''
        });
    };
    const handleTimeTypeChange = (val) => {
        initKeys.timeType = val;
        searchRef.value?.setData({
            timeType: val
        });
    };

    const handleTimeRangeTypeChange = (val) => {
        initKeys.timeRangeType = val;
        const now = dayjs();
        const end = now.endOf('day').format('YYYY-MM-DD HH:mm:ss');

        let start;
        switch (val) {
            case 1: // 今天
                start = now.startOf('day').format('YYYY-MM-DD HH:mm:ss');
                break;
            case 2: // 近7天
                start = now
                    .subtract(6, 'day')
                    .startOf('day')
                    .format('YYYY-MM-DD HH:mm:ss');
                break;
            case 3: // 近30天
                start = now
                    .subtract(29, 'day')
                    .startOf('day')
                    .format('YYYY-MM-DD HH:mm:ss');
                break;
        }

        initKeys.startTime = start;
        initKeys.endTime = end;
        timeRange.value = [start, end];
        searchRef.value?.setData({
            startTime: start,
            endTime: end,
            timeRangeType: val
        });

        search(initKeys);
    };
    onMounted(() => {
        handleTimeRangeTypeChange(1);
    });

    const formItems = computed(() => {
        return [
            {
                type: 'select',
                label: '仓库名称',
                prop: 'godownId',
                options: godownList.value.map((d) => {
                    return { label: d.godownName, value: d.id };
                }),
                props: {
                    placeholder: '请选择或输入搜索',
                    filterable: true
                },
                colProps: {
                    span: 6
                }
            },
            {
                type: 'input',
                label: '下架库位',
                prop: 'positionCode',
                colProps: { span: 6 }
            },
            {
                type: 'input',
                label: '物流单号',
                prop: 'waybillCode',
                colProps: { span: 6 }
            },
            {
                type: 'input',
                label: '订单编号',
                prop: 'orderId',
                colProps: { span: 6 }
            },
            {
                type: 'input',
                label: '作业编号',
                prop: 'taskCode',
                colProps: { span: 6 }
            },
            {
                type: 'input',
                label: '操作员',
                prop: 'operator',
                colProps: { span: 6 }
            },
            {
                type: 'input',
                label: '备注',
                prop: 'remark',
                colProps: { span: 6 }
            },
            {
                type: 'dictSelect',
                label: '作业状态',
                prop: 'taskStatus',
                props: { code: 'task_status' },
                colProps: { span: 6 }
            }
        ];
    });

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