<script setup>
import { orderService } from '@/api/orderService';
import { formatDate } from '@/utils/date';
import Badge from 'primevue/badge';
import Button from 'primevue/button';
import Column from 'primevue/column';
import ConfirmDialog from 'primevue/confirmdialog';
import DataTable from 'primevue/datatable';
import InputText from 'primevue/inputtext';
import ProgressSpinner from 'primevue/progressspinner';
import Toast from 'primevue/toast';
import { useConfirm } from 'primevue/useconfirm';
import { useToast } from 'primevue/usetoast';
import { onMounted, ref } from 'vue';

const toast = useToast();
const confirm = useConfirm();

const globalFilterValue = ref('');
const loading = ref(false);
const refunding = ref(false);
const searchTimeout = ref(null);
const filters = ref({
    global: { value: null, matchMode: 'contains' },
    status: { value: null, matchMode: 'equals' }
});

const orders = ref({
    items: [],
    total: 0,
    page: 1,
    limit: 10
});

const first = ref(0);
const rows = ref(10);

//  pending, paid, refund_success, refund_closed, refund_processing, refund_abnormal, cancelled, completed
const orderStatusMap = [
    { label: '待支付', severity: 'secondary' },
    { label: '已支付', severity: 'success' },
    { label: '已退款', severity: 'warn' },
    { label: '退款关闭', severity: 'info' },
    { label: '退款中', severity: 'info' },
    { label: '退款异常', severity: 'warn' },
    { label: '已取消', severity: 'danger' },
    { label: '已完成', severity: 'success' }
];

const formatPrice = (price) => {
    return (price / 100).toFixed(2);
};

const getDiscountAmount = (price, discount) => {
    return (price * (100 - discount) / 100);
};

const getFinalPrice = (price, discount) => {
    return price - getDiscountAmount(price, discount);
};

const handleRefund = (id) => {
    confirm.require({
        message: '确定要对此订单进行退款操作吗？',
        header: '退款确认',
        icon: 'pi pi-exclamation-triangle',
        rejectProps: {
            label: '取消',
            icon: 'pi pi-times',
            outlined: true,
            size: 'small'
        },
        acceptProps: {
            label: '确认',
            icon: 'pi pi-check',
            size: 'small'
        },
        acceptClass: 'p-button-warn',
        accept: () => {
            refundOrder(id);
        }
    });
};

const refundOrder = async (id) => {
    refunding.value = true;
    try {
        await orderService.refund(id)
        fetchOrders();
    } catch (error) {
        console.error('Failed to refund orders:', error);
        toast.add({ severity: 'error', summary: '错误', detail: ' 退款失败', life: 3000 });
    } finally {
        refunding.value = false;
    }
}

const fetchOrders = async () => {
    loading.value = true;
    try {
        const currentPage = (first.value / rows.value) + 1;
        const response = await orderService.get({
            page: currentPage,
            limit: rows.value,
            keyword: globalFilterValue.value
        });
        orders.value = response.data;
    } catch (error) {
        console.error('Failed to fetch orders:', error);
        toast.add({ severity: 'error', summary: '错误', detail: '加载订单数据失败', life: 3000 });
    } finally {
        loading.value = false;
    }
};

const onPage = (event) => {
    first.value = event.first;
    rows.value = event.rows;
    fetchOrders();
};

const onSearch = (event) => {
    if (searchTimeout.value) {
        clearTimeout(searchTimeout.value);
    }

    searchTimeout.value = setTimeout(() => {
        first.value = 0;
        fetchOrders();
    }, 300);
};

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

<template>
    <Toast />
    <ConfirmDialog />

    <div class="w-full">
        <div class="flex justify-between items-center mb-6">
            <h1 class="text-2xl font-semibold text-gray-800">订单列表</h1>
        </div>

        <div class="card">
            <div class="pb-10 flex">
                <InputText v-model="globalFilterValue" placeholder="搜索订单..." class="flex-1" @input="onSearch" />
            </div>

            <DataTable v-model:filters="filters" :value="orders.items" :paginator="true" :rows="rows"
                :totalRecords="orders.total" :loading="loading" :lazy="true" :first="first" @page="onPage"
                paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
                :rowsPerPageOptions="[10, 25, 50]"
                currentPageReportTemplate="显示第 {first} 到 {last} 条，共 {totalRecords} 条结果" dataKey="id"
                :globalFilterFields="['order_no', 'user_id']" stripedRows removableSort class="p-datatable-sm"
                responsiveLayout="scroll">

                <template #empty>
                    <div class="text-center p-4">未找到订单。</div>
                </template>

                <template #loading>
                    <div class="flex flex-col items-center justify-center p-4">
                        <ProgressSpinner style="width:50px;height:50px" />
                        <span class="mt-2">加载订单数据...</span>
                    </div>
                </template>

                <Column field="id" header="ID" sortable></Column>
                <Column field="order_no" header="订单号" sortable>
                    <template #body="{ data }">
                        <div class="flex flex-col">
                            <span class="text-gray-700">系统订单号: {{ data.order_no }}</span>
                            <span class="text-gray-500">商户订单号: {{ data.transaction_id || '-' }}</span>
                            <span class="text-orange-500">退款订单号: {{ data.refund_transaction_id || '-' }}</span>
                        </div>
                    </template>
                </Column>
                <Column field="status" header="状态" sortable>
                    <template #body="{ data }">
                        <Badge :value="orderStatusMap[data.status]?.label"
                            :severity="orderStatusMap[data.status]?.severity" />
                    </template>
                </Column>
                <Column field="user_id" header="用户ID" sortable>
                    <template #body="{ data }">
                        <div class="flex flex-col">
                            <span class="text-gray-700">用户名: {{ data.username }}</span>
                            <span class="text-gray-500">ID: {{ data.user_id || '-' }}</span>
                        </div>
                    </template>
                </Column>
                <Column field="post_id" header="曲谱ID" sortable>
                    <template #body="{ data }">
                        <div class="flex flex-col">
                            <span class="text-gray-700"> 标题: {{ data.post_title }}</span>
                            <span class="text-gray-500">ID: {{ data.post_id || '-' }}</span>
                        </div>
                    </template>
                </Column>
                <Column field="price" header="价格信息" sortable>
                    <template #body="{ data }">
                        <div class="flex flex-col">
                            <span class="text-gray-500">原价: ¥{{ formatPrice(data.price) }}</span>
                            <span class="text-orange-500">优惠: -¥{{ formatPrice(getDiscountAmount(data.price,
                                data.discount)) }}</span>
                            <span class="font-bold">实付: ¥{{ formatPrice(getFinalPrice(data.price, data.discount))
                                }}</span>
                        </div>
                    </template>
                </Column>

                <Column field="updated_at" header="时间信息" sortable>
                    <template #body="{ data }">
                        <div class="flex flex-col">
                            <span class="text-gray-500">更新: {{ formatDate(data.updated_at) }}</span>
                            <span class="text-gray-400">创建: {{ formatDate(data.created_at) }}</span>
                        </div>
                    </template>
                </Column>
                <Column field="actions" header="操作">
                    <template #body="{ data }">
                        <Button v-if="data.status === 7" icon="pi pi-replay" severity="danger"
                            class="text-nowrap! px-8!" size="small" @click="handleRefund(data.id)" :loading="refunding">
                            退款
                        </Button>
                    </template>
                </Column>
            </DataTable>
        </div>
    </div>
</template>
