<template>
	<view>
	<custom_navbar :title="navbar_title" @getNavHeight="getNavHeight" :theme="theme" left="false" />
		<view class="header" :style="'margin-top:-'+margin_top+'px'">
			<image class='background' src="/static/img/user/topbg.png" mode="aspectFill"></image>
			<view class="userInfo">
				<view class="uleft">
					<u-image :src="info.avatar" width="48px" height="48px" radius="50%" @error="imgErr"></u-image>
				</view>
				<view class="ucenter">
					<view class="name"><text class="username">{{info.nick_name}}</text><!-- <text class="level">等级</text> --></view>
				</view>
				<view class="uright">
					<view class="change" @click="goTo('/pages/user/account/index')">
						<image src="/static/img/user/setting.png" mode="widthFix"></image>
					</view>
				</view>
			</view>	
			
			
			<view class="boxBg">
				<image class='box_bg' src="/static/img/user/boxbg.png" mode="aspectFill"></image>
				<view class="mbBox">
					<view class="mleft">
						<view class="mb_title">面部档案</view>
						<view class="mb_desc">分享可解锁新面部档案</view>
					</view>
					<view class="mright">
						<view class="mbItem" @click="goTo('/pages/user/archives/detail')">
							<image src="/static/img/user/have.png" mode="widthFix"></image>
						</view>
						<view class="mbItem">
							<image src="/static/img/user/have_no.png" mode="widthFix"></image>
						</view>	
						<view class="mbItem">
							<image src="/static/img/user/have_no.png" mode="widthFix"></image>
						</view>		
					</view>
				</view>	
			</view>	
			
			
			
			
			
			
		</view>	
		
		<view class="tabList">
			 <u-tabs :list="tabList" 
			    lineWidth="30"
				lineColor="#9B75FF"
				:current="current"
				:activeStyle="{
					color: '#000000',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				}"
				:inactiveStyle="{
					color: '#000000',
					transform: 'scale(1)'
				}"
               itemStyle="padding-left: 15rpx; padding-right: 15rpx; width:157rpx;  height: 68rpx;"
			   @click="tabChange"></u-tabs>
			   
			  <view class="datalist">
				  
				  <view class="picBox" @click="goTo('/pages/user/photo/detail')">
				  					 <view class="p_left">
				  						 <image class="p_bg" src="/static/img/user/pic_bg.png" mode="aspectFill"></image>
										 <image class="p_pic" src="/static/img/user/ing.png" mode="widthFix"></image>
				  					 </view>
				  					 <view class="p_center">
				  						 <view class="p_title">港风复古</view>
				  					 </view>
				  					 <view class="p_right">
				  						 <view class="distance">
											 <view class="ing">生成中...</view>
				  						 </view>
				  					 </view>
				  </view>	 
				  
				  
				 <view class="picBox">
					 <view class="p_left">
						 <image class="p_bg" src="/static/img/user/pic_bg.png" mode="aspectFill"></image>
					 </view>
					 <view class="p_center">
						 <view class="p_title">港风复古</view>
					 </view>
					 <view class="p_right">
						 <view class="distance">
						 	<image src="/static/img/index/right.png" mode="widthFix"></image>
						 </view>
					 </view>
				 </view>
					  
					  
				<view class="imgBox">
				 					 <view class="p_left">
				 						 <image class="p_bg" src="/static/img/index/zj_icon.png" mode="aspectFill"></image>
										 <image class="p_pic" src="/static/img/user/ing.png" mode="widthFix"></image>
				 					 </view>
				 					 <view class="p_center">
				 						<view class="p_title">一寸照</view>
				 						<view class="p_desc">25×35mm | 295×413px</view>
				 					 </view>
				 					 <view class="p_right">
				 						 <view class="distance">
															 <view class="ing">生成中...</view>
				 						 </view>
				 					 </view>
				 </view>	 
				 
				 
				<view class="imgBox">
									 <view class="p_left">
										 <image class="p_bg" src="/static/img/index/zj_icon.png" mode="aspectFill"></image>
									 </view>
									 <view class="p_center">
										 <view class="p_title">一寸照</view>
										 <view class="p_desc">25×35mm | 295×413px</view>
									 </view>
									 <view class="p_right">
										 <view class="distance">
										 	<image src="/static/img/index/right.png" mode="widthFix"></image>
										 </view>
									 </view>
				</view>	 	  
				 
				
			  </view>
			  <u-empty icon="/static/img/user/nodata.png" mode="list" text="暂无数据，快去添加吧！" width="180rpx" marginTop="120px"></u-empty>	
			  <view class="newBtn">去创建</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>	
		
		
		
		
	</view>
</template>

<script>
import custom_navbar from "../index/components/header.vue";

export default {
	components: {
	  	custom_navbar
	  
	},
	data() {
		return {
			navbar_title: '',
			theme: "blue",
			margin_top: 0,
			
			
			isLogin:false, //登录
			info:{
				avatar:'/static/img/user/avatar.png',
				nick_name:'点击登录',
			},
			tabList: [
							{
			                    name: 'AI写真',
			                }, {
			                    name: '证件照合成',
			                }, {
			                    name: '证件照换色'
			                }, {
			                    name: '卡通风格'
			                }
					 ],
			current:0,		 
			
		};
	},
	onPageScroll(e) {
		if (e.scrollTop > 50) {
			this.theme = 'white';
			this.navbar_title='个人中心';
		} else {
	
			this.theme = 'blue';
			this.navbar_title='';
		}
	},
	onReady: function (res) {
		
	},
	onShow() {
		var _this =this;
		_this.getUserInfo();
		
		
	},
	onShareAppMessage() {
	    return {
	      title: '智能拍照合成-我的',
	      path: uni.$u.page(),
	    }
	},
	onShareTimeline() {
	    return {
	      title: '智能拍照合成-我的',
	      path: uni.$u.page(),
	    }
	},
	methods:{
		getNavHeight(e) {
			this.margin_top += e;
		},
		//头像加载失败
		imgErr(){
			this.info.avatar = '/static/img/user/avatar.png';
		},
		//获取用户信息
		getUserInfo()
		{
			var _this =this;
			var post ={};
			_this.$api.get('api/userInfo',post,function(rs){
				console.log('用户信息',rs);
				var oldToken = _this.$user.session('token');
				//先缓存
				_this.$user.session('userInfo',rs);
				if(!_this.$com.isNull(rs.token) && oldToken != rs.token)
				{
					_this.$user.session('token',rs.token);
				}
				//显示
				var userInfo = rs;
				if(_this.$com.isNull(userInfo.nick_name) )
				{
					userInfo.nick_name = '微信用户';
				}
				if(_this.$com.isNull(userInfo.avatar))
				{
					
					userInfo.avatar = '/static/img/user/avatar.png';
				}
				else
				{
					userInfo.avatar = _this.$api.ossurl(userInfo.avatar);
				}
				_this.info = userInfo;
			},function(err){
				console.log(err);
			});
			
			
			
			
		
			
		},
		goTo(url)
		{
			uni.$u.route({
				type:'navigateTo',
				url: url,
			});
		},
		//选项卡选择
		tabChange(e)
		{
			var _this =this;
			console.log(e);
			_this.current = e.index;
		},
		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: 580rpx; 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: 100rpx; height: 120rpx;}
	.userInfo .uleft .u-image{margin-top: 20rpx;}
	.userInfo .ucenter{ width: 450rpx; height: 120rpx; line-height: 120rpx;}
	.userInfo .ucenter .name{ width: 100%; height: 120rpx;}
	.userInfo .ucenter .name .username{font-size: 32rpx; color:#333333; font-weight: 700; 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: 40rpx;}

	.boxBg{
		width: 702rpx;
		height: 160rpx;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		position: relative;
		margin: 0rpx auto 20rpx auto;
	}
	.box_bg{
		width: 100%;
		height: 100%;
		position:absolute; 
		background-size:100% 100%;
		z-index: -1;
	}
	.mbBox{width: 100%; height: 160rpx; display: flex;}
	.mleft{width: 50%;}
	.mleft .mb_title{
		font-weight: 700;
		font-size: 30rpx;
		color: #333333;
		line-height: 90rpx;
		padding-left: 20rpx;
		}
	.mleft .mb_desc{
		font-weight: 400;
		font-size: 24rpx;
		color: #555555;
		line-height: 40rpx;
		padding-left: 20rpx;
	}
	.mright{width: 50%; height: 160rpx; display: flex;}
	.mbItem{ width: 80rpx; height: 80rpx; margin: 40rpx auto;}
	.mbItem image{width: 80rpx; height: 80rpx; }

	.nowENV{ width: 200rpx; height: 60rpx; margin: 10rpx auto; text-align: center;}
	.empty{width: 100%; height: 20rpx;}
	
	.newBtn{
		width: 400rpx;
		height: 88rpx;
		line-height: 88rpx;
		border-radius: 48rpx;
		border: 2rpx solid #9B75FF;
		text-align: center;
		margin: 20rpx auto;
		color: #9B75FF;
		font-size: 30rpx;
		font-weight: bold;
	}
	
	.datalist{ width: 100%; height: auto;}
	.picBox{
		width: 702rpx;
		height: 160rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 20rpx auto;
		display: flex;
	}
	.picBox .p_left{ width: 112rpx; height: 112rpx; margin: 24rpx 24rpx; position: relative;}
	.picBox .p_left .p_bg{
		width: 100%;
		height: 100%;
		position:absolute; 
		background-size:100% 100%;
		border-radius:20rpx;
	}
	.picBox .p_left .p_pic{
		width: 100%;
		height: 100%;
		position:absolute; 
		z-index: 2;
		opacity: 0.8;
		border-radius:20rpx;
	}
	.picBox .p_center{ width: 342rpx; height: 160rpx; line-height: 160rpx; }
	.picBox .p_center .p_title{
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
	}
	.picBox .p_right{width: 200rpx;height: 160rpx;}
	.picBox .p_right .distance{ width: 100%; height: 160rpx; text-align: right;}
	.picBox .p_right .distance image{ width: 32rpx; height: 32rpx; margin: 65rpx 24rpx auto auto;}
	.picBox .p_right .distance .ing{
		height: auto;
		font-weight: 400;
		font-size: 24rpx;
		color: #FF4F34;
		line-height: 34rpx;
		margin: 65rpx 24rpx auto auto;
	}
	
	
	.imgBox{
		width: 702rpx;
		height: 160rpx;
		background: #FFFFFF;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 20rpx auto;
		display: flex;
	}
	.imgBox .p_left{ width: 72rpx; height: 72rpx; margin: 44rpx 24rpx 44rpx 24rpx; position: relative;}
	.imgBox .p_left .p_bg{
		width: 100%;
		height: 100%;
		position:absolute; 
		background-size:100% 100%;
		border-radius:20rpx;
	}
	.imgBox .p_left .p_pic{
		width: 100%;
		height: 100%;
		position:absolute; 
		z-index: 2;
		opacity: 0.8;
		border-radius:20rpx;
	}
	.imgBox .p_center{ width: 362rpx; height: 160rpx; }
	.imgBox .p_center .p_title{
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		line-height: 80rpx; 
		margin-top: 20rpx;
	}
	.imgBox .p_center .p_desc{
		font-weight: 400;
		font-size: 24rpx;
		color: #999999;
		line-height: 40rpx; 
	}
	.imgBox .p_right{width: 200rpx;height: 160rpx;}
	.imgBox .p_right .distance{ width: 100%; height: 160rpx; text-align: right;}
	.imgBox .p_right .distance image{ width: 32rpx; height: 32rpx; margin: 65rpx 24rpx auto auto;}
	.imgBox .p_right .distance .ing{
		height: auto;
		font-weight: 400;
		font-size: 24rpx;
		color: #FF4F34;
		line-height: 34rpx;
		margin: 65rpx 24rpx auto auto;
	}
</style>
