<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: 217px;">
				<view class="titlenav" :style="{paddingTop:nav,color:'#000'}">{{pageTitle}}</view>
				<view class='topheard' style="margin-top: 30px;"
				 v-if="meueData.user_center.top_style == 1">
					<u-avatar :src="user_info.avatar" size="140" style="margin-left: 50rpx;"></u-avatar>
					<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 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>
				<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.favorite?user_info.favorite: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.footprint?user_info.footprint:0}}</text>
						<text style="color: #666666;">粉丝</text>
					</view>
				</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">
								<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>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	export default{
		props: ["meueData",'user_info','scrollTop','modelstype','bottommargin'],
		data(){
			return{
				pageTitle: '用户中心',
				headStyle: {},
				nav:0,
				
			}
		},
		created() {
			this.nav = uni.getMenuButtonBoundingClientRect().top + 'px';
			this.headStyle.background = `linear-gradient(#9EE3E1 5%, #f3f4f6)`;
			this.headStyle.paddingTop = this.nav;
			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;
				}
			});
		},
		methods:{
			goUrl(url) {
				if (url == '/pages/balance/balance') {
					uni.navigateTo({
						url: '/pages/balance/balance?balance=' + this.user_info.balance
					});
				} else {
					uni.navigateTo({
						url: url
					});
				}
			},
		}
	}
</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 ;
	}
</style>
