<template>
	<view>
		
		<view class="header">
			<image class='background' src="/static/img/user/topbg.png" mode="aspectFill"></image>
			<view class="userInfo">
				<view class="uleft">
					<u-image :src="userInfo.wxAvatar" width="60px" height="60px" radius="30px" @error="imgErr"></u-image>
				</view>
				<view class="ucenter">
					<view class="name"><text class="username">{{userInfo.wxName}}</text><text class="level">{{identityinfo.levelTxt}}</text></view>
				</view>
				<view class="uright">
					<view class="change">
						<image src="/static/img/user/setting.png" mode="widthFix"></image>
					</view>
				</view>
			</view>	
			
			<!-- <view class="userItem">
				<view class="uItemBox">
					<view class="num">{{userInfo.totalAmount > 0 ? userInfo.totalAmount / 100 : '0.00'}}</view>
					<view class="text">消费金额(元)</view>
				</view>
				<view class="uItemBox">
					<view class="num">{{userInfo.totalDur > 0 ? userInfo.totalDur : 0}}</view>
					<view class="text">使用时长(分)</view>
				</view>
			</view>	 -->
			
		</view>	
		
		<!-- <view class="orderBox">
		<view class="orderBoxTitle">我的订单</view>	
		<view class="orderItem">
			<view class="oItemBox" v-for="(item,key) in ordermenu" :key="key" @click="goTo(item.url)">
				<view class="image">
					<image :src="item.icon" mode="widthFix"></image>
				</view>
				<view class="order_text">{{item.label}}</view>
			</view>
	
		</view>	
		</view> -->
		
		<view class="moneyBox" v-if="identityinfo.levelVal < 4">
		<view class="moneyBoxTitle">收入抽成</view>	
		<view class="moneyBoxItem">
			<view class="mItemBox">
				<view class="money">
					<text class="unit">￥</text><text class="num">{{userInfo.todayIncome > 0 ? userInfo.todayIncome / 100 :'0.00'}}</text>
				</view>
				<view class="order_text">今日收入</view>
			</view>
			<view class="mItemBox">
				<view class="money">
					<text class="unit">￥</text><text class="num">{{userInfo.totalIncome > 0 ? userInfo.totalIncome / 100 :'0.00'}}</text>
				</view>
				<view class="order_text">总收入</view>
			</view>
			
			<view class="mItemBox">
				<view class="money">
					<text class="unit">￥</text><text class="num">{{userInfo.todayLevelIncome > 0 ? userInfo.todayLevelIncome / 100 :'0.00'}}</text>
				</view>
				<view class="order_text">今日抽成</view>
			</view>
			<view class="mItemBox">
				<view class="money">
					<text class="unit">￥</text><text class="num">{{userInfo.totalLevelIncome > 0 ? userInfo.totalLevelIncome / 100 :'0.00'}}</text>
				</view>
				<view class="order_text">总抽成</view>
			</view>
			
		</view>	
		</view>
		
		
		<view class="serviceBox">
		<view class="serviceBoxTitle">我的服务</view>	
		<view class="serviceItem">
			<view class="sItemBox" v-for="(item,key) in shopmenu" :key="key" v-if="item.level >= identityinfo.levelVal" @click="goTo(item.url)">
				<view class="image">
					<image :src="item.icon" mode="widthFix"></image>
				</view>
				<view class="order_text">{{item.label}}</view>
			</view>
		
			
		</view>	
		<view class="ad">
			<image src="@/static/img/user/banner.jpg" mode="widthFix" @click="openVideo"></image>
		</view>
		</view>
		
		<view class="serviceBox">
		<view class="serviceBoxTitle">我的工具</view>	
		<view class="serviceItem">
			<view class="sItemBox" v-for="(item,key) in setmenu" :key="key" @click="tools(item)">
				<view class="image">
					<image :src="item.icon" mode="widthFix"></image>
				</view>
				<view class="order_text">{{item.label}}</view>
			</view>
			
	
			
		</view>	
		</view>
		
		<view class="nowENV" v-if="this.$api.env() == 'development' || this.$api.env() == 'local'">
			<u-tag v-if="this.$api.env() == 'development'" text="线上测试环境" type="warning" plain plainFill></u-tag>
			<u-tag v-if="this.$api.env() == 'local'" text="本地开发环境" type="error" plain plainFill></u-tag>
		</view>	
		
		<view class="empty">
		</view>	
		
		
		<u-popup :show="video_show" :round="10" mode="center" :closeable="true" customStyle="{width:750rpx,height:auto}"  @close="closeVideo">
		<view class="videoBox">
			<video id="myVideo" :src="video_src" @error="videoErrorCallback" :autoplay="false"  controls></video>
		</view>
		</u-popup>
		
	</view>
</template>

<script>

export default {
	data() {
		return {
			isLogin:false, //登录
			userInfo:{
				wxAvatar:'/static/img/user/avatar.png',
				wxName:'点击登录',
				totalAmount:0.00,
				totalDur:0,
			},
			isShop:false, //店铺
			ordermenu: [
				{ label: '全部', icon: '/static/img/user/order_all.png', url: '/pages/order/list?tab=0'},
				{ label: '进行中', icon: '/static/img/user/order_ing.png', url: '/pages/order/list?tab=1'},
				{ label: '已完成', icon: '/static/img/user/order_finish.png', url: '/pages/order/list?tab=2'},
			],
			shopmenu: [
				{ label: '店铺管理', icon: '/static/img/order/store.png', url: '/pages/user/shop/shopmanage', level: 3},
				{ label: '收入记录', icon: '/static/img/user/money_log.png', url: '/pages/user/mine/income', level: 3},
				{ label: '提现申请', icon: '/static/img/user/withdraw.png', url: '/pages/user/mine/withdraw', level: 3},
				{ label: '我的下级', icon: '/static/img/user/link.png', url: '/pages/user/mine/leveluser', level: 2},
				{ label: '查看码值', icon: '/static/img/user/code.png', url: '/pages/user/shop/lookcode', level: 3},
				{ label: '提现记录', icon: '/static/img/user/withdraw_log.png', url: '/pages/user/mine/withdrawrecord', level: 3},

			],
			setmenu: [
				{ label: '账户设置', icon: '/static/img/user/account.png', type: 'normal',url: '/pages/user/account/index'},
				{ label: '联系客服', icon: '/static/img/user/chat.png', type: 'service',url:''},
				{ label: '代理入驻', icon: '/static/img/user/settled.png', type: 'normal',url: '/pages/user/mine/settled'}
			],
			//等级
			identityinfo:'',
			
			//视频显示
			video_show:false,
			video_src:'https://kjc.oss-cn-shenzhen.aliyuncs.com/video/demo.mp4',
			
		};
	},
	onReady: function (res) {
		this.videoContext = uni.createVideoContext('myVideo')
	},
	onShow() {
		var _this =this;
		var openid = _this.$user.session('openid');
		if(!_this.$com.isNull(openid))
		{
			_this.isLogin = true;
			_this.getUserInfo();
		}
		
		
	},
	onShareAppMessage() {
	    return {
	      title: '空间充-我的',
	      path: uni.$u.page(),
	    }
	},
	onShareTimeline() {
	    return {
	      title: '空间充-我的',
	      path: uni.$u.page(),
	    }
	},
	methods:{
		//头像加载失败
		imgErr(){
			this.userInfo.wxAvatar = '/static/img/user/avatar.png';
		},
		//获取用户信息
		getUserInfo()
		{
			var _this =this;
			var post ={};
			_this.$api.post('ycl/user/wx-info',post,function(rs){
				console.log(rs);
				_this.userInfo = rs;
				_this.$user.session('lifeData',rs);
				var identityinfo  = _this.$access.checkidentity(rs);
				console.log(identityinfo);
				_this.identityinfo  = identityinfo;
				_this.$user.session('identityinfo',identityinfo);
				if(identityinfo.levelVal != 4)
				{
					var setmenu = _this.setmenu;
					var updatedSetmenu  = setmenu.filter(item => item.label !== '代理入驻');
					_this.setmenu = updatedSetmenu;
				}
				
			},function(err){
				console.log(err);
			});
		},
		goTo(url)
		{
			uni.$u.route({
				type:'navigateTo',
				url: url,
			});
		},
		tools(item)
		{
			var _this =this;
			if(item.type == 'service')
			{
				var phone = _this.$user.session('servicePhone');
				uni.makePhoneCall({
					phoneNumber: phone,
					success(res) {
						console.log(res);
					},
					fail(err) {
						console.log(err);
					},
				});
			}
			else
			{
				uni.$u.route({
					type:'navigateTo',
					url: item.url,
				});
			}
			
		},
		//打开视频
		openVideo(){
			var _this =this;
			_this.video_show = true;
		},
		videoErrorCallback(e)
		{
			console.log(e);
		},
		closeVideo(){
			var _this =this;
			_this.video_show = false;
			_this.videoContext.pause = true;
		},
		
		getPhoneNumber(e){
			var _this =this;
			var detail = e.detail;
			console.log(detail);
			if (detail.errMsg === 'getPhoneNumber:ok') {
			 
			  _this.getPhoneApi(detail);
			} else {
			  _this.$com.alert('授权失败')
			}
		},
		getPhoneApi(detail){
		  var _this = this;
		  var openid = _this.$user.session('openid');		 
		  var post ={
		  	
			code: detail.code,
		  };
		  _this.$api.post('ycl/user/wx-phone',post,function(rs){
		  	console.log(rs);
			var phoneNumber = rs;
		  	_this.userInfo.phoneNumber = phoneNumber;
				if(_this.$com.isNull(openid))
				{
					_this.$com.alert('切换失败,请退出并重新进入小程序重试');
				}
				// #ifdef  MP
				//这里目前微信小程序和抖音功能基本一样
				uni.getProvider({
				    service: 'oauth',
				    success: function (res) {
				        console.log(res.provider)
				        var provider = res.provider[0];
						
						uni.login({
						      provider:provider,
						      scopes:'auth_base',
						      success: function (login) {
						    			console.log(login);
						    			 //发起网络请求
						    	          var xpost = {
											  loginCode: login.code,
											  phoneNumber:phoneNumber,
										  };
						    			  _this.$api.post('ycl/user/wx-login', xpost,function(resx){
						    			  				    console.log(resx);
															_this.$user.session('openid',resx.wxOpenid);
						    			  					_this.$user.session('user_id',resx.id);
															if(!_this.$com.isNull(resx.token))
															{
																_this.$user.session('token',resx.token);
															}
															_this.isLogin = true;
															_this.getUserInfo();
						    			  });
						      },
						      fail:function(rs){
						    	  console.log('登录失败'+rs.errMsg);
						      }
						    });
						
						
						
						
				    }
				});
				
				
				// #endif
		  },function(err){
		  	console.log(err);
		  });
			
		},
		
	},
};
</script>

<style lang="scss">
	page{ height:100%; width: 100%;}
	.container{padding:10rpx 20rpx;}
	.header{ width: 100%; height: 500rpx; overflow: hidden; position: relative;}
	.background {
	  width: 100%;
	  height: 100%;
	  position:absolute; 
	  background-size:100% 100%;
	  z-index: -1;
	}
	.userInfo{ width: 670rpx; height: auto; display: flex; margin: 244rpx auto 50rpx auto;}
	.userInfo .uleft{ width: 120rpx; height: 120rpx;}
	
	.userInfo .ucenter{ width: 430rpx; height: 120rpx; line-height: 120rpx;}
	.userInfo .ucenter .name{ width: 100%; height: 120rpx;}
	.userInfo .ucenter .name .username{font-size: 36rpx; color:#333333; margin-left:20rpx;}
	.userInfo .ucenter .name .level{width: auto; padding: 2rpx 10rpx;
height: 44rpx;
background: #095E59; text-align: center; font-size: 24rpx;color: #333333;
border-radius: 42rpx 42rpx 42rpx 42rpx;
border: 1rpx solid #00F0E2; margin-left: 20rpx;}
	.userInfo .uright{ width: 120rpx; height: 120rpx;}
	.userInfo .uright .change{width: 104rpx;
height: 50rpx;
 color: #333333; font-size: 28rpx; line-height: 50rpx; text-align: center;}
	.userInfo .uright .change image{ width: 42rpx; height: 42rpx; margin-top: 60rpx;}
	.userItem{
		color: #333333;
		width: 100%; 
		height: auto;
		display: flex;
	}
	.uItemBox{ width:50%; text-align: center;}
	.uItemBox .num{
		font-size: 40rpx;
		font-family: DIN, DIN;
		font-weight: bold;
	}
	.uItemBox .text{
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		line-height: 28rpx;
	}
	
	/*订单部分*/
	
	.orderBox{
		width: 670rpx;
		height: auto;
		background: #082436;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		opacity: 1;
		margin: 0rpx auto;
		padding: 20rpx;
	}
	.orderBoxTitle{
		font-size: 28rpx;
		font-weight: bold;
		color:#FFFFFF;
		line-height: 60rpx;
	}
	
	.orderItem{
		width: 100%; height: auto;
		display: flex;
		text-align: center;
	}
	.oItemBox{
		width: 33.33%;
		
	}
	.oItemBox .image{ width: 100%; text-align: center; margin-top: 20rpx;}
	.oItemBox .image image{width: 64rpx; height: auto; margin: 0rpx auto; }
	.oItemBox .order_text{
		text-align: center;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 30rpx;
		color: #FFFFFF;
	}
	
	
	/*收入部分*/
	
	.moneyBox{
		width: 670rpx;
		height: auto;
		background: #082436;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		opacity: 1;
		margin: 20rpx auto;
		padding: 20rpx;
	}
	.moneyBoxTitle{
		font-size: 28rpx;
		font-weight: bold;
		color:#FFFFFF;
		line-height: 40rpx;
	}
	
	.moneyBoxItem{
		margin-top: 20rpx;
		width: 100%; height: auto;
		display: flex;
		text-align: center;
		gap:20rpx;
	}
	.mItemBox{
		width: 152rpx;
		height: 128rpx;
		background: linear-gradient(180deg, rgba(49,156,255,0) 0%, rgba(0,255,240,0.5) 100%);
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		opacity: 1;
		border: 1rpx solid #00F0E2;
		
		
	}
	.mItemBox .money{ width: 100%; text-align: center; color: #FFFFFF; line-height: 80rpx;}
	.mItemBox .money .unit{ font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: bold;}
	.mItemBox .money .num{ font-size: 30rpx;
font-family: DIN, DIN;
font-weight: 400;
}
	.mItemBox .order_text{
		text-align: center;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 30rpx;
		color: #FFECAA;
	}
	



/*服务*/
	
	.serviceBox{
		width: 670rpx;
		height: auto;
		background: #082436;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		opacity: 1;
		margin: 20rpx auto;
		padding: 20rpx;
	}
	.serviceBoxTitle{
		font-size: 28rpx;
		font-weight: bold;
		color:#FFFFFF;
		line-height: 60rpx;
	}
	
	.serviceItem{
		width: 100%; height: auto;
		display: flex;
		text-align: center;
		flex-wrap:wrap;
	}
	.sItemBox{
		width: 25%;
		
	}
	.sItemBox .image{ width: 100%; text-align: center; margin-top: 20rpx;}
	.sItemBox .image image{width: 48rpx; height: auto; margin: 0rpx auto; }
	.sItemBox .order_text{
		text-align: center;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 30rpx;
		color: #FFFFFF;
	}
	.nowENV{ width: 200rpx; height: 60rpx; margin: 10rpx auto; text-align: center;}
	.empty{width: 100%; height: 20rpx;}
	
	
	.ad{ width: 100%; height: auto;  text-align: center; margin:0rpx auto;}
	.ad image{ width:100%; margin-top:20rpx;border-radius: 30rpx;}
	.videoBox{ width: 750rpx; height: 900rpx;}
	.videoBox video{ width: 100%; height: 100%;}

</style>
