<template>
    <ele-card :body-style="{ paddingBottom: '8px' }">
        <ProSearch ref="proSearchRef" :items="formItems" @search="search" />

        <!-- Quick Actions -->
        <div
            class="flex items-center space-x-4 mt-2 px-4 border-t pt-2 border-gray-100"
        >
            <div
                class="flex items-center cursor-pointer select-none"
                @click="toggleMyPending"
            >
                <span class="text-gray-600 font-medium mr-2">快捷查询:</span>
                <span
                    class="px-3 py-1 rounded-full text-sm transition-colors duration-200"
                    :class="
                        myHandleWorkOrder == 1
                            ? 'bg-blue-100 text-blue-600'
                            : 'bg-gray-100 text-gray-500 hover:bg-gray-200'
                    "
                >
                    待我完成
                    <span
                        v-if="myPendingCount > 0"
                        class="ml-1 font-bold text-red-500"
                        >({{ myPendingCount }})</span
                    >
                </span>
            </div>
        </div>
    </ele-card>
</template>

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

    const props = defineProps({
        myPendingCount: {
            type: Number,
            default: 0
        },
        orderType: {
            type: String,
            default: 'sell' // 'sell' 或 'recycle'
        }
    });

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

    const proSearchRef = ref(null);
    const myHandleWorkOrder = ref(0);

    const formItems = computed(() => {
        const items = [
            {
                type: 'dictSelect',
                label: '任务状态',
                prop: 'status',
                props: { code: 'work_order_status' },
                colProps: { span: 3 }
            },
            {
                type: 'dictSelect',
                label: '任务类型',
                prop: 'taskType',
                props: {
                    code:
                        props.orderType === 'sell'
                            ? 'sell_task_type'
                            : 'task_type'
                },
                colProps: { span: 3 }
            }
        ];

        // 验货状态只在卖书工单显示
        if (props.orderType === 'sell') {
            items.push({
                type: 'dictSelect',
                label: '验货状态',
                prop: 'inspectionStatus',
                props: { code: 'inspection_status' },
                colProps: { span: 3 }
            });
        }

        // 订单编号只在回收工单显示
        if (props.orderType === 'recycle') {
            items.push({
                type: 'input',
                label: '订单编号',
                prop: 'orderId',
                placeholder: '请输入订单编号',
                colProps: { span: 3 }
            });
        }

        items.push(
            {
                type: 'input',
                label: '运单号',
                prop: 'waybillCode',
                placeholder: '请输入运单号'
            },
            {
                type: 'datetimerange',
                label: '创建时间',
                prop: 'createTime',
                colProps: { span: 6 } // Make date range wider
            }
        );

        return items;
    });

    const toggleMyPending = () => {
        myHandleWorkOrder.value = myHandleWorkOrder.value === 0 ? 1 : 0;
        // Trigger search in ProSearch to get current form data
        if (proSearchRef.value) {
            proSearchRef.value.search();
        }
    };

    const search = (data) => {
        const params = { ...data };

        // Handle date range
        if (
            params.createTime &&
            Array.isArray(params.createTime) &&
            params.createTime.length === 2
        ) {
            params.createTimeStart = params.createTime[0];
            params.createTimeEnd = params.createTime[1];
            delete params.createTime;
        }

        // Add quick action state
        params.myHandleWorkOrder = myHandleWorkOrder.value;

        emit('search', params);
    };
</script>
