<template>
    <view class="orderDetailContainer">
        <scroll-view class="contentArea" scroll-y v-if="orderInfo.SALEBILL_ID">
            <!-- 地址信息 + 订单状态 -->
            <view class="addressCard card">
                <view class="statusTag" :class="statusClass">{{ statusName }}</view>
                <view class="userInfo">
                    <text class="userName">{{ orderInfo.ORDER_PERSON || '收货人' }}</text>
                    <text class="userPhone">{{ orderInfo.ORDER_PERSONTEL || '' }}</text>
                </view>
                <view class="addressDetail">
                    <text class="addrText">{{ orderInfo.WAREHOUSE_NAME || '暂无收货地址' }}</text>
                </view>
            </view>

            <!-- 商品明细 -->
            <view class="productCard card">
                <view class="cardHeader">商品明细</view>
                <view class="productList">
                    <view class="productItem" v-for="(item, index) in orderInfo.CommodityList" :key="index">
                        <view class="itemMain">
                            <image class="productImg"
                                :src="item.IMAGE_PATH || 'https://eshangtech.com/ShopICO/no-picture.png'"
                                mode="aspectFill" />
                            <view class="itemInfo">
                                <view class="itemTitle">{{ item.COMMODITY_NAME }}</view>
                                <view class="itemPriceRow">
                                    <view class="price">
                                        <text class="symbol">¥</text>
                                        <text class="val">{{ item.AVERAGE_PRICE }}</text>
                                    </view>
                                    <view class="count">x{{ item.ORDER_COUNT }}</view>
                                </view>
                            </view>
                        </view>
                        <view class="itemRemark" v-if="item.SALEDETAIL_DESC">
                            <text class="remarkLabel">备注：</text>
                            <text class="remarkVal">{{ item.SALEDETAIL_DESC }}</text>
                        </view>
                    </view>
                </view>
            </view>

            <!-- 订单信息 -->
            <view class="infoCard card">
                <view class="infoItem">
                    <text class="label">订单编号</text>
                    <view class="valBox">
                        <text class="val">{{ orderInfo.SALEBILL_CODE }}</text>
                        <text class="copyBtn" @click="handleCopy(orderInfo.SALEBILL_CODE)">复制</text>
                    </view>
                </view>
                <view class="infoItem">
                    <text class="label">下单时间</text>
                    <text class="val">{{ orderInfo.ORDER_DATE }}</text>
                </view>
                <view class="infoItem">
                    <text class="label">配送单位</text>
                    <text class="val">{{ orderInfo.WAREHOUSE_NAME || '' }}</text>
                </view>
            </view>

            <!-- 价格明细 -->
            <view class="financeCard card">
                <view class="financeItem">
                    <text class="label">商品总额</text>
                    <text class="val">¥{{ orderInfo.ORDER_AMOUNT }}</text>
                </view>
                <view class="divider"></view>
                <view class="totalRow">
                    <text class="label">实付款</text>
                    <view class="price">
                        <text class="symbol">¥</text>
                        <text class="val">{{ orderInfo.ORDER_AMOUNT }}</text>
                    </view>
                </view>
            </view>

            <view class="bottomPlaceholder"></view>
        </scroll-view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            menu: {},
            orderInfo: {},
            statusName: '',
            statusClass: ''
        };
    },
    onLoad(options) {
        this.menu = uni.getMenuButtonBoundingClientRect();

        console.log('options', options);

        if (options.id) {
            this.fetchOrderDetail(options.id);
        } else {
            uni.showToast({ title: '参数错误', icon: 'none' });
            setTimeout(() => uni.navigateBack(), 1500);
        }
    },
    methods: {
        handleBack() {
            uni.navigateBack();
        },
        async fetchOrderDetail(id) {
            uni.showLoading({ title: '加载中...' });
            const res = await this.$api.$samemberGet(
                "/EShangApiMain/WeChatMall/GetMallOrderDetail",
                { OrderId: id, WeChat_AppId: "wxee018fb96955552a" }
            );
            console.log('dasjdkasjdas', res);

            if (res.Result_Code === 100) {
                this.orderInfo = res.Result_Data;
                // 处理状态显示
                this.statusName = this.getStatusName(this.orderInfo.SALEBILL_STATE);
                this.statusClass = this.getStatusClass(this.orderInfo.SALEBILL_STATE);
            } else {
                uni.showToast({ title: res.Result_Desc, icon: 'none' });
            }
        },
        getStatusName(state) {
            const states = {
                1090: '待发货',
                2000: '备货中',
                2010: '已发货',
                3000: '已接收',
                4000: '已完成'
            };
            return states[state] || '';
        },
        // 根据状态返回对应的样式类
        getStatusClass(state) {
            if (state === 1090 || state === 2000) return 'status-pending';
            if (state === 2010) return 'status-shipping';
            if (state === 3000 || state === 4000) return 'status-done';
            return 'status-pending';
        },
        handleCopy(text) {
            uni.setClipboardData({
                data: text,
                success: () => uni.showToast({ title: '复制成功', icon: 'none' })
            });
        }
    }
};
</script>

<style lang="less" scoped>
.orderDetailContainer {
    width: 100%;
    min-height: 100vh;
    background-color: #f2f4f5;
    display: flex;
    flex-direction: column;

    .navBar {
        background: #fff;
        width: 100%;
        position: sticky;
        top: 0;
        z-index: 100;

        .navContent {
            display: flex;
            align-items: center;
            padding: 0 30rpx;

            .backBtn {
                width: 60rpx;
                display: flex;
                align-items: center;

                .backIcon {
                    width: 40rpx;
                    height: 40rpx;
                }
            }

            .navTitle {
                flex: 1;
                text-align: center;
                font-size: 32rpx;
                font-weight: bold;
                color: #333;
            }

            .placeholder {
                width: 60rpx;
            }
        }
    }

    .contentArea {
        flex: 1;
        padding: 20rpx;
        box-sizing: border-box;

        .card {
            background: #fff;
            border-radius: 16rpx;
            padding: 24rpx;
            margin-bottom: 20rpx;
            box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
        }

        .statusBanner {
            background: linear-gradient(90deg, #1890ff, #4ea4ff);
            padding: 40rpx 30rpx;
            border-radius: 16rpx;
            margin-bottom: 20rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .statusLeft {
                color: #fff;

                .statusText {
                    font-size: 40rpx;
                    font-weight: bold;
                    margin-bottom: 8rpx;
                }

                .statusTip {
                    font-size: 24rpx;
                    opacity: 0.9;
                }
            }

            .statusIcon {
                width: 100rpx;
                height: 100rpx;
                opacity: 0.8;
            }
        }

        .addressCard {
            position: relative;
            padding-bottom: 30rpx;

            .statusTag {
                position: absolute;
                top: 20rpx;
                right: 20rpx;
                font-size: 24rpx;
                font-weight: 500;
                padding: 6rpx 20rpx;
                border-radius: 20rpx;
                letter-spacing: 2rpx;
            }

            .userInfo {
                margin-bottom: 10rpx;

                .userName {
                    font-size: 32rpx;
                    font-weight: bold;
                    color: #333;
                    margin-right: 20rpx;
                }

                .userPhone {
                    font-size: 28rpx;
                    color: #666;
                }
            }

            .addrText {
                font-size: 26rpx;
                color: #333;
                line-height: 38rpx;
            }

            .addressLine {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 6rpx;
            }
        }

        .productCard {
            .cardHeader {
                font-size: 30rpx;
                font-weight: bold;
                color: #333;
                margin-bottom: 24rpx;
            }

            .productItem {
                margin-bottom: 30rpx;

                &:last-child {
                    margin-bottom: 0;
                }

                .itemMain {
                    display: flex;

                    .productImg {
                        width: 140rpx;
                        height: 140rpx;
                        border-radius: 12rpx;
                        background: #f9f9f9;
                    }

                    .itemInfo {
                        flex: 1;
                        margin-left: 20rpx;
                        display: flex;
                        flex-direction: column;
                        justify-content: space-between;

                        .itemTitle {
                            font-size: 28rpx;
                            color: #333;
                            line-height: 40rpx;
                        }

                        .itemPriceRow {
                            display: flex;
                            justify-content: space-between;

                            .price {
                                color: #333;

                                .symbol {
                                    font-size: 24rpx;
                                }

                                .val {
                                    font-size: 32rpx;
                                    font-weight: 500;
                                }

                                .unit {
                                    font-size: 24rpx;
                                    color: #999;
                                }
                            }

                            .count {
                                color: #999;
                                font-size: 26rpx;
                            }
                        }
                    }
                }

                .itemRemark {
                    margin-top: 20rpx;
                    background: #f7f8f9;
                    padding: 12rpx 20rpx;
                    border-radius: 8rpx;
                    font-size: 24rpx;

                    .remarkLabel {
                        color: #999;
                    }

                    .remarkVal {
                        color: #666;
                    }
                }
            }
        }

        .infoCard {
            .infoItem {
                display: flex;
                justify-content: space-between;
                margin-bottom: 24rpx;

                &:last-child {
                    margin-bottom: 0;
                }

                .label {
                    color: #999;
                    font-size: 26rpx;
                }

                .val {
                    color: #333;
                    font-size: 26rpx;
                }

                .valBox {
                    display: flex;
                    align-items: center;

                    .copyBtn {
                        margin-left: 10rpx;
                        color: #1890ff;
                        font-size: 24rpx;
                        padding: 0 10rpx;
                    }
                }
            }
        }

        .financeCard {
            .financeItem {
                display: flex;
                justify-content: space-between;
                margin-bottom: 20rpx;

                .label {
                    color: #666;
                    font-size: 26rpx;
                }

                .val {
                    color: #333;
                    font-size: 26rpx;
                }
            }

            .divider {
                height: 1rpx;
                background: #f0f0f0;
                margin: 20rpx 0;
            }

            .totalRow {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .label {
                    font-size: 30rpx;
                    font-weight: bold;
                    color: #333;
                }

                .price {
                    color: #ff4d4f;

                    .symbol {
                        font-size: 26rpx;
                    }

                    .val {
                        font-size: 40rpx;
                        font-weight: bold;
                    }
                }
            }
        }

        .bottomPlaceholder {
            height: 40rpx;
        }
    }
}

/* 状态标签颜色类 - 放在根级别确保 scoped 生效 */
.status-pending {
    color: #e67e22;
    background: rgba(230, 126, 34, 0.1);
}

.status-shipping {
    color: #1890ff;
    background: rgba(24, 144, 255, 0.1);
}

.status-done {
    color: #27ae60;
    background: rgba(39, 174, 96, 0.1);
}
</style>
