<template>
    <view class="main">
        <!-- 固定头部 Logo (复刻 user/index.vue) -->
        <view class="fixedHeader" :style="{ height: menu.bottom + 16 + 'px' }">
            <image class="YDIcon" src="https://eshangtech.com/caiyunyiImg/home/yunnanLogo.svg" />
        </view>

        <!-- 用户页面头部 (复刻 user/index.vue) -->
        <view class="pageTop" :style="{ paddingTop: menu.bottom + 16 + 'px' }">
            <view class="userTopInfo">
                <view class="userInfoBox">
                    <view class="headerImgBox">
                        <view class="avatarBtn">
                            <image class="headerImg" :src="userInfo.MEMBERSHIP_HEADIMAGEURL || ''" />
                        </view>
                    </view>
                    <view class="userInfo">
                        <view class="userInfoLeft">
                            <view class="userName">{{ userInfo.MEMBERSHIP_NAME || '微信用户' }}</view>
                            <view class="userLevelBox">
                                <view class="userLevel" v-if="userInfo.MEMBERSHIP_LEVEL_TEXT">
                                    <image class="userLevelIcon"
                                        src="https://eshangtech.com/caiyunyiImg/levelIcon2.png" />
                                    <view class="userLevelName">{{ userInfo.MEMBERSHIP_LEVEL_TEXT }}</view>
                                </view>
                            </view>
                            <view class="userPhone" v-if="userInfo.MEMBERSHIP_MOBILEPHONE">{{
                                formatPhone(userInfo.MEMBERSHIP_MOBILEPHONE) }}</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 我的订单 -->
        <view class="pageContent">
            <view class="userOrder">
                <view class="userOrderTop">
                    <view class="userOrderTitle">我的订单</view>
                </view>
                <view class="userOrderBottom">
                    <view class="userOrderBottomItem" @click="goOrderList('1090,2000')">
                        <image class="userOrderBottomItemImg" src="/static/images/home/shipmentIcon.svg" />
                        <view class="userOrderBottomItemText">待发货</view>
                        <view class="orderCount" v-if="orderCounts[0] > 0">{{ orderCounts[0] }}</view>
                    </view>
                    <view class="userOrderBottomItem" @click="goOrderList('2010')">
                        <image class="userOrderBottomItemImg" src="/static/images/home/receiptOfGoods.svg" />
                        <view class="userOrderBottomItemText">已发货</view>
                        <view class="orderCount" v-if="orderCounts[1] > 0">{{ orderCounts[1] }}</view>
                    </view>
                    <view class="userOrderBottomItem" @click="goOrderList('3000,4000')">
                        <image class="userOrderBottomItemImg" src="/static/images/home/evaluatedIcon.svg" />
                        <view class="userOrderBottomItemText">已接收</view>
                        <view class="orderCount" v-if="orderCounts[2] > 0">{{ orderCounts[2] }}</view>
                    </view>
                </view>
            </view>
        </view>

        <!-- 底部 Tabbar -->
        <own-water-tabbar :page="'/pages/ownWater/waterOrder'" :shopCarLength="totalCartCount" />
    </view>
</template>

<script>
import ownWaterTabbar from "@/components/ownWaterTabbar.vue";
import { mapGetters } from "vuex";

export default {
    components: {
        ownWaterTabbar
    },
    data() {
        return {
            menu: {},
            userInfo: {},
            orderCounts: [0, 0, 0],
            totalCartCount: 0
        };
    },
    computed: {
        ...mapGetters(["user"])
    },
    onLoad() {
        this.menu = uni.getMenuButtonBoundingClientRect();
        this.refreshData();
    },
    onShow() {
        this.refreshData();
    },
    methods: {
        refreshData() {
            this.userInfo = uni.getStorageSync("userData") || this.user || {};
            this.handleGetOrderList();
        },
        formatPhone(phone) {
            if (!phone) return "";
            return phone.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
        },
        goOrderList(status) {
            uni.navigateTo({
                url: `/pages/ownWater/waterOrderList?status=${status}`
            });
        },
        // 拿到订单信息并统计各状态数量
        async handleGetOrderList() {
            try {
                const res = await this.$api.$samemberGet('/EShangApiMain/WeChatMall/GetMallOrderList', {
                    WeChat_AppId: "wxee018fb96955552a",
                    MembershipId: this.user.MEMBERSHIP_ID,
                    orderState: '1090,2000,2010,3000,4000'
                })
                let list = (res.Result_Data && res.Result_Data.List) || [];
                // 按状态分组统计
                let pending = 0;   // 待发货：1090, 2000
                let shipped = 0;   // 已发货：2010
                let received = 0;  // 已接收：3000, 4000
                list.forEach(item => {
                    const state = item.SALEBILL_STATE;
                    if (state === 1090 || state === 2000) {
                        pending++;
                    } else if (state === 2010) {
                        shipped++;
                    } else if (state === 3000 || state === 4000) {
                        received++;
                    }
                });
                this.orderCounts = [pending, shipped, received];
            } catch (e) {
                console.error('获取订单列表失败', e);
                this.orderCounts = [0, 0, 0];
            }
        }
    }
};
</script>

<style lang="less" scoped>
.main {
    width: 100vw;
    min-height: 100vh;
    background-image: url("https://eshangtech.com/minTestImg/pageBg.png");
    background-repeat: no-repeat;
    background-size: 100% 100vh;
    background-color: #f5f5f5;

    .fixedHeader {
        width: 100vw;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        display: flex;
        align-items: flex-end;
        background-image: url("https://eshangtech.com/minTestImg/pageBg.png");
        background-repeat: no-repeat;
        background-size: 100% 100vh;

        .YDIcon {
            width: 176rpx;
            height: 48rpx;
            margin-left: 32rpx;
            margin-bottom: 16px;
        }
    }

    .pageTop {
        width: 100vw;
        box-sizing: border-box;

        .userTopInfo {
            width: calc(100vw - 64rpx);
            margin-left: 32rpx;
            background: linear-gradient(270deg, #27b25f 0%, #4ccc7f 100%);
            border-radius: 16rpx;

            .userInfoBox {
                width: 100%;
                box-sizing: border-box;
                padding: 40rpx 42rpx;
                display: flex;
                align-items: center;

                .headerImgBox {
                    width: 136rpx;
                    height: 136rpx;

                    .avatarBtn {
                        width: 136rpx;
                        height: 136rpx;
                        border-radius: 50%;
                        border: 1px solid #fff;
                        overflow: hidden;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        .headerImg {
                            width: 100%;
                            height: 100%;
                        }
                    }
                }

                .userInfo {
                    flex: 1;
                    margin-left: 34rpx;
                    display: flex;
                    align-items: center;

                    .userInfoLeft {
                        flex: 1;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;

                        .userName {
                            font-family: PingFangSC, PingFang SC;
                            font-weight: 500;
                            font-size: 30rpx;
                            color: #ffffff;
                            line-height: 42rpx;
                        }

                        .userLevelBox {
                            margin-top: 4rpx;

                            .userLevel {
                                display: inline-flex;
                                align-items: center;
                                background-color: #fff;
                                padding: 0 14rpx;
                                border-radius: 32rpx;

                                .userLevelIcon {
                                    width: 20rpx;
                                    height: 20rpx;
                                    margin-right: 8rpx;
                                }

                                .userLevelName {
                                    font-size: 20rpx;
                                    color: #716f69;
                                    line-height: 30rpx;
                                }
                            }
                        }

                        .userPhone {
                            font-size: 24rpx;
                            color: #ffffff;
                            margin-top: 16rpx;
                            opacity: 0.9;
                        }
                    }
                }
            }
        }
    }

    .pageContent {
        width: 100%;
        box-sizing: border-box;
        padding: 0 32rpx;
        margin-top: 24rpx;

        .userOrder {
            width: 100%;
            background: #ffffff;
            border-radius: 14rpx;
            box-sizing: border-box;
            padding: 22rpx 34rpx;

            .userOrderTop {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .userOrderTitle {
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 600;
                    font-size: 28rpx;
                    color: #222222;
                    line-height: 40rpx;
                }
            }

            .userOrderBottom {
                width: 100%;
                display: flex;
                margin-top: 42rpx;

                .userOrderBottomItem {
                    width: 33.33%;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    position: relative;

                    .userOrderBottomItemImg {
                        width: 48rpx;
                        height: 48rpx;
                        margin-bottom: 16rpx;
                    }

                    .userOrderBottomItemText {
                        font-family: PingFangSC, PingFang SC;
                        font-size: 24rpx;
                        color: #000;
                        line-height: 36rpx;
                    }

                    .orderCount {
                        position: absolute;
                        top: -10rpx;
                        right: 40rpx;
                        min-width: 28rpx;
                        height: 28rpx;
                        background: red;
                        color: #fff;
                        border-radius: 50%;
                        font-size: 20rpx;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }
            }
        }
    }
}
</style>
