<template>
	<scroll-view 
		 :scroll-y="true"
		@scroll="scrollHandler"
		@scrolltoupper="scrollTopHandler"
		style="height: 100vh;">
		<view class="userStyle">
			<view
			  class="headStatus"
			  v-if="scrollTop > 50"
			  :style="[
			    headStyle,
			    {
			      zIndex: scrollTop < 10 ? 'unset' : 2,
			      opacity: scrollTop < 10 ? '100' : scrollTop,
			    },
			  ]"
			>
			  <!-- <view class="arrow" >
			    <u-icon name="arrow-left" size="48" color="#FFF"></u-icon>
			  </view> -->
			  <view class="title" v-if="scrollTop > 50">{{pageTitle}}</view>
			</view>
			<view class="userBox" :style="{ 'margin-bottom': bottommargin }">
				<view
					:style="{ 'background-image': 'url(' + (meueData.user_center.top_pic_url ? meueData.user_center.top_pic_url : '') + ')', backgroundSize: '100% 310px' }"
					class="imgbg"
				>
					<view class="titlenav" :style="{paddingTop:nav}">{{pageTitle}}</view>
					<view class='topheard' :style="{'margin-top':modelstype==0?'52px':(modelstype==1?'37px':(modelstype==2)?'33px':0) }" 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;justify-content: space-between;margin-left: 20rpx">
							<Text style="color: #FFF;font-size: 36rpx;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">
								<image :src="meueData.user_center.top_pic_url" 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: 50px;" v-if="meueData.user_center.top_style == 2">
						<u-avatar :src="user_info.avatar" size="120"></u-avatar>
						<Text style="color: #FFF;margin-left: 20rpx;font-size: 36rpx;" @click="login(user_info)">{{ user_info.nickname ? user_info.nickname : '立即登录' }}</Text>
						<view class="member" v-if="is_icon_members_grade == 1">
							<image :src="meueData.user_center.top_pic_url" mode="aspectFill" style="width: 26px;height: 26px;border-radius: 13px;"></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_item" v-if="meueData.user_center.is_foot_bar_status == 1" @click="goUrl('/pages/favorite/favorite')">
							<text style="font-size: 21px;">{{user_info.favorite}}</text>
							<text>{{meueData.user_center.foot_bar[0].name}}</text>
						</view>
						<view class="top_b_item" v-if="meueData.user_center.is_foot_bar_status == 1" @click="goUrl('/pages/foot/index/index')">
							<text style="font-size: 21px;">{{user_info.footprint}}</text>
							<text>{{meueData.user_center.foot_bar[1].name}}</text>
						</view>
						<view class="top_b_item" v-if="meueData.user_center.is_account_status == 1" @click="goUrl(couponsObj.link_url)">
							<text style="font-size: 21px;">{{user_info.coupon}}</text>
							<text>{{couponsObj.name}}</text>
						</view>
						
					</view>
					<view class="ReceiptAdder" @click="goUrl('/pages/address/address')" style=" background: rgba(55, 55, 55, 0.15) ">
						<u-icon name="location" color="#fff" size="23"></u-icon>
						<Text style="color: #fff;font-size: 12px;margin-left: 20rpx;">收货地址</Text>
					</view>
					<view class="Receiptbalance" v-if="meueData.user_center.is_account_status == 1">
						<view class="Receiptbalance_item" v-for="(item, index) in meueData.user_center.account" :key="index" 
						v-if="item.link_url == '/pages/balance/balance'" @click="goUrl(item.link_url)">
							<image :src="item.icon_url" style="width: 22px;" mode ='widthFix' ></image>
							<view style="margin-left: 15px;display: flex;flex-direction: column;justify-content: space-between;">
								<span style='font-size: 21px;color: #0D0D0D;font-weight: 200;'>{{user_info.balance>10000?(user_info.balance/10000).toFixed(1)+'w':user_info.balance}}</span>
								<span style=''>{{item.name}}</span>
							</view>
						</view>
						<view style="width: 1px;height: 34px;background: #E8E8E8;"></view>
						<view class="Receiptbalance_item" v-for="(item, index) in meueData.user_center.account" :key="index" 
						v-if="item.link_url == '/pages/user-center/integral-detail/integral-detail'" @click="goUrl(item.link_url)">
							<image :src="item.icon_url" style="width: 17px;" mode ='widthFix'></image>
							<view style="margin-left: 15px;display: flex;flex-direction: column;justify-content: space-between;">
								<span style='font-size: 21px;color: #0D0D0D;font-weight: 200;'>{{user_info.integral>10000?(user_info.integral/10000).toFixed(1)+'w':user_info.integral}}</span>
								<span>{{item.name}}</span>
							</view>
						</view>
					</view>
				</view>
				

				<view class="order_bar" v-if="meueData.user_center.is_order_bar_status == 1">
					<u-section title="我的订单" sub-title="查看更多" style="width: 100%;padding:0px 0 10px ;" @click="goUrl('/pages/order/index/index?status=0')"></u-section>
					<view class="order_bar_list">
						<view class="order_bar_item" v-for="(item, index) in meueData.user_center.order_bar" :key="index" :name="item.name" @click="goUrl(item.link_url)">
							<image :src="item.icon_url" style="width: 60rpx" mode ='widthFix'></image>
							<Text style="margin-top: 10rpx;">{{ item.name }}</Text>
							<!-- 待付款 -->
							<view v-if="item.link_url == '/pages/order/index/index?status=1' && user_info.MyOrder.NonPayment > 0" class="badge" :style="{ background: mainColor }">
								{{ user_info.MyOrder.NonPayment }}
							</view>
							<!-- 待发货 -->
							<view v-if="item.link_url == '/pages/order/index/index?status=2' && user_info.MyOrder.WaitSendGoods > 0" class="badge" :style="{ background: mainColor }">
								{{ user_info.MyOrder.WaitSendGoods }}
							</view>
							<!-- 待收货 -->
							<view v-if="item.link_url == '/pages/order/index/index?status=3' && user_info.MyOrder.WaitReceiving > 0" class="badge" :style="{ background: mainColor }">
								{{ user_info.MyOrder.WaitReceiving }}
							</view>
							<!-- 待评价 -->
							<view v-if="item.link_url == '/pages/order/index/index?status=4' && user_info.MyOrder.WaitCommentNum > 0" class="badge" :style="{ background: mainColor }">
								{{ user_info.MyOrder.WaitCommentNum }}
							</view>
							<!-- 售后 -->
							<view v-if="item.link_url == '/pages/order/after-sale/refunds-list' && user_info.MyOrder.AfterSaleNum > 0" class="badge" :style="{ background: mainColor }">
								{{ user_info.MyOrder.AfterSaleNum }}
							</view>
						</view>
					</view>
				</view>

				<view :class="meueData.user_center.menu_style == 1 ? 'menus2' : 'menus'" v-if="meueData.user_center.is_menu_status == 1">
					<view
						:class="meueData.user_center.menu_style == 1 ? 'menus_item2' : 'menus_item'"
						v-for="(item, index) in meueData.user_center.menus"
						:key="index"
						:name="item.name"
						@click="goUrl(item.link_url)"
						v-if="item.name != '分销中心' || user_info.isShowDistributionCenter == 1"
					>
						<image :src="item.icon_url" :style="{width:meueData.user_center.menu_style == 1 ?'12px':'20px'}" mode="widthFix"></image>
						<Text
							:style="{ 'margin-top': meueData.user_center.menu_style == 1 ? '0rpx' : '10rpx', 'margin-left': meueData.user_center.menu_style == 1 ? '10rpx' : '0rpx' }"
						>
							{{ item.name }}
						</Text>
						<button open-type="contact" class="contButton"  v-if="item.link_url == 'contact' && item.name == '客服'"></button>
					</view>
				</view>
				
			<!-- 	<view class="copyright">
					<image :src="meueData.user_center.copyright.pic_url" mode="widthFix" style="width: 95px;"></image>
					<Text style="margin-top: 10rpx;color: #666666;">{{ meueData.user_center.copyright.description }}</Text>
				</view> -->
			</view>
			<auth v-if="showAuth" @changeuserinfo="reloadUserinfo" @gbAuth="gbAuth"></auth>
			<tabbars></tabbars>
		</view>
	</scroll-view>
</template>

<script>
import tabbars from '@/components/tabbar/index';
import auth from '../../components/auth/index.vue';

export default {
	data() {
		return {
			isloading: true,
			pageTitle: '用户中心',
			navHeight: 0,
			contentHeight: 0,
			cstyle: {},
			meueData: {}, //菜单
			user_info: {}, //个人信息
			 headStyle: {},
			bottommargin: 0,
			listbottom: 0,
			showAuth: false,
			mainColor: '',
			secondary: '',
			u: {},
			is_icon_members_grade: 0,
			nav:0,
			scrollTop:0,
			couponsObj:{},
			modelstype:0,//机型类型
		};
	},
	components: {
		tabbars,
		auth
	},
	created() {
		this.mainColor = this.$uiConfig.mainColor;
		this.secondary = this.$uiConfig.secondary;
	},
	onLoad() {
		this.navHeight = this.$navHeight - 2;
		this.u = wx.getStorageSync('basedata').user_info;
		this.nav = uni.getMenuButtonBoundingClientRect().top+'px';
		this.headStyle.background = `linear-gradient(to right, '#6E75EA',80%, '#B984EC')`;
		this.headStyle.paddingTop = this.nav ;
		// if (!this.u) {
		// 	this.u = {
		// 		nickname: '未登录',
		// 		avatarUrl: ''
		// 	};
		// 	this.showAuth = true;
		// }
	},
	mounted() {
		let currentPages = getCurrentPages();
		let c = this.$uiConfig.is_bang ? 80 : 52;
		this.bottommargin = c - 2 + 'px';
		this.listbottom = c - 2 + 50 + 'px';
		this.contentHeight = this.$utils.calcContentHeight(c);
		if(this.contentHeight>690 && this.contentHeight<776){
			this.modelstype=1
		}else if(this.contentHeight>=776){
			this.modelstype=2
		}
		
		this.is_icon_members_grade = uni.getStorageSync('basedata') ? uni.getStorageSync('basedata').mall.setting.is_icon_members_grade : 0;
		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;
		// 	}
		// });
		uni.setNavigationBarTitle({
			title: '用户中心'
		});
		this.userinfo();
	},
	onShow() {
		this.userinfo();
	},
	methods: {
		goHome() {
			uni.redirectTo({ url: '/pages/index/main' });
		},

		//获取菜单配置
		userinfo() {
			uni.showNavigationBarLoading();
			this.request2(
				{
					url: '/api/Mall/GetUserCenter',
					data: {}
				},
				res => {
					uni.hideNavigationBarLoading();
					this.meueData = res.data.config;
					this.user_info = res.data.user_info;
					this.meueData.user_center.account.forEach(x=>{
						if(x.link_url =="/pages/coupon/index/index" ){
							this.couponsObj = x
						}
					})
				}
			);
		},
		goUrl(url) {
			if (url == '/pages/balance/balance') {
				uni.navigateTo({
					url: '/pages/balance/balance?balance=' + this.user_info.balance
				});
			} else {
				uni.navigateTo({
					url: url
				});
			}
		},
		reloadUserinfo() {
			this.userinfo();
			this.u = this.user_info;
			this.showAuth = false;
		},
		login(name) {
			if ((name && name.nickname == '') || !name || !name.nickname) {
				this.showAuth = true;
			}
		},
		//关闭登录窗口
		gbAuth() {
			this.showAuth = false;
		},
		scrollHandler(e) {
		  this.scrollTop = e.detail.scrollTop;
		  //this.$forceUpdate();
		},
		scrollTopHandler() {
		  this.scrollTop = 0;
		},
		
	}
};
</script>

<style>
.body {
	background: #f3f4f6;
}
.userStyle .userBox {
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	background: #f3f4f6;
	min-height: 100vh;
}
.userStyle .imgbg {
	width: 100%;
	height: 310px;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	
}
.userStyle .headimg {
	width: 140rpx;
	height: 140rpx;
	border-radius: 50%;
	margin-left: 60rpx;
}
.userStyle .footprint {
	width: 80%;
	height: 140rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
}
.userStyle .footprint_item {
	width: 200rpx;
	height: 90rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}
.userStyle .footprint_item_bottom {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
}
.userStyle .account_bar {
	width: 94%;
	height: 110rpx;
	border-radius: 10rpx;
	background: #fff;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	padding: 0 20rpx;
}
.userStyle .account_bar_item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	border-right: 1px solid #d1d1d1;
	width: 25%;
}
.userStyle .account_bar_item:last-child {
	border-right: 0;
}
.userStyle .order_bar {
	width: 94%;
	border-radius: 10rpx;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 30rpx;
	margin-top: 80rpx;
}
.userStyle .order_bar .order_bar_list {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}
.userStyle .order_bar_item {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 20rpx;
	position: relative;
}
.userStyle .badge {
	position: absolute;
	right: -10rpx;
	top: -10rpx;
	padding: 0 12rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20rpx;
	color: #fff;
	height: 30rpx;
	border-radius: 15rpx;
}
.userStyle .menus {
	width: 94%;
	border-radius: 10rpx;
	background: #fff;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	margin-top: 30rpx;
}
.userStyle .menus2 {
	width: 94%;
	border-radius: 10rpx;
	background: #fff;
	display: flex;
	flex-direction: column;
	margin-top: 20rpx;
	margin-bottom: 20px;
}
.userStyle .menus .menus_item {
	width: 25%;
	height: 110rpx;
	margin: 20rpx 0 10rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-around;
	position: relative;
}
.menus_item2 .contButton,
.menus_item .contButton {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
}
.userStyle .menus2 .menus_item2 {
	width: 100%;
	height: 90rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	margin-left: 30rpx;
	position: relative;
}
.userStyle .copyright {
	padding: 70rpx 0;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.userStyle .ReceiptAdder {
	position: absolute;
	right: 0;
	top: 160rpx;
	width: 100px;
	height: 24px;
	border-top-left-radius: 12px;
	border-bottom-left-radius: 12px;
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0 20rpx;
}
.userStyle .member {
	background: #3b3641;
	width: 80px;
	font-size: 10px;
	color: #fff;
	height: 18px;
	border-radius: 9px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}
.userStyle .titlenav{
	width: 100%;text-align: center;font-size: 16px;color: #FFFFFF;
}
.userStyle .top_b{
	width: 86%;
	height: 65px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	margin-top: 20px;
}
.userStyle .top_b_item{
	width: 26%;
	height: 50px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	color: #FFFFFF;
	font-size: 12px;
}
.userStyle .Receiptbalance{
	width: 94%;
	height: 62px;
	position: absolute;
	left: 3%;
	bottom: -20px;
	background: #FFFFFF;
	border-radius: 6px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-around;
	padding: 0 10px;
}
.userStyle .Receiptbalance_item{
	width: 40%;
	height: 50px;
	display: flex;
	flex-direction: row;
	align-items: center;
	font-size: 12px;
	color: #534D62;
	
}
.userStyle .headStatus {
  overflow: hidden;
  position: relative;
  width: 140vw;
  padding-right: 40vw;
  padding-bottom: 10px;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  background-image: linear-gradient(
    to right,
    #6E75EA,
    #B984EC
  );
 
}
.userStyle .headStatus .arrow {
  height: 24px;
  margin: 5px 10px;
  width: 24px;
}
.userStyle .headStatus .title {
  font-size: 18px;
  color: #fff;
  flex: 1;
  width: 1px;
  /* margin-left: 10px; */
  line-height: 34px;
  text-align: center;
}
.userStyle .topheard{
	display: flex;flex-direction: row;align-items: center;width: 100%;
}
</style>
