<template>
    <div class="pay-order-page">
        <div class="order-container">
            <!-- 订单步骤 -->
            <div class="order-steps">
                <el-steps :active="2" finish-status="success">
                    <el-step title="确认订单" />
                    <el-step title="支付订单" />
                    <el-step title="完成" />
                </el-steps>
            </div>

            <!-- 订单内容 -->
            <div class="order-content">
                <!-- 订单信息 -->
                <div class="order-section">
                    <div class="section-header">
                        <h3>订单信息</h3>
                    </div>
                    <div class="section-body">
                        <div class="info-item">
                            <span class="label">订单编号：</span>
                            <span class="value">{{ g_order.id }}</span>
                        </div>
                        <div class="info-item">
                            <span class="label">订单金额：</span>
                            <span class="value price">¥{{ g_order.totalAmount?.toFixed(2) || '0.00' }}</span>
                        </div>
                    </div>
                </div>

                <!-- 钱包信息 -->
                <div class="order-section">
                    <div class="section-header">
                        <h3>钱包信息</h3>
                    </div>
                    <div class="section-body">
                        <div class="info-item">
                            <span class="label">钱包余额：</span>
                            <span class="value price">¥{{ g_userStore.userInfo.user.money?.toFixed(2) || '0.00'
                                }}</span>
                        </div>
                        <div class="balance-tip" v-if="g_userStore.userInfo.user.money < g_order.totalAmount">
                            <el-icon>
                                <Warning />
                            </el-icon>
                            <span>余额不足，请先充值</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 支付操作 -->
            <div class="order-actions">
                <el-button @click="goBack">返回修改</el-button>
                <el-button type="primary" :disabled="g_userStore.userInfo.user.money < g_order.totalAmount"
                    @click="payOrderClick" :loading="submitting">
                    确认支付
                </el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus';
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/store/index'
import { getOrderDetail, payOrder } from '@/http/api/pages/Order/index'
import { Warning } from '@element-plus/icons-vue'

const g_route = useRoute();
const g_router = useRouter();
const g_userStore = useUserStore();
const g_order = ref({});
const submitting = ref(false);

onMounted(async () => {
    const orderId = g_route.query.orderId;
    if (!orderId) {
        ElMessage.error('订单ID不存在，请重新进入');
        g_router.push({ name: '首页' });
        return;
    }

    try {
        const response = await getOrderDetail(orderId);
        if (response.data) {
            g_order.value = response.data;
        } else {
            ElMessage.error('订单信息获取失败，请刷新页面重试');
        }
    } catch (error) {

        console.error('获取订单信息失败:', error);
        ElMessage.error('获取订单信息失败，请刷新页面重试');
    }
})

const payOrderClick = async () => {
    // 检查订单数据是否存在
    if (!g_order.value || !g_order.value.totalAmount) {
        ElMessage.error('订单信息获取失败，请刷新页面重试');
        return;
    }

    // 检查用户钱包余额
    if (g_userStore.userInfo.user.money < g_order.value.totalAmount) {
        ElMessage.error('钱包余额不足，请先充值！');
        return;
    }

    submitting.value = true;
    try {
        // TODO: 调用支付接口
        var response = await payOrder({ orderId: g_order.value.id });
        if (response.code == 200) {
            // 支付成功后跳转到订单完成页面
            g_router.push({
                name: 'OrderSuccess',
                query: {
                    orderId: g_order.value.id
                }
            });
        } else {
            ElMessageBox.alert(`订单支付失败！请稍候再试！`, '');
        }
    } catch (error) {
        console.error('支付失败:', error);
        ElMessage.error('支付失败，请重试！');
    } finally {
        submitting.value = false;
    }
};

const goBack = () => {
    g_router.back();
};
</script>

<style scoped>
.pay-order-page {
    min-height: calc(100vh - 60px);
    background-color: #f5f7fa;
    padding: 20px;
}

.order-container {
    max-width: 1200px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    padding: 20px;
}

.order-steps {
    margin-bottom: 30px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
}

.order-section {
    margin-bottom: 20px;
    border: 1px solid #ebeef5;
    border-radius: 8px;
    overflow: hidden;
}

.section-header {
    padding: 15px 20px;
    background-color: #f5f7fa;
    border-bottom: 1px solid #ebeef5;
}

.section-header h3 {
    margin: 0;
    font-size: 16px;
    color: #303133;
}

.section-body {
    padding: 20px;
}

.info-item {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.info-item:last-child {
    margin-bottom: 0;
}

.label {
    width: 100px;
    color: #606266;
    font-size: 14px;
}

.value {
    flex: 1;
    color: #303133;
    font-size: 14px;
}

.value.price {
    color: #f56c6c;
    font-size: 18px;
    font-weight: bold;
}

.balance-tip {
    margin-top: 15px;
    padding: 10px;
    background-color: #fef0f0;
    border-radius: 4px;
    color: #f56c6c;
    display: flex;
    align-items: center;
    gap: 8px;
}

.order-actions {
    display: flex;
    justify-content: flex-end;
    gap: 15px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #ebeef5;
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
    .order-container {
        padding: 15px;
    }

    .section-body {
        padding: 15px;
    }

    .info-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .label {
        width: auto;
    }
}
</style>