<template>
	<view class="userHeaderBox" v-if="statistics">
        <view class="titlenav" :style="{ paddingTop: nav }">{{ pageTitle   }}</view>
        <view class="userHeadPic row">
            <view class="userHeadPicL">
                <u-avatar :src="b2b_user_info.photo?b2b_user_info.photo:user_info.avatar" size="97" shape="circle"></u-avatar>
                <!-- <image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638748795455095258.png" mode="widthFix"></image> -->
            </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>
                <text class="userHeadPicR_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>0">等{{statistics.saleList.length}}位</template><!-- #endif -->
                </text>
            </view>
        </view>
        <view class="userHeadPasBox">
            <view class="userHeadPas column">
                <view class="userHeadPasTop">
                    <view class="userHeadPasT_Num row-sb-n" v-if="statistics.balance>=0">
                        <!-- #ifdef MP-AG-->
                        <view class="column">
                            <text>{{formatNumberWithUnit(statistics.balance)}}</text>
                            <text class="userHeadPasTTeT">
                                幸福存折
                            </text>
                        </view>
                        <!-- #endif -->
                        <view class="column">
                            <text>{{ statistics.integral }}</text>
                            <text class="userHeadPasTTeT">
                                我的积分
                            </text>
                        </view>
                        <view class="column">
                            <text>
                                {{formatNumberWithUnit(statistics.totalSavings)}}
                            </text>
                            <text class="userHeadPasTTeT">累计已省</text>
                        </view>
                        <view class="column" @click="goUrl('/pages/coupon/index/index')">
                            <text>{{ statistics.couponNum }}</text>
                            <text class="userHeadPasTTeT">优惠券</text>
                        </view>
                    </view>
                </view>
                <view class="userHeadPasButtom column">
                    <view class="userHeadPasButText">
                        再完成
                        <text class="userHeadPasButTNum">{{statistics&&statistics.vipCondition?(statistics.vipCondition-statistics.vipOrderCount):''}}单</text>即可成为
                        <text class="userHeadPasButTVip">VIP</text>享永久折扣！
                        <img class="userHeadPasButImg" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638732528690203686.png"/>
                    </view>
                    <vipUser :statistics="statistics"></vipUser>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import vipUser from "@/components/vip/vipUser.vue"; 
	export default {
        props:['user_info','statistics','b2b_user_info'],
        components: {vipUser},
		data() {
			return {
				pageTitle: "个人中心",
				nav: 0,
                progress:[],

			};
		},
		
        computed: {
            
        },
        watch:{
            statistics:{
                handler(newVal,oldVal){
                    
                },
                deep:true,
            }	
        },
		created() {
			
        },
		onLoad() {
			this.nav = uni.getSystemInfoSync().statusBarHeight + "px";
		},
		mounted() {
			
		},
		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
                        })
                        return
                    // #endif
                }
                uni.navigateTo({
                    url:url
                })
            }
		},
	};
</script>

<style lang="scss" scoped>
    @import url("@/asset/css/flex.css");
	.userHeaderBox{
        width: 750rpx;
        // height: 622rpx;
        background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638748787642081151.png')no-repeat;
        background-size: 100% 100%;
        padding-top: 118rpx;
        margin-bottom: 40rpx;
    }
    .titlenav {
		width: 100%;
		text-align: center;
		font-size: 16px;
		color: #000;
	}
    .userHeadPic{
        padding: 49rpx 20rpx 25rpx 62rpx;
    }
    .userHeadPicL{
        width: 97rpx;
        height: 97rpx;
        overflow: hidden;
        border-radius: 50%;
        margin-right: 27rpx;
    }
    .userHeadPicL image{
        width: 97rpx;
        height: 97rpx;
        display: block;
    }
    .userHeadPicR_title{
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 36rpx;
        color: #080A09;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .userHeadPicR_text{
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #61462E;
        margin-top: 16rpx;
        letter-spacing: 1rpx;
    }
    .jz_LineDetaVipPr{
		margin-top: 28rpx;
		// position: relative;
		// left: -20rpx;
	}
	.jz_LineDetaVip{
		width: 100%;
		height: 120rpx;
		background: linear-gradient(90deg, #3F423F, #313131);
		border-radius: 18rpx;
		display: flex;
		flex-direction: column;
		padding: 15rpx 0 6rpx 0;
		margin-top: 18rpx;
		margin-bottom: 18rpx;
	}
	.jz_LineDetaVipTop{
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #E2C27A;
		letter-spacing: .1rpx;
		display: flex;
		align-content: center;
		padding: 0 34rpx;
	}
	.jz_LineDetaVipTop img{
		width: 21rpx;
		height: 21rpx;
		display: inline-block;
		margin-left: 5rpx;
	}
	.jz_LineDetaVPB{
		display: flex;
		
	}
	.jz_LineDetaVPBBox{
		display: flex;
		align-items: center;
		width: 1px;
		flex: 1;
	}
	.jz_LineDetaVPBN{
		width: 30rpx;
		height: 30rpx;
		background: #2E2E2E;
		border-radius: 50%;
		text-align: center;
		line-height: 28rpx;
		font-family: DIN Black;
		font-weight: bold;
		font-size: 24rpx;
		color:  #494949;;
	}
	.jz_LineDetaVPBLine{
		flex: 1;
		height: 10rpx;
		background: #000;
	}
	.jz_LineDetaVPBBoxI{
		position: relative;
		flex: 1;
	}
	.jz_LineDetaVPBBoxI img{
		width: 87rpx;
		height: 99rpx;
		position: absolute;
		bottom: -35rpx;
		right: 8rpx;
		z-index: 2;
	}
	.jz_LineDetaVPBBox.active .jz_LineDetaVPBN{
		background: linear-gradient(270deg, #C99E59, #FFFFB3);
	}
	.jz_LineDetaVPBBox.active .jz_LineDetaVPBLine{
		background: #C99E59;
		color: #583F2C;
	}
    .VPBLRadiusL{
		border-radius: 20rpx 0 0 20rpx ;
	}
	.VPBLRadiusR{
		border-radius: 0 20rpx 20rpx 0;
	}
	.jz_LineDetaVPBY{
		position: absolute;
		left: -0;
		right: 0;
		top: 0;
	}
    .userHeadPasBox{
        padding: 0 31rpx;
    }
    .userHeadPas{
        background: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638748814839963880.png')no-repeat;
        background-size: 100% 100%;
    }
    .userHeadPasTop{
        padding: 41rpx 40rpx 50rpx 40rpx;
    }
    .userHeadPasTop view{
        text-align: center;
    }
    .userHeadPasT_Num{
        font-size: 34rpx;
        color: #4F360D;
        font-weight: bold;
    }
    .userHeadPasTTeT{
        font-weight: 500;
        font-size: 28rpx;
        color: #4F360D;
        padding-top: 7rpx;
    }
    .userHeadPasButtom{
        padding: 30rpx 0 50rpx 39rpx;
    }
    .userHeadPasButText{
        font-family: PingFang SC;
        font-weight: bold;
        font-size: 24rpx;
        color: #F9E5B3;
    }
    .userHeadPasButTNum{
        color: #FF3166;
    }
    .userHeadPasButTVip{
        font-size: 41rpx;
        font-style: italic;
        margin-right: 15rpx;
    }
    .userHeadPasButImg{
        width: 21rpx;
        height: 21rpx;
        margin-left: 21rpx;
    }
    
</style>
