<template>
    <div class="order-base-info">
        <ele-card header="订单基本信息">
            <div class="info-layout">
                <!-- Left Column: Order Info -->
                <div class="info-column">
                    <div class="info-item">
                        <span class="label">订单编号：</span>
                        <span class="value">{{ detail.orderId }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">订单来源：</span>
                        <span class="value">
                            <span v-if="detail.orderFrom == 1">微信小程序</span>
                            <span v-else-if="detail.orderFrom == 2"
                                >支付宝小程序</span
                            >
                            <span v-else>商城小程序</span>
                            <el-image
                                v-if="[1, 2].includes(detail.orderFrom)"
                                :src="
                                    detail.orderFrom == 2 ? alipayIcon : wxIcon
                                "
                                style="
                                    width: 16px;
                                    height: 16px;
                                    margin-left: 4px;
                                    vertical-align: text-bottom;
                                "
                            />
                        </span>
                    </div>
                    <div class="info-item">
                        <span class="label">支付渠道：</span>
                        <span class="value">
                            <dict-data
                                v-if="detail.payType"
                                code="shop_order_pay_type"
                                type="text"
                                :model-value="detail.payType"
                            />
                            <span v-else>-</span>
                        </span>
                    </div>
                    <div class="info-item">
                        <span class="label">交易状态：</span>
                        <span class="value">
                            <dict-data
                                v-if="detail.status"
                                code="shop_order_status"
                                type="tag"
                                :model-value="detail.status"
                            />
                            <span v-else>-</span>
                        </span>
                    </div>
                    <div class="info-item">
                        <span class="label">平台备注：</span>
                        <span class="value">{{
                            detail.remark || '正常发货'
                        }}</span>
                    </div>
                </div>

                <!-- Center Column: User/Receiver Info -->
                <div class="info-column">
                    <div class="info-item">
                        <span class="label">用户名：</span>
                        <span class="value">{{ detail.userNick }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">收 件 人：</span>
                        <span class="value">{{ detail.receiverName }}</span>
                        <el-button
                            link
                            type="success"
                            class="ml-2"
                            @click="$emit('edit-receiver')"
                            >修改</el-button
                        >
                    </div>
                    <div class="info-item">
                        <span class="label">电 话：</span>
                        <span class="value">{{
                            formatPhone(detail.receiverMobile)
                        }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">地 址：</span>
                        <span class="value">{{ detail.receiverAddress }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">用户备注：</span>
                        <span
                            class="value"
                            :style="{ color: detail.remark ? '#f56c6c' : '' }"
                            >{{ detail.remark || '无' }}</span
                        >
                    </div>
                    <div
                        class="info-item warning-text"
                        v-if="detail.outOfStock"
                    >
                        <span class="label" style="color: #f56c6c"
                            >如遇缺货：</span
                        >
                        <span class="value" style="color: #f56c6c">{{
                            getOutOfStockText(detail.outOfStock)
                        }}</span>
                    </div>
                </div>

                <!-- Right Column: Logistics Info -->
                <div class="info-column">
                    <div class="info-item">
                        <span class="label">发货物流：</span>
                        <span class="value">{{
                            detail.expressName || '-'
                        }}</span>
                    </div>
                    <div class="info-item">
                        <span class="label">发货单号：</span>
                        <span class="value">{{
                            detail.waybillCode || '-'
                        }}</span>

                        <el-popover
                            placement="bottom"
                            title="物流动态"
                            :width="400"
                            trigger="hover"
                        >
                            <template #reference>
                                <el-button
                                    link
                                    type="success"
                                    class="ml-2"
                                    v-if="detail.waybillCode"
                                    >查看</el-button
                                >
                            </template>
                            <el-timeline
                                style="max-height: 400px; overflow-y: auto"
                                v-if="
                                    detail.trackingVoList &&
                                    detail.trackingVoList.length > 0
                                "
                            >
                                <el-timeline-item
                                    v-for="(
                                        activity, index
                                    ) in detail.trackingVoList"
                                    :key="index"
                                    :timestamp="activity.ftime"
                                    :type="index === 0 ? 'success' : ''"
                                    :color="index === 0 ? '#0bbd87' : ''"
                                >
                                    <div>
                                        <div
                                            style="margin-bottom: 5px"
                                            v-if="activity.status"
                                        >
                                            <el-tag
                                                size="small"
                                                :type="
                                                    index === 0
                                                        ? 'success'
                                                        : 'info'
                                                "
                                                >{{ activity.status }}</el-tag
                                            >
                                        </div>
                                        <div
                                            style="
                                                color: #606266;
                                                font-size: 13px;
                                                line-height: 1.5;
                                            "
                                            >{{ activity.context }}</div
                                        >
                                    </div>
                                </el-timeline-item>
                            </el-timeline>
                            <el-empty
                                v-else
                                description="暂无物流信息"
                                :image-size="60"
                            />
                        </el-popover>
                    </div>

                    <div class="action-area mt-2" v-if="detail.status >= 3">
                        <el-button type="success" @click="$emit('add-package')"
                            >新增额外包裹
                            <el-icon class="el-icon--right">
                                <Lightning /> </el-icon
                        ></el-button>
                    </div>

                    <div class="status-tags mt-2">
                        <el-tag
                            :type="detail.status >= 3 ? 'success' : 'warning'"
                            effect="dark"
                            class="mr-2"
                        >
                            {{ detail.status >= 3 ? '已发货' : '未发货' }}
                        </el-tag>
                        <el-tag
                            :type="detail.status == 5 ? 'success' : 'warning'"
                            effect="dark"
                        >
                            {{ detail.status == 5 ? '已完成' : '未完成' }}
                        </el-tag>
                    </div>
                </div>
            </div>
        </ele-card>
    </div>
</template>

<script setup>
    import { Lightning } from '@element-plus/icons-vue';
    import { EleMessage } from 'ele-admin-plus/es';
    import { ref } from 'vue';
    import wxIcon from '@/assets/wx.png';
    import alipayIcon from '@/assets/alipay.png';
    import { formatPhone } from '@/utils/common';

    const props = defineProps({
        detail: {
            type: Object,
            required: true,
            default: () => ({})
        }
    });

    defineEmits(['add-package', 'edit-receiver']);

    const getOutOfStockText = (value) => {
        const map = {
            1: '缺货时电话与我沟通',
            2: '其他商品继续发货（缺货商品退款）',
            3: '有缺货直接取消订单'
        };
        return map[value] || value;
    };
</script>

<style scoped>
    .order-base-info {
        font-size: 13px;
    }

    .info-layout {
        display: flex;
        gap: 20px;
    }

    .info-column {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .info-item {
        display: flex;
        align-items: flex-start;
        line-height: 1.4;
    }

    .label {
        color: #909399;
        width: 70px;
        flex-shrink: 0;
    }

    .value {
        color: #303133;
        word-break: break-all;
    }

    .action-area {
        margin-top: auto;
    }
</style>
