<template>
    <ele-page flex-table>
        <page-search @search="handleSearch" />

        <ele-card :body-style="{ padding: '10px 16px' }">
            <!-- Tabs -->
            <el-tabs
                v-model="activeTab"
                type="card"
                @tab-click="handleTabClick"
            >
                <el-tab-pane label="全部订单状态" name="all" />
                <el-tab-pane
                    v-for="item in shop_order_status"
                    :key="item.dictValue"
                    :label="item.dictLabel"
                    :name="item.dictValue"
                />
            </el-tabs>

            <!-- Custom Table Header -->
            <order-table-header />

            <!-- Order List -->
            <div class="order-list" v-loading="loading">
                <div v-if="list.length === 0" class="empty-text">暂无数据</div>
                <order-item
                    v-for="order in list"
                    :key="order.orderId"
                    :order="order"
                    @view-detail="openDetail"
                    @view-refund-detail="openRefundDetail"
                    @push-sms="openSms"
                    @refund="openRefund"
                    @view-log="openLog"
                    @add-remark="openRemark"
                    @manual-delivery="openManualDelivery"
                />
            </div>

            <!-- Pagination -->
            <div class="pagination-wrapper">
                <el-pagination
                    v-model:current-page="pageParams.pageNum"
                    v-model:page-size="pageParams.pageSize"
                    :total="total"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange"
                    @current-change="handlePageChange"
                />
            </div>
        </ele-card>

        <!-- Dialogs -->
        <order-detail
            ref="detailRef"
            @push-sms="openSms"
            @refund="openRefund"
            @add-package="openAddPackage"
        />
        <refund-detail-dialog ref="refundDetailRef" />
        <push-sms-dialog ref="smsRef" />
        <refund-dialog ref="refundRef" @success="fetchData" />
        <add-package-dialog ref="packageRef" />
        <order-log ref="logRef" />
        <order-remarks ref="remarkRef" @refresh="fetchData" />
        <manual-delivery-dialog ref="manualDeliveryRef" @success="fetchData" />
    </ele-page>
</template>

<script setup>
    import { ref, reactive, onMounted } from 'vue';
    import PageSearch from './components/page-search.vue';
    import OrderDetail from './components/order-detail.vue';
    import RefundDetailDialog from '@/views/mallOrder/refund/components/refund-detail-dialog.vue';
    import PushSmsDialog from './components/push-sms-dialog.vue';
    import RefundDialog from './components/refund-dialog.vue';
    import AddPackageDialog from './components/add-package-dialog.vue';
    import OrderLog from './components/order-log.vue';
    import OrderTableHeader from './components/order-table-header.vue';
    import OrderItem from './components/order-item.vue';
    import OrderRemarks from './components/order-remarks.vue';
    import ManualDeliveryDialog from './components/manual-delivery-dialog.vue';
    import request from '@/utils/request';
    import { useDictData } from '@/utils/use-dict-data';

    defineOptions({ name: 'MallOrderAll' });

    const activeTab = ref('all');
    const loading = ref(false);
    const total = ref(0);
    const pageParams = reactive({
        pageNum: 1,
        pageSize: 10
    });
    const searchParams = ref({});

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

    const list = ref([]);
    const detailRef = ref(null);
    const refundDetailRef = ref(null);
    const smsRef = ref(null);
    const refundRef = ref(null);
    const packageRef = ref(null);
    const logRef = ref(null);
    const remarkRef = ref(null);
    const manualDeliveryRef = ref(null);

    const fetchData = () => {
        loading.value = true;
        const params = {
            ...pageParams,
            ...searchParams.value
        };

        // Handle Tab Filter
        if (activeTab.value !== 'all') {
            params.status = activeTab.value;
        }

        request
            .get('/shop/shopOrder/pagelist', { params })
            .then((res) => {
                const data = res.data;
                total.value = data.total || 0;
                list.value = data.rows || [];
            })
            .finally(() => {
                loading.value = false;
            });
    };

    const handleSearch = (data) => {
        pageParams.pageNum = 1;
        searchParams.value = data;
        fetchData();
    };

    const handleTabClick = (tab) => {
        activeTab.value = tab.props.name;
        pageParams.pageNum = 1;
        fetchData();
    };

    const handleSizeChange = (val) => {
        pageParams.pageSize = val;
        fetchData();
    };

    const handlePageChange = (val) => {
        pageParams.pageNum = val;
        fetchData();
    };

    const openDetail = (row) => {
        detailRef.value?.handleOpen(row);
    };

    const openRefundDetail = (row) => {
        refundDetailRef.value?.handleOpen(row);
    };

    const openSms = (row) => {
        smsRef.value?.handleOpen(row);
    };

    const openRefund = (row) => {
        refundRef.value?.handleOpen(row);
    };

    const openAddPackage = (row) => {
        packageRef.value?.handleOpen(row);
    };

    const openLog = (row) => {
        logRef.value?.handleOpen(row.orderId);
    };

    const openRemark = (row) => {
        remarkRef.value?.open(row.orderId);
    };

    const openManualDelivery = (row) => {
        manualDeliveryRef.value?.open(row);
    };

    onMounted(() => {
        fetchData();
    });
</script>

<style scoped>
    .order-list {
        min-height: 200px;
    }

    .empty-text {
        text-align: center;
        padding: 40px;
        color: #909399;
    }

    .pagination-wrapper {
        margin-top: 16px;
        display: flex;
        justify-content: flex-end;
    }
</style>
