<template>
	<view>
		<view class="content photo_back">
			<custom_navbar :title="navbar_title" @getNavHeight="getNavHeight" :theme="theme" />
			<view class="photo_main" :style="'margin-top:'+margin_top+'px'">
				<view class="photo_tem_1">
					<view class="photo_tem_1_head">
						<view class="photo_tem_1_head_1">
							<image mode="aspectFill" :src="album.face"></image>
						</view>
						<view class="photo_tem_1_head_2">
							<view class="photo_tem_1_head_2_1">{{album.title}}</view>
							<view class="photo_tem_1_head_2_2">{{album.describe}}</view>
						</view>
						<view class="photo_tem_1_head_3">
							<view class="y_btn">
								免费
							</view>
						</view>
					</view>

					<view class="photo_tem_1_2">
						<u-swiper :list="album.back_image" 
						indicator indicatorMode="line" 
						circular
						 radius="24rpx"
						 height="880rpx"
						
						></u-swiper>
					</view>

				</view>
			
				<view class="photo_tem_2" v-if="show_btn" @click="checkHave">
					使用模板生成
				</view>
			</view>

		</view>
		
		<u-popup :show="select_show" :round="10" mode="center" bgColor="transparent" @close="close('select_show')" @open="open('select_show')">
		            <view class="popupBox">
		                <view class="popupTop">
						请选择需要生成写真的面部档案
						</view>
						<view class="popupDesc">
							<scroll-view class="scrollBox" scroll-x="true" @scroll="scroll" scroll-left="0">
									
									<view class="imgBox"  v-for="(item,index) in selectList" :key="index" @click="selectPortrait(index,item)">
										<image class="imgBg" :src="item.model_image_thumbnail" mode="widthFix"></image>
										<image class="imgLoadingImg" src="/static/img/index/loading.gif" mode="widthFix" v-if="item.status != 3"></image>
										<view class="imgLoadingTxt" v-if="item.status != 3">
											<text v-if="item.status == 1">排队中</text>
											<text v-if="item.status == 2">训练中</text>
											<text v-if="item.status == 4">失败</text>
										</view>
										<image class="imgSelect" v-if="index == selectIndex" src="/static/img/index/select.png" mode="widthFix"></image>
									</view>
									
									<!-- <view class="imgBox">
										<image class="imgBg" src="/static/img/user/user.png" mode="widthFix"></image>
										<image class="imgSelect" src="/static/img/index/select.png" mode="widthFix"></image>
									</view>
										
									<view class="imgBox">
										<image class="imgBg" src="/static/img/user/user.png" mode="widthFix"></image>
										
									</view>	
										
									<view class="imgBox">
										<image class="imgBg" src="/static/img/user/user.png" mode="widthFix"></image>
										
									</view>		 -->
							</scroll-view>	
						</view>
						<view class="popupBtn">
							<view class="sbtnBox1 a1" @click="close('select_show')">取消</view>
							<view class="sbtnBox1 a2" @click="submit('select_show')">确认</view>
						</view>
		            </view>
		</u-popup>
		
		
		<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>
							<view class="sbtnBox1 a2" @click="submit('tips_show')">前往创建</view>
						</view>
		            </view>
		</u-popup>	
		

	</view>
</template>

<script>
	import custom_navbar from "./components/photo_header.vue";
	export default {
		components: {
			custom_navbar

		},
		data() {
			return {
				navbar_title: 'AI写真',
				theme: "white",
				margin_top: 10,
				album_id:0, //写真模版id
				album:'',
				portrait_id:0,
				
				
				//选面部档案 弹窗
				select_show:false,
				//弹窗
				tips_show: false,
				content: `<p>目前系统还未存入您的面部档案信息，</p>
						  <p>请先前往创建需要生成写真的面部档案</p>
						  <p>创建成功后再次生成</p>`,
				style: {
							// 字符串的形式
					
							p: 'font-weight: 400;font-size: 28rpx;color: #555555;line-height: 60rpx;',
						
					 },
				
				//选择面部档案
				selectList:[],
				selectIndex:0,//默认选第一个
				show_btn:false,
				
				
				
				photo_list: [
					'https://img30.360buyimg.com/sku/jfs/t1/221254/4/39390/74349/661e039aF46114279/48532008a0001dd0.jpg',

					'https://img30.360buyimg.com/sku/jfs/t1/221254/4/39390/74349/661e039aF46114279/48532008a0001dd0.jpg',
					'https://img30.360buyimg.com/sku/jfs/t1/221254/4/39390/74349/661e039aF46114279/48532008a0001dd0.jpg',
				],
				

			}
		},
		onLoad(option) {
			//数据
			var _this =this;
			var id = option.id;
			if(_this.$com.isNull(id))
			{
				uni.navigateBack({
					delta:1,
				})
			}
			_this.album_id = id;
			_this.geAlbumtDetail();
			//_this.getFace()
		},
		onShow() {
			
		},
		
		
		methods: {

			getNavHeight(e) {
				this.margin_top += e;
			}
			,
		
			selectThis(index,id){
				this.select_id = id;
				this.select_index = index;
			},
			geAlbumtDetail()
			{
				var _this =this;
				var post = {
					id:_this.album_id,
				};
				_this.$api.get('api/album/details',post,function(rs){
						console.log(rs);
						var Data = rs;
						Data.face = _this.$api.ossurl(Data.face);
						var back_image = Data.back_image;
						back_image.forEach((item, index) => {
							back_image[index] = _this.$api.ossurl(item);
						}); 
						Data.back_image = back_image;
						_this.album = Data;
						_this.show_btn = true;
				});
			},
			checkHave()
			{
				var _this =this;
				_this.getPortraitList();
			},
			//获取面部档案
			getPortraitList(){
				var _this =this;
				var post = {};
				_this.$api.get('api/portrait/list', post, function(res) {
					
								var d = res;
								console.log(d);
								if(d.length == 0)
								{
									_this.tips_show = true;
								}
								else
								{
									var selectList = d;
									selectList.forEach((item, index) => {
										selectList[index].model_image = item.model_image ? _this.$api.ossurl(item.model_image): '/static/img/index/p_bg.png';
										selectList[index].model_image_thumbnail = item.model_image_thumbnail ? _this.$api.ossurl(item.model_image_thumbnail) : '/static/img/index/p_bg.png';
									});
									_this.selectList = selectList;
									_this.selectIndex = 0;
									_this.select_show = true;
								}
				});	
			},
			//选择面部档案
			selectPortrait(index,item)
			{
				var _this =this;
				if(item.status == 3)
				{
					_this.selectIndex = index;
				}
			
			},
			open(key) {
			   console.log('open',key);
			},
			close(key) {
				var _this = this;
			    _this[key] = false;
			 
			},
			//自定义 确认
			submit(key){
				var _this =this;
				
				 switch(key)
				 {
					 //显示提示信息 跳转到创建面部档案
					 case 'tips_show':
						_this.close(key);
						uni.navigateTo({
							url:'/pagesA/merge/face_1'
						});
					 break;
					 //选择面部档案 跳转到选择模板信息
					 case 'select_show':
						_this.portrait_id = _this.selectList[_this.selectIndex].id;
						_this.close(key);
						var album_id = _this.album_id;
						var portrait_id = _this.portrait_id;
						var post = {
							album_id:album_id,
							portrait_id:portrait_id,
						};
						_this.$com.showLoading('保存图片中');
						_this.$api.post('api/album/append', post,function(rs){
								console.log(rs);
								_this.$com.hideLoading();
								uni.navigateTo({
									url:"/pagesA/merge/success"
								});
								
						});				
					 break;
					
				 }
				 
				 
				 
			},

		}
	}
</script>

<style lang="scss" scoped>
	@import './this.scss';
	
	.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; /* 如果需要垂直居中子元素 */
	}
	.sbtnBox{
		margin: 30rpx auto;
		width: 478rpx;
		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;
	}

	.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;
		
	}
	.scrollBox {
	 	width: 100%;
	 	height: 160rpx;
	 	white-space: nowrap;
	 	
	 }
	.imgBox{width: 160rpx; height: 160rpx; position: relative; margin: 0rpx 0rpx 0rpx 20rpx; display: inline-block; overflow: hidden;}
	.imgBox .imgBg{width: 160rpx; height: 160rpx; border-radius: 20rpx; position: absolute; left: 0; top: 0;}
	.imgBox .imgLoadingImg{ width: 60rpx; height: 60rpx;position: absolute; left: 50rpx; top: 40rpx;}
	.imgBox .imgLoadingTxt{ width: 100%; height: 40rpx; text-align: center; color:#FFFFFF; font-size: 24rpx;position: absolute; top: 100rpx;}
	.imgBox .imgSelect{width: 40rpx; height: 34rpx;position: absolute; bottom: 0; right: 0; z-index: 5;}
	.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>