<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" v-for="(item,index) in portraitList" :key="index">
							<image v-if="item.can == true" :src="item.image" mode="widthFix" @click="goTo('/pages/user/archives/detail?id='+item.id)"></image>
							<image v-if="item.can == false" :src="item.image" mode="widthFix" @click="showShare"></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 class="imgBox" v-for="(item,index) in dataList" :key="index" @click="viewDetail(item)">
									 <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">{{item.specs.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" v-if="item.status == 3"></image>
															<view class="ing" v-if="item.status == 1">排队中...</view>
															<view class="ing" v-if="item.status == 2">生成中...</view>
															<view class="ing" v-if="item.status == 2">生成失败</view>
										 </view>
														 
									 </view>
				</view>
				 
				
			  </view>
			  <u-empty icon="/static/img/user/nodata.png" mode="list" text="暂无数据，快去添加吧！" width="180rpx" marginTop="120px" v-if="dataList.length == 0"></u-empty>	
			  <view class="newBtn" @click="createNew" v-if="dataList.length == 0">去创建</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="tips_show" :round="10" mode="center" bgColor="transparent" @close="close('tips_show')" @open="open('tips_show')">
		            <view class="popupBox">
		                <view class="popupTop">
							提醒
						</view>
						<view class="popupDesc1">
							<u-parse :content="content" :tagStyle="style"></u-parse>
							
						</view>
						<view class="popupBtn">
							<view class="sbtnBox1 a1" @click="close('tips_show')">取消</view>
							<button class="sbtnBox1 a2" open-type="share" @click="submit('tips_show')">去分享</button>
						</view>
		            </view>
		</u-popup>	
		
	</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:'点击登录',
			},
			sceneList:[], //场景	
			tabList: [
							{
								type:1,
			                    name: '证件照合成',
			                }, {
								type:2,
			                    name: '证件照换色',
			                }, {
								type:3,
			                    name: 'AI写真'
			                }, {
								type:4,
			                    name: '卡通风格'
			                }
					 ],
			current:0,
			//档案
			portraitList:[],	
			
			//分页
			page: 1,	 
			dataList:[],
			
			//弹窗
			tips_show: false,
			content: `<p>分享给好友，好友注册登录成功即可解 </p>
					  <p>锁新的面部档案，可生成他人的写真集</p>`,
			style: {
						// 字符串的形式
				
						p: 'font-weight: 400;font-size: 28rpx;color: #555555;line-height: 60rpx;',
					
				 },
		};
	},
	onPageScroll(e) {
		if (e.scrollTop > 50) {
			this.theme = 'white';
			this.navbar_title='个人中心';
		} else {
	
			this.theme = 'blue';
			this.navbar_title='';
		}
	},
	onReady: function (res) {
		var _this = this;
		console.log('/pages/user/photo/merge?url='+encodeURIComponent('https://resourcedev.aicverse.com/ai_tour/spot_template/2.jpg'));
	},
	onShow() {
		var _this =this;
		_this.getUserInfo();
		//场景信息
		_this.getSceneMenu();
		//面部档案
		_this.getPortraitList();
		_this.tabChange({index:0});
		
	},
	onReachBottom () {
	
	    this.page++;
	    this.loadDataList();
	
	},
	onShareAppMessage() {
		var _this = this;
		var userInfo = _this.$user.session('userInfo');
		var str = !_this.$com.isNull(userInfo.invite_code) ? '?invite_code='+userInfo.invite_code :'';
		return {
		  title: '智能拍照合成',
		  content:'证件照合成,换色,AI写真,卡通画风',
		  imageUrl:'',
		  path: '/pages/index/index'+str,
		}
	},
	onShareTimeline() {
	   var _this = this;
	   var userInfo = _this.$user.session('userInfo');
	   var str = !_this.$com.isNull(userInfo.invite_code) ? '?invite_code='+userInfo.invite_code :'';
	   return {
	     title: '智能拍照合成',
	     content:'证件照合成,换色,AI写真,卡通画风',
	     imageUrl:'',
	     path: '/pages/index/index'+str,
	   }
	},
	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;
			var type = _this.tabList[_this.current].type;
			_this.dataList = [];
			_this.page = 1;
			switch(type)
			{
				case 1:
				_this.loadDataList('api/photo_synthesis/list');
				break;
				case 2:
				_this.loadDataList('/api/photo_back_color/list');
				break;
				case 3:
				
				break;
				case 4:
				
				break;
			}
		},
		loadDataList(url)
		{
			var _this = this;
			var post = {page:_this.page,limit:10};
			_this.$api.get(url, post, function(res) {
						//console.log(res);
						var d = res;
						_this.dataList = _this.dataList.concat(d.data);
	
			});
		},
		//合照场景
		getSceneMenu(){
			var _this =this;
			 _this.$api.get('api/photo/scene_list', {},function(res){
							console.log('场景',res);
							 var sceneList = res;
							 sceneList.forEach((item, index) => {
							 	sceneList[index].name = item.title;
							 });
							 _this.tabList = sceneList;
							
			}); 
		},
		//档案
		getPortraitList(){
			var _this =this;
			var config = _this.$user.session('app_config');
			var all = config.photo.photo_model_number; //系统总数
			var user = _this.$user.session('userInfo');
			var can_num = user.attach.user_face.available_number; //可使用数量
			var use_num = user.attach.user_face.used_already_number;//已使用数量
			var baseList = [];
			for (var i=1; i<= all; i++)
			{
				//console.log(i,can_num);
			    if(i <= can_num)
				{
					baseList.push({id:0,image:'/static/img/user/have.png',can:true});
				}
				else
				{
					baseList.push({id:0,image:'/static/img/user/have_no.png',can:false});
				}
			}
			var post ={};
			_this.$api.get('api/portrait/list',post,function(rs){
				console.log('档案信息',rs);
				if(rs.length > 0)
				{
					rs.forEach((item, index) => {
						baseList[index].id = item.id;
						if(!_this.$com.isNull(item.model_image_thumbnail))
						{
							baseList[index].image = _this.$api.ossurl(item.model_image_thumbnail);
						}
						
					})
				}
				_this.portraitList = baseList;
			});
			
		},
		createNew(){
			var _this =this;
			var type = _this.tabList[_this.current].type;
			switch(type)
			{
				case 1:
				uni.navigateTo({
					url:'/pagesA/merge/index',
				})
				break;
				case 2:
				uni.navigateTo({
					url:'/pagesA/color/index',
				})
				break;
				case 3:
				uni.navigateTo({
					url:'/pagesA/photo/photo_1',
				})
				break;
				case 4:
				uni.navigateTo({
					url:'/pagesA/photo/cartoon_1',
				})
				break;
			}
			
		},
		viewDetail(item){
			var _this =this;
			var type = _this.tabList[_this.current].type;
			if(item.status != 3)
			{
				_this.$com.showError('照片生成中,请等待');
				return;
			}
			switch(type)
			{
				case 1:
				uni.navigateTo({
					url:'/pages/user/photo/merge?url='+encodeURIComponent(_this.$api.ossurl(item.merge_image)),
				})
				break;
				case 2:
				uni.navigateTo({
					url:'/pagesA/color/index',
				})
				break;
				case 3:
				uni.navigateTo({
					url:'/pagesA/photo/photo_1',
				})
				break;
				case 4:
				uni.navigateTo({
					url:'/pagesA/photo/cartoon_1',
				})
				break;
			}
		},
		//显示分享弹窗1
		showShare(){
			this.tips_show = true;
		},
		open(key) {
		   console.log('open',key);
		},
		close(key) {
			var _this = this;
		    _this[key] = false;
		 
		},
		submit(key){
			var _this =this;
			_this.close(key);
			
		},
	},
};
</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; overflow: hidden; border-radius: 50%;}
	.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;
	}
	
	
	
	.popupBox{
		width: 600rpx;
		height: auto;
		border-radius: 24rpx;
		background-color: #FFFFFF;
	}
	.popupTop{
		width: 600rpx;
		height: 140rpx;
		background: linear-gradient(to bottom, #D3D5FF 20%, #FFFFFF 50%);
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		line-height: 140rpx;
		text-align: center;
		font-weight: 700;
		font-size: 30rpx;
		color: #333333;
	}
	
	.popupBtn{ width: 100%; height: auto;
	    display: flex; flex-wrap: wrap;
		justify-content: space-around; /* 使子元素在容器中均匀分布 */
		align-items: center; /* 如果需要垂直居中子元素 */
	}

	.sbtnBox1{
		margin: 30rpx auto;
		width: 226rpx;
		height: 80rpx;
		font-weight: 700;
		font-size: 30rpx;
		line-height: 80rpx;
		border: 2rpx solid #4D94FF;
		text-align: center;
		border-radius: 44rpx;
		
	}
	
	.popupDesc{
		width:560rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #555555;
		height: auto;
		padding: 0rpx 20rpx;
	}
	
	.popupDesc1{
		width:480rpx;
		font-weight: 400;
		font-size: 28rpx;
		color: #555555;
		height: auto;
		padding: 0rpx 60rpx;
	}


	.a1{
		background: linear-gradient( 270deg, rgba(46,87,241,0.15) 0%, rgba(131,88,246,0.15) 100%);
		color:#7A74F0;
	}
	.a2{
		background: linear-gradient( 270deg, #2E57F1 0%, #8358F6 100%);
		color:#FFFFFF;
	}
	.a3{
		background: linear-gradient( 270deg, #2E57F1 0%, #8358F6 100%);
		color:#FFFFFF;
	}
	
		
</style>
