<template>
	<view class="userHeaderBox">
        <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="navigatorToProfile">
                    {{ 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">销售:{{ b2b_user_info.salesBaseInfo.emName }}等3人</text>
            </view>
        </view>
        <view class="userHeadPasBox">
            <view class="userHeadPas column">
                <view class="userHeadPasTop">
                    <view class="userHeadPasT_Num row-sb-n">
                        <view class="column">
                            <text>{{formatNumberWithUnit(1234)}}</text>
                            <text class="userHeadPasTTeT">
                                幸福存折
                            </text>
                        </view>
                        <view class="column">
                            <text>1852</text>
                            <text class="userHeadPasTTeT">
                                我的积分
                            </text>
                        </view>
                        <view class="column">
                            <text>
                                {{formatNumberWithUnit(99999)}}
                            </text>
                            <text class="userHeadPasTTeT">累计已省</text>
                        </view>
                        <view class="column">
                            <text>3</text>
                            <text class="userHeadPasTTeT">优惠券</text>
                        </view>
                    </view>
                </view>
                <view class="userHeadPasButtom column">
                    <view class="userHeadPasButText">
                        再完成
                        <text class="userHeadPasButTNum">4单</text>即可成为
                        <text class="userHeadPasButTVip">VIP</text>享永久折扣！
                        <img class="userHeadPasButImg" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638732528690203686.png"/>
                    </view>
                    <view class="jz_LineDetaVipPr">
                        <view class="jz_LineDetaVPB">
                            <view class="jz_LineDetaVPBBox" v-for="(item,index) in progress"
                            :key="index">
                                <view class="jz_LineDetaVPBLine" :style="{'opacity':index==0?'0':1}"></view>
                                <view class="jz_LineDetaVPBN">{{item.text}}</view>
                                <view class="jz_LineDetaVPBBoxI" v-if="item.img"><img :src="item.img"/></view>
                                <view class="jz_LineDetaVPBLine" v-else></view>
                            </view>
                        </view>
                        <view class="jz_LineDetaVPB jz_LineDetaVPBY">
                            <view class="jz_LineDetaVPBBox" v-for="(item,index) in progress"
                            :key="index"
                            :class="[item.colorStyle]">
                                <view class="jz_LineDetaVPBLine"  :style="{'opacity':index==0?'0':1}"></view>
                                <view class="jz_LineDetaVPBN">{{item.text}}</view>
                                <view class="jz_LineDetaVPBBoxI" v-if="item.img"></view>
                                <view class="jz_LineDetaVPBLine"
                                :class="[item.radiusR]" v-else></view>
                            </view>
                        </view>
                        
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
	export default {
        props:['user_info','b2b_user_info'],
		data() {
			return {
				pageTitle: "个人中心",
				nav: 0,
                progress:[
					{
						text:'1',
						colorStyle: 'active',
						radiusL: '',
						radiusR: '',
					},
					{
						text:'2',
						colorStyle: 'active',
						radiusL: '',
						radiusR: '',
					},
					{
						text:'3',
						colorStyle: 'active',
						radiusL: '',
						radiusR: '',
					},
					{
						text:'4',
						colorStyle: 'active',
						radiusL: '',
						radiusR: '',
					},
					{
						text:'',
						colorStyle: '',
						radiusL: '',
						radiusR: '',
						img:'https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Upload/Goods/638732528736165089.png'
					},
				],
			};
		},
		components: {},
        computed: {
            
        },
		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
			},
		},
	};
</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: -29rpx;
		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: 21rpx 0 40rpx 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>
