<template>
	<view class="userStyle" >
		<view class="headStatus" v-if="scrollTop > 50" :style="[headStyle,
		    {
		      zIndex: scrollTop < 10 ? 'unset' : 2,
		      opacity: scrollTop < 10 ? '100' : scrollTop,
		    },
		  ]">
			<view class="title" style="color: #000;" v-if="scrollTop > 50">{{pageTitle}}</view>
		</view>
		<view class="userBox" :style="{ 'margin-bottom': bottommargin }">
			<view 
			 class="imgbg"  style="background:linear-gradient( #9EE3E1,5%, #f3f4f6);height: auto;">
				<view class="titlenav" :style="{paddingTop:nav,color:'#000'}">{{pageTitle}}</view>
				<view class='topheard'  style="margin-top: 30px;justify-content: space-between;"
				 v-if="meueData.user_center.top_style == 1" @click="goperson()">
				 <view style="display: flex;flex-direction: row;align-items: center;">
					 <view style="width: 140rpx;height: 140rpx;position: relative;margin-left: 50rpx;">
						 <u-avatar :src="user_info.avatar" size="140" ></u-avatar>
						 <image v-if="user_info.Sex==1" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nan.png" style="width: 32rpx;height: 32rpx;position: absolute;right: 0px;bottom: 0;"></image>
						 <image v-if="user_info.Sex==2" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/basic-nv.png" style="width: 32rpx;height: 32rpx;position: absolute;right: 0px;bottom: 0;"></image>
					 </view>
					 
					 <view style="display: flex;flex-direction: column;justify-content: center;height: 50px;margin-left: 20rpx">
					 	<Text style="color: #000000;font-size: 40rpx;max-width: 200px;overflow: hidden;display: inline-block;white-space: nowrap; text-overflow:ellipsis;"
					 	 @click="login(user_info)">{{ user_info.nickname ? user_info.nickname : '立即登录' }}</Text>
						 <view style="display: flex;align-items: center;">
							 <view class="member" v-if="is_icon_members_grade == 1&& user_info.nickname" style="margin-right: 5px;">
							 	<image :src="user_info.identity.level_icon" mode="aspectFill" style="width: 22px;height: 22px;border-radius: 11px;"></image>
							 	<Text style="margin-right: 10px;">{{ user_info.identity.level_name != null ? user_info.identity.level_name : '普通用户' }}</Text>
							 </view>
							 <view class="renzhen" v-if="user_info.isAttestation==0 " >
							 	未认证
							 </view>
							 <view class="renzhen" v-if="user_info.isAttestation==1"  :style="{'border':'1px solid '+mainColor,'color':mainColor}">
							 	已认证
							 </view>
						 </view>
					 	
					 </view>
				 </view>
					
					<u-icon name="arrow" color="#A5A4AC" size="40" style='margin-right: 10px;'></u-icon>
				</view>
				<view style="display: flex;flex-direction: column;align-items: center;margin-top: 23px;margin-bottom: 5px;" v-if="meueData.user_center.top_style == 2">
					<u-avatar :src="user_info.avatar" size="120"></u-avatar>
					<Text style="color: #000000;font-size: 40rpx;" @click="login(user_info)">{{ user_info.nickname ? user_info.nickname : '立即登录' }}</Text>
					<view class="member" v-if="is_icon_members_grade == 1&&user_info.nickname">
						<image :src="user_info.identity.level_icon" mode="aspectFill" style="width: 22px;height: 22px;border-radius: 11px;"></image>
						<Text style="margin-right: 10px;">{{ user_info.identity.level_name != null ? user_info.identity.level_name : '普通用户' }}</Text>
					</view>
				</view>
				<view class="top_b">
					<view class="top_b_item2"  @click="goUrl('/pages/blindDate/personal/followlist')">
						<text style="font-size: 20px;font-weight: bold;">{{user_info.followNum?user_info.followNum:0}}</text>
						<text style="color: #666666;">关注</text>
					</view>
					<view class="top_b_item2"  @click="goUrl('/pages/blindDate/personal/fanlist')">
						<text style="font-size: 20px;font-weight: bold;">{{user_info.myFollowNum?user_info.myFollowNum:0}}</text>
						<text style="color: #666666;">粉丝</text>
					</view>
				</view>
			</view>
			<view class="buyvip" v-if="user_info.identity.is_member_vipbuy== true && user_info.identity.member_vipgrade_Id>0 && user_info.identity.member_level==0" @click="gobuyvip(user_info.identity.member_vipgrade_Id)">
				<image :src='meueData.user_center.member_buy_vip_url' style="width: 100%;height: auto;" mode="widthFix"></image>
			</view>
			<view class="order_bar paike"  style="" @click="gopointBalance">
				<view style="display: flex;align-items: center;">
					<image src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Static/base-xx.png" style="width: 22px;height: auto" mode='widthFix'></image>
					<span style='font-size: 14px;color: #555555;margin-left: 15px'>我的星星值：</span>
				</view>
				<view style="display: flex;align-items: center;">
					<span style='font-size: 12px;color: #A5A4AC;font-family: aa;margin-right: 20px;'>{{PointNum}}</span>
					<u-icon name="arrow" color="#A5A4AC" size="20"></u-icon>
				</view>
			</view>
			<template v-if="meueData.user_center&&meueData.user_center.nar_menus.length>0">
				<view v-if="meueData.user_center && meueData.user_center.is_menu_status == 1" v-for="(mItem,mIndex) in meueData.user_center.nar_menus"
				 :key="mIndex" :style="{'marginTop':mIndex==0&&(meueData.user_center.is_foot_bar_status==1||meueData.user_center.is_account_status==1)?'15px':''}"
				 class="headCommon">
					<view style="margin:10px;" v-if="mItem.MenuNavTitle!=''">{{mItem.MenuNavTitle}}</view>
					<view :class="mItem.MenuNavStyle == 1 ? 'xq-menus' : 'xq-menus2'" style="width:100%;">
						<view :class="mItem.MenuNavStyle == 1 ? 'xq-menus_item' : 'xq-menus_item2'" v-for="(item, index) in mItem.MeunList"
						 :key="index" :name="item.name" @click="goUrl(item.link_url)" >
							<image :src="item.icon_url" style="width:18px;height: auto" mode="widthFix"></image>
							<Text :style="{ 'margin-top': mItem.MenuNavStyle == 1 ? '10rpx' : '0rpx', 'margin-left': mItem.MenuNavStyle == 1 ? '0rpx' : '40rpx' }">
								{{ item.name }}
							</Text>
							<view v-if="mItem.MenuNavStyle!=1" class="wangr">
								<view class="MenuNav-t" :style="{background:mainColor}" v-if="mItem.MenuNavStyle!=1 && item.link_url=='/pages/blindDate/message' && user_info.messageNum>0">
									<tetx>{{user_info.messageNum}}</tetx>
								</view>
								<u-icon name="arrow" color="#A5A4AC" size="20"></u-icon>
							</view>
							<button open-type="contact" class="contButton" v-if="item.link_url == 'contact' && item.name == '客服'"></button>
							<!-- 消息的条数 -->
							<view class="MenuNav-o" :style="{background:mainColor}" v-if="mItem.MenuNavStyle==1 && item.link_url=='/pages/blindDate/message' && user_info.messageNum>0">
								<tetx>{{user_info.messageNum}}</tetx>
							</view>
						</view>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default{
		props: ["meueData",'user_info','scrollTop','modelstype','bottommargin','PointNum'],
		data(){
			return{
				pageTitle: '用户中心',
				headStyle: {},
				nav:0,
				mainColor:'',
				is_icon_members_grade:0,
			}
		},
		created() {
			this.nav = uni.getMenuButtonBoundingClientRect().top + 'px';
			this.headStyle.background = `linear-gradient(#9EE3E1 5%, #f3f4f6)`;
			this.headStyle.paddingTop = this.nav;
			this.mainColor = this.$uiConfig.mainColor;
			let currentPages = getCurrentPages();
			let u = "/" + currentPages[currentPages.length - 1].route;
			let pages = wx.getStorageSync("basedata") ?
				wx.getStorageSync("basedata").bar_title :
				[];
			pages.forEach((x) => {
				if (x.value == u) {
					this.pageTitle = x.new_name ? x.new_name : x.name;
				}
			});
			this.is_icon_members_grade = uni.getStorageSync('basedata') ? uni.getStorageSync('basedata').mall.setting.is_icon_members_grade :0;
		},
		methods:{
			goUrl(url) {
				if (url == '/pages/balance/balance') {
					uni.navigateTo({
						url: '/pages/balance/balance?balance=' + this.user_info.balance
					});
				} else {
					uni.navigateTo({
						url: url
					});
				}
			},
			goperson(){
				let mall_UserInfo = uni.getStorageSync("mall_UserInfo")?uni.getStorageSync("mall_UserInfo"):null;
				if(mall_UserInfo!=null){
					uni.navigateTo({
						url: '/pages/blindDate/persondetails?UserId='+ mall_UserInfo.UserId
					});
				}
			},
			gopointBalance(){//跳转点数余额
				uni.navigateTo({
					url: '/pages/appointment/personal/pointBalance'
				});
			},
			gobuyvip(id){
				
				uni.navigateTo({
					url: '/pages/blindDate/personal/buyvip?Id='+id
				});
			}
		}
	}
</script>

<style>
	.top_b_item2{
		width: 50%;
		height: 45px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		color: #111;
		font-size: 12px;
		font-family: aa;
	}
	.userStyle .xq-menus {
		width: 94%;
		border-radius: 10rpx;
		background: #fff;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		
	}
	
	.userStyle .xq-menus2 {
		width: 94%;
		border-radius: 10rpx;
		background: #fff;
		display: flex;
		flex-direction: column;
		
	}
	
	.userStyle .xq-menus .xq-menus_item {
		width: 25%;
		height: 110rpx;
		margin: 20rpx 0 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-around;
		position: relative;
	}
	.xq-menus_item2 .contButton,
	.xq-menus_item .contButton {
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		opacity: 0;
	}
	
	.userStyle .xq-menus2 .xq-menus_item2 {
		width: 100%;
		height: 90rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		/* margin-left: 30rpx; */
		padding: 0 26rpx;
		position: relative;
	}
	.wangr{
		display: flex;flex-direction: row;align-items: center;
		position: absolute;
		height: 25px;
		line-height: 25px;
		right: 26rpx;
		top:10px ;
	}
	.renzhen{
		width: 40px;height: 15px;font-size: 10px;margin-top: 10px;color: #555555;border-radius: 7px;border: 1px solid #999999;display: flex;align-items: center;justify-content: center;
	}
	.MenuNav-o{
		position: absolute;
		top: 0;
		right: 20rpx;
		height: 30rpx;
		font-size: 20rpx;
		color: #FFFFFF;
		border-radius: 15rpx;
		padding: 0 12rpx;
		line-height: 30rpx;
		
		
	}
	.MenuNav-t{
		height: 30rpx;
		font-size: 20rpx;
		color: #FFFFFF;
		border-radius: 15rpx;
		padding: 0 12rpx;
		line-height: 30rpx;
		margin-right: 10px;
	}
	.buyvip{
		width: 100%;
		padding: 0 15px;
	}
</style>
