<template>
	<view class="userHeaderBox"
    :style="[titleStyle]">
        <view class="titlenav" :style="{ paddingTop: nav }">{{ pageTitle   }}</view>
        <view class="userHeadPic row">
            <view class="userHeadPicL">
                <u-avatar v-if="b2b_user_info.photo||statistics.image" :src="b2b_user_info.photo?b2b_user_info.photo:statistics.image" size="70" shape="circle"></u-avatar>
                <u-avatar v-else src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638748864186439447.png" size="70" shape="circle"></u-avatar>
            </view>
            <view class="col column">
                <text v-if="b2b_user_info&&b2b_user_info.name" 
                class="userHeadPicR_title" @click="goUrl('/pages/user-center/user-profile')">
                    {{ b2b_user_info.name }}
                </text>
                <text v-else-if="mall_UserInfo&&mall_UserInfo.Name" 
                class="userHeadPicR_title">
                    {{mall_UserInfo.Name}}
                </text>
                <text v-else class="userHeadPicR_title" @click="login(user_info)">
                    立即登录
                </text>
                <view class="userHeadPicR_VIP">
                    <image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/202502111735vip.png"/>
                </view>
            </view>
        </view>
        <view class="userHeadInfoBox">
            <view class="userHeadInfo">
                <view class="userHeadInfo_Name">
                    <template v-if="b2b_user_info&&b2b_user_info.name">{{ b2b_user_info.name }}</template>
                    <template v-if="mall_UserInfo&&mall_UserInfo.Name" >{{ mall_UserInfo.Name }}</template>
                </view>
                <view class="userHeadInfo_text" v-if="statistics.saleList&&statistics.saleList.length>0">
                    <!-- #ifdef MP-DI -->销售:{{ b2b_user_info.salesBaseInfo.emName }}<!-- #endif -->
                    <!-- #ifdef MP-AG -->销售:{{ statistics.saleList[0].saleName }}<template v-if="statistics.saleList.length>1">等{{statistics.saleList.length}}位</template><!-- #endif -->
                </view>
                <image class="userHeadInfo_vip"  mode="aspectFit"
                style="width: 385rpx;height: 49rpx;"
                src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/202502111735zk.png" />
                <view class="userHeadPasTop">
                    <view class="userHeadPasT_Num row-sbs-n" v-if="statistics">
                        <!-- #ifdef MP-AG-->
                        <view class="column" @click="goUrl('/pages/user-center/happinessPassbook')">
                            <text>{{ statistics.balance>0?formatNumberWithUnit(statistics.balance):0}}</text>
                            <text class="userHeadPasTTeT">
                                幸福存折
                            </text>
                        </view>
                         <!-- #endif -->
                        <view class="column" @click="goUrl('/pages/user-center/points')">
                            <text>{{ statistics.integral>0?statistics.integral:0 }}</text>
                            <text class="userHeadPasTTeT">
                                我的积分
                            </text>
                        </view>
                        <view class="column" @click="goUrl('/pages/user-center/costSavingStatistics')">
                            <text>{{statistics.totalSavings>0?formatNumberWithUnit(statistics.totalSavings):0}}</text>
                            <text class="userHeadPasTTeT">累计已省</text>
                        </view>
                        <view class="column" @click="goUrl('/pages/coupon/index/index')">
                            <text class="userHeadPasTextb">{{ statistics.couponNum>=0?statistics.couponNum:0 }}</text>
                            <text class="userHeadPasTTeT">优惠券</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        
    </view>
</template>

<script>
	export default {
        props:['b2b_user_info','statistics'],
		data() {
			return {
				pageTitle: "个人中心",
				nav: 0,
                titleStyle: {}
			};
		},
		components: {},
		created() {
			
		},
		onLoad() {
			this.nav = uni.getSystemInfoSync().statusBarHeight + "px";
			
		},
		mounted() {
			const that = this
            uni.getSystemInfo({
                success(res) {
                    that.titleStyle = {
                    paddingTop: `${res.statusBarHeight}px`
                    };
                },
            });
		},
		onShow() {
			
		},
		methods: {
            formatNumberWithUnit(num) {
                if (num === 0) return '0.00';
                const units = ['', 'K', 'M', 'B', 'T']; // 单位数组：千(k)、百万(M)、十亿(B)、万亿(T)
                const exponent = Math.floor(Math.log10(num));
                const unitIndex = Math.max(0, Math.floor(exponent / 3)) - 1; // 计算单位索引
                // 缩放数值并保留三位有效数字
                const scaledNum = num / (10 ** (unitIndex * 3));
                const formatted = scaledNum.toLocaleString('en-US', { 
                    precision: 3, // 保留三位有效数字
                    rounding: 'round-trip' // 四舍五入
                });
                // 处理科学计数法（如 1.23e3 → 1230）
                if (formatted.includes('e')) {
                    const [significand, exp] = formatted.split('e');
                    return significand + '0'.repeat(parseInt(exp)) + units[unitIndex + 1];
                }
                if(formatted.substring(3,4)==',') return formatted.substring(0,3) + units[unitIndex + 1];
                return formatted.substring(0,4) + units[unitIndex + 1];
            },
            login(name) {
				if ((name && name.nickname == "") || !name || !name.nickname) {
					this.$emit('login')
				}
			},
			navigatorToProfile(){
				// #ifdef MP-DI
				uni.navigateTo({
					url:'/pages/user-center/user-profile'
				})
				// #endif
				
			},
            goUrl(url){
                if(url=='/pages/user-center/user-profile'){
                    // #ifdef MP-DI
                        uni.navigateTo({
                            url:url
                        })
                    // #endif
                    return
                }
                uni.navigateTo({
                    url:url
                })
            }
		},
	};
</script>

<style lang="scss" scoped>
    @import url("@/asset/css/flex.css");
	.userHeaderBox{
        width: 750rpx;
        height: 827rpx;
        background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638748788146223914.png')no-repeat;
        background-size: 100% 100%;
        padding-top: 118rpx;
    }
    .titlenav {
		width: 100%;
		text-align: center;
		font-size: 16px;
		color: #FFF;
        margin-top: 15rpx;
	}
    .userHeadPic{
        padding: 37rpx 20rpx 78rpx 54rpx;
    }
    .userHeadPicL{
        width: 70rpx;
        height: 70rpx;
        overflow: hidden;
        border-radius: 50%;
        margin-right: 16rpx;
    }
    .userHeadPicL image{
        width: 70rpx;
        height: 70rpx;
        display: block;
    }
    .userHeadPicR_title{
        font-family: PingFang SC;
        font-size: 28rpx;
        color: #C4B799;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .userHeadPicR_VIP{
        padding-top: 3rpx;
    }
    .userHeadPicR_VIP image{
        width: 81rpx;
        height: 26rpx;
        display: block;
    }
    .userHeadInfoBox{
        padding: 0 35rpx;
    }
    .userHeadInfo{
        width: 680rpx;
        height: 508rpx;
        background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/20250211.png')no-repeat;
        background-size: 100% 100%;
        position: relative;
        top: -92rpx;
        padding: 78rpx 20rpx 55rpx 44rpx;
    }
    .userHeadInfo_Name{
        font-family: PingFang SC;
        font-weight: 800;
        font-size: 44rpx;
        color: #F1D492;
    }
    .userHeadInfo_text{
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #AB9D83;
        letter-spacing: 1rpx;
        padding-top: 16rpx;
    }
    .userHeadInfo_vip{
        display: block;
        padding-top: 29rpx;
    }
    .userHeadPasTop{
        padding: 120rpx 0 50rpx 0;
    }
    .userHeadPasTop view{
        text-align: center;
        font-size: 34rpx;
        font-weight: bold;
    }
    .userHeadPasT_Num{
        font-size: 34rpx;
        font-weight: bold;
        color: #E2C27A;
    }
    .userHeadPasTTeT{
        font-size: 28rpx;
        color: #987C3D;
        font-weight: 100;
        padding-top: 7rpx;
    }
</style>
