<template>
    <ele-modal
        :width="1200"
        v-model="visible"
        title="订单详情"
        @open="onOpen"
        :body-style="{
            maxHeight: '80vh',
            overflow: 'auto',
            padding: '20px',
            backgroundColor: '#f5f7fa'
        }"
        top="5vh"
    >
        <div v-loading="loading">
            <!-- Status Steps -->
            <ele-card class="mb-4">
                <el-steps
                    :active="activeStep"
                    align-center
                    finish-status="success"
                >
                    <el-step
                        title="提交订单"
                        :description="detail.createTime"
                    />
                    <el-step title="支付订单" :description="detail.payTime" />
                    <el-step
                        title="平台发货"
                        :description="detail.deliveryTime"
                    />
                    <el-step
                        title="确认收货"
                        :description="detail.receiptTime"
                    />
                    <el-step
                        title="完成评价"
                        :description="detail.finishTime"
                    />
                </el-steps>
            </ele-card>

            <!-- Order Base Info Component -->
            <order-base-info
                :detail="detail"
                @add-package="openAddPackage"
                @edit-receiver="handleEditReceiver"
                class="mb-4"
            />

            <!-- Product List Component -->
            <order-product-list :detail="detail" class="mb-4" />
        </div>

        <!-- Action Buttons Footer -->
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="visible = false">关闭</el-button>
                <el-button type="success" @click="openPushSms"
                    >推送短信</el-button
                >
                <el-button type="warning" @click="openRefund"
                    >缺货退款</el-button
                >
            </div>
        </template>
    </ele-modal>
</template>

<script setup>
    import { ref, reactive, computed } from 'vue';
    import { EleMessage } from 'ele-admin-plus/es';
    import OrderBaseInfo from './order-base-info.vue';
    import OrderProductList from './order-product-list.vue';
    import request from '@/utils/request';

    import { useDictData } from '@/utils/use-dict-data';

    const visible = defineModel({ type: Boolean });
    const detail = ref({});
    const loading = ref(false);

    const emit = defineEmits(['push-sms', 'refund', 'add-package']);

    const [shop_order_status] = useDictData(['shop_order_status']);

    const activeStep = computed(() => {
        const status = detail.value.status;
        if (status === '1') return 1; // 等待买家付款
        if (status === '2') return 2; // 等待卖家发货
        if (status === '3') return 3; // 等待买家确认收货
        if (status === '4') return 5; // 已完成
        return 1; // Default
    });

    const getStatusText = (status) => {
        const item = shop_order_status.value.find((d) => d.dictValue == status);
        return item ? item.dictLabel : status;
    };

    const handleOpen = (row) => {
        visible.value = true;
        loading.value = true;
        request
            .get(`/shop/shopOrder/getInfo/${row.orderId}`)
            .then((res) => {
                const data = res.data.data || res.data;
                detail.value = data;
                detail.value.statusText = getStatusText(data.status);
            })
            .finally(() => {
                loading.value = false;
            });
    };

    // Exposed method for parent to call
    const onOpen = () => {
        // This is called by ele-modal @open, but we need data passed.
        // However, handleOpen is called by parent ref.
        // We can rely on handleOpen being called explicitly.
    };

    const openAddPackage = () => {
        emit('add-package', detail.value);
    };

    const handleEditReceiver = () => {
        EleMessage.info('功能开发中');
    };

    const openPushSms = () => {
        emit('push-sms', detail.value);
    };

    const openRefund = () => {
        emit('refund', detail.value);
    };

    defineExpose({
        handleOpen
    });
</script>
