<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="search_div" style="margin-top: 20rpx;">
					<view class="search_div_1">
						<image src="/static/img/common/search_icon.png" />
					</view>
					<view class="search_div_2">
						<u--input placeholder="请输入搜索内容" border="none" v-model="search_text"></u--input>
					</view>
					<view class="search_div_3" @tap="goSearch">搜索</view>
				</view>


				<view class="tabs_div1">
					<u-tabs @click="changeTab()"  :current="this_tab" :list="tabList" lineWidth="25" lineHeight="10"
						:lineColor="`url(${lineBg}) 100% 100%`" :activeStyle="{
					        color: '#333333',
					        fontWeight: 'bold',
					        transform: 'scale(1.2)'
					    }" :inactiveStyle="{
					        color: '#333333',
					        transform: 'scale(1)'
					    }" itemStyle="padding-left: 15; padding-right:15px; height: 100rpx; width:203rpx">
					</u-tabs>
				</view>


				<scroll-view class="photo_list_div" 
				enable-flex="true" 
				scroll-y="true"
				 scroll-with-animation="true"
				 @scrolltolower="lower"
				  
				 lower-threshold="50">
					
				<view class="listBox">
								 <view class="photoBox" v-for="(item,index) in temList" :key="index" @click="checkHave(item,item.ilk)" v-if="item.ilk != 2">
								 	<view class="photoTop">
								 		<view class="topLeft">
								 			<image :src="item.icon" mode="widthFix" @error="specsErr(index)"></image>
								 		</view>
								 		<view class="topCenter">
								 			<view class="title">{{item.title}}</view>
								 			<view class="desc" v-if="item.ilk == 1 || item.ilk == 2">{{item.w_h_mm.w}}×{{item.w_h_mm.h}}mm | {{item.w_h_px.w}}×{{item.w_h_px.h}}px</view>
								 			<view class="desc" v-else>自己设置照片的宽和高</view>
								 		</view>
								 		<view class="topRight">
								 			<view class="distance">
								 				<image src="/static/img/index/right.png" mode="widthFix"></image>
								 			</view>
								 		</view>
								 	</view>
								 </view>
								 
								<!-- <view class="photoBox" @click="showEdit">
								 	<view class="photoTop">
								 		<view class="topLeft">
								 			<image src="/static/img/index/zj_icon.png" mode="widthFix"></image>
								 		</view>
								 		<view class="topCenter">
								 			<view class="title">自定义寸照</view>
								 			<view class="desc">自己设置照片的宽和高</view>
								 			
								 		</view>
								 		<view class="topRight">
								 			<view class="distance">
								 				<image src="/static/img/index/right.png" mode="widthFix"></image>
								 			</view>
								 		</view>
								 	</view>
								 </view> -->
									 
								
									 
				</view>	 
				</scroll-view>


			</view>

		</view>

		<u-popup :show="custom_show" :round="10" mode="center" bgColor="transparent" @close="close('custom_show')" @open="open('custom_show')">
		            <view class="popupBox">
		                <view class="popupTop">
						自定义尺寸
						</view>
						<view class="popupDesc">
							<view class="inputLine">
								<view class="item1">尺寸(必填)</view>
								<view class="item2">
									<u-input
									    placeholder="宽"
									    border="surround"
										type="number"
									    v-model="FormData.w"
									  ></u-input>
								</view>
								<view class="item3">x</view>
								<view class="item4">
									<u-input
									    placeholder="高"
									    border="surround"
										type="number"
									    v-model="FormData.h"
									  ></u-input>
								</view>
								<view class="item5">PX</view>
							</view>	
							<view class="inputLine">
								<view class="item1">文件大小</view>
								<view class="item2">
									<u-input
									    placeholder="最小"
									    border="surround"
										type="number"
									    v-model="FormData.min"
									  ></u-input>
								</view>
								<view class="item3">-</view>
								<view class="item4">
									<u-input
									    placeholder="最大"
									    border="surround"
										type="number"
									    v-model="FormData.max"
									  ></u-input>
								</view>
								<view class="item5">KB</view>
							</view>	
						</view>
						<view class="popupBtn">
							<view class="sbtnBox1 a1" @click="close('custom_show')">取消</view>
							<view class="sbtnBox1 a2" @click="submit('custom_show')">确认</view>
						</view>
		            </view>
		</u-popup>		

		<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 "../photo/components/photo_header.vue";
	export default {
		components: {
			custom_navbar

		},
		data() {
			return {
				navbar_title: '证件照合成',
				theme: "white",
				search_text: '', //搜索关键词
				margin_top: 0,
				lineBg: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAOCAYAAABDwm71AAAAAXNSR0IArs4c6QAAAm5JREFUSEu1lD1oFEEUx39vZhOCpghikUIwkMKAjYWFEEELQdQTRfwqLGyMgsFcNDEWEbYQNB+Sw7ugdilSBDQ2tikSsFCwsBFiIVikSBEwQoRLuMzT3ds9z8vtXcjHwOzCzs57v/ef/xshGmdeaLsVUgZQYeZ9t3yN13bz/bpf2wVSYQ7DTNdQMa8Ej1RO76JkRPBQ8JS8OAbfpeX5bkLlHumAcTyxihcIAuSBvlsjMi7nc3pY4TPQFJIq2GiKY3TpF49nfQk27NjwffX25RkzSreJckVggS4FhQ5JZbVHhEwpaxlYsMk4PjYYbk6m5dtOkGUG9ZBzTFjHsUCASrAgh0I6BKMMrFyxeJN15A28susMTTyUxa0A+v3auqeRHqP0GcWLTyURLDL9fOivCHfDpljFAFCZ8oS3P38z98aXlVqQvq/N4jjhKddNcYZApYKrK5ZXw9HQ/OfG9YEoo5UeK1VTcbwhuKPwN9m8VeYNLHqO5cAnxtFs4YBxdFilw4BnXdG3teLFHgO6Q/PHFZ/N6QUDU6I0JSpWL3iVAsrsUA8sr3Cja0SmS9dF6S7LameDMmmgrW6FtSCKTVNUiVDdeootoFy+PSqfYpaSYvGHi2PaIoaXhtAT/wXcFqyrfpQCE2ur9PZmZLncrxvA4sVLWe206+SscqSqWberGHwRSN97KnPVGigRLP75akZPNzjSxnHKgrdlFYuKFQzMWMez+wlAiUeZ1P5XhrV1r+GacZy0cNwo+2s2yT+PLXmOD1aZlTWmB4ZlYTP3YF3FkoLc8bVNGjkYNUqLB82R0VeMY9kTfqw6vg/7mwOpzPMHTiZrgwPNrpsAAAAASUVORK5CYII=',
				
				// 1：普通寸照，2：考试寸照，3：社会寸照
				tabList: [{
					type:1,
					name: '普通寸照'
				}, {
					type:2,
					name: '考试寸照',
				},
				{	
					type:3,
					name: '社会寸照',
				}],
				this_tab:0,
				
				curPage: 0,
				total: 0,
				temList:[],
				
				//自定义弹窗
				custom_show:false,
				//选面部档案 弹窗
				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,//默认选第一个
				
				//传值
				FormData:{
					ilk:1,
					specs_id:0, //证件照合成规格id
					portrait_id:0, //用户面部形象id
					template_id:0,//证件照合成模版id
					w:'',
					h:'',
					
					min:'',
					max:'',
					
					image_suffix:0,
				},
			}
		},
		onLoad(options){
			var _this =this;
			if(!_this.$com.isNull(options.id))
			{
				var tabList = 	_this.tabList;
				var this_tab =  tabList.findIndex(item => item.type == options.type);
				_this.this_tab = this_tab;
				_this.checkHave({id:options.id,type:options.type,ilk:options.ilk},options.ilk);
			}
			console.log('onLoad 参数',options);
			this.getList();
		},
	
		methods: {
			lower(){
				console.log('this is lower')
				this.loadMore();
			},
			
			
			loadMore() {
			
				let isLoad = Math.ceil(this.total / 10) > this.curPage;
				if (isLoad) {
					this.getList();
				}
			},
			
			getNavHeight(e) {
				this.margin_top += e;
			},
			goSearch() {
				this.total =0;
				this.temList=[];
				this.curPage = 0;
				this.getList();
			},
			changeTab(e) {
				this.this_tab = e.index;
				this.total =0;
				this.temList = [];
				this.curPage = 0;
				let that = this;
				setTimeout(function(){
					that.getList();
				},1000)
			},
			
		
			
			getListData(){
				let list =  [
						{
						  "id": 3,
						  "type": 1,
						  "ilk": 1,
						  "title": "大一寸照",
						  "icon": "https://resourcedev.aicverse.com/ai_tour/assets/static/images/map/scenic_HL.png",
						  "w_h_mm": {
							"h": "48",
							"w": "33"
						  },
						  "w_h_px": {
							"h": "567",
							"w": "390"
						  }
						},
						{
						  "id": 4,
						  "type": 1,
						  "ilk": 1,
						  "title": "小一寸照",
						  "icon": "https://resourcedev.aicverse.com/ai_tour/assets/static/images/map/scenic_HL.png",
						  "w_h_mm": {
							"h": "32",
							"w": "22"
						  },
						  "w_h_px": {
							"h": "378",
							"w": "260"
						  }
						},
						{
						  "id": 5,
						  "type": 1,
						  "ilk": 1,
						  "title": "三寸照",
						  "icon": "https://resourcedev.aicverse.com/ai_tour/assets/static/images/map/scenic_HL.png",
						  "w_h_mm": {
							"h": "84",
							"w": "55"
						  },
						  "w_h_px": {
							"h": "992",
							"w": "650"
						  }
						},
						{
						  "id": 6,
						  "type": 1,
						  "ilk": 1,
						  "title": "五寸生活照",
						  "icon": "https://resourcedev.aicverse.com/ai_tour/assets/static/images/map/scenic_HL.png",
						  "w_h_mm": {
							"h": "127",
							"w": "89"
						  },
						  "w_h_px": {
							"h": "1500",
							"w": "1050"
						  }
						}
					  ];
			
		
				
				return {total:32,list:list};
			},
			getList(){
				var _this =this;
					
	
				var post = {
					title:_this.search_text,
					type:_this.tabList[_this.this_tab].type,
					page:_this.curPage + 1,
					limit: 10,
				};
				_this.$api.get('api/specs/list', post, function(res) {
					
												var d = res;
												console.log(d);
								 
				
								_this.curPage = post.page;
								_this.total = d.total;
								var Data = d.data;
								Data.forEach((item, index) => {
									Data[index].icon = _this.$api.ossurl(item.icon);
								});
								_this.temList = _this.temList.concat(Data);
					
				});	
				
				
				
			},
			goThis(id){
				uni.navigateTo({
					url:'/pagesA/photo/photo_2?id='+id
				})
			},
			//证件照图片加载失败默认
			specsErr(index)
			{
				this.temList[index].icon = '/static/img/index/zj_icon.png';
			},
			//自定义
			showEdit(item){
				var _this = this;
				_this.custom_show = true;
			},
			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.FormData.portrait_id = _this.selectList[_this.selectIndex].id;
						_this.close(key);
						var FormData = _this.FormData;
						console.log(FormData);
						var str = '?specs_id='+FormData.specs_id+'&portrait_id='+FormData.portrait_id+'&ilk='+FormData.ilk;
						if(FormData.ilk == 3)
						{
							str += '&w='+Number(FormData.w)+'&h='+Number(FormData.h)+'&min='+Number(FormData.min)+'&max='+Number(FormData.max);
						}
					 	uni.navigateTo({
					 		url:'/pagesA/merge/idcard'+str,
					 	});
					 break;
					 //自定义尺寸确认操作
					 case 'custom_show':
						var FormData = _this.FormData;
					
						if(!_this.$com.check(FormData.w,'digits') || !_this.$com.check(FormData.h,'digits'))
						{
							_this.$com.showError('宽/高必须为整数');
							return;
						}
						if(!_this.$com.check(FormData.min,'digits') || !_this.$com.check(FormData.max,'digits'))
						{
							_this.$com.showError('最小/最大必须为整数');
							return;
						}
						if(Number(FormData.min) >= Number(FormData.max))
						{
							_this.$com.showError('填写的最小值不能大于最大值');
							return;
						}
						_this.close(key);
						_this.getPortraitList();
					 break;
				 }
				 
				 
				 
			},
			//判断选择
			checkHave(item,ilk){
				var _this = this;
				_this.FormData.ilk = ilk; //区分正常 还是 自定义
				_this.FormData.specs_id = item.id;
				if(ilk == 1 || ilk == 2) //正常的 && 结婚
				{
					_this.getPortraitList();
				}
				else //自定义
				{
					_this.showEdit(item);
				}
				
				
				
					
				
				
			},
			//获取面部档案
			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;
				}
			
			},
			
			
		}
		
	}
</script>

<style lang="scss" scoped>
	@import '../photo/this.scss';

	// page {
	// 	//background-color: #E3E8FE !important;
	// }
	.tabs_div1{
		width:700rpx;
		margin: 10rpx auto;
	}
	
	.photo_back {
		background-color: #E3E8FE;
		min-height: 100vh;
		width: 100%;
		top: 0;
		left: 0;
		height: 100%;
		overflow: hidden;
	}
	
	
	.listBox{ width: 100%; height: auto;}
	 .photoBox{
	 	padding:20rpx 10rpx 10rpx 10rpx;
	 	height: auto;
	 	border-radius: 24rpx 24rpx 24rpx 24rpx;
	 	opacity: 1;
		background: #FFFFFF;
		width: 670rpx;
		margin: 15rpx auto;
	 }
	 .photoTop{width: 100%; height: auto; display: flex;
	 	
	 }
	 .photoTop .topLeft{
	 	width: 100rpx;
	 	height: 88rpx;
	 	
	 	}
	 .topLeft image{ width: 60rpx; height: auto; margin-left: 14rpx;}	
	 .photoTop .topCenter{
	 	width: 400rpx;
	 	height: auto;
	 	padding-left: 18rpx;
	 	
	 }
	 .topCenter .title{
	 	font-size: 30rpx;
		font-weight: 400;
	 	color:#333333;
	 	line-height: 50rpx;
	 	width: 100%;
	 	overflow: hidden;  //超出文本隐藏
	 	white-space: nowrap;  //不换行，只显示一行
	 	text-overflow: ellipsis;  //超出部分省略号显示
	 }
	 .topCenter .desc{
	 	font-size: 24rpx;
	 	color:#999999;
	 	line-height: 30rpx;
	 	width: 100%;
	 	overflow: hidden;  //超出文本隐藏
	 	white-space: nowrap;  //不换行，只显示一行
	 	text-overflow: ellipsis;  //超
	 }
	
	 
	 .photoTop .topRight{
	 	width: 160rpx;
	 	height: auto;
	 	text-align: right;
	 	
	 }
	 .topRight .distance{ color: #90A1AA; font-size: 24rpx; font-family: PingFang SC-Regular;  padding-top: 20rpx;}
	 .topRight .distance image{ width: 32rpx; height: 32rpx; margin-right: 24rpx;}



.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;
}
.inputLine{ width: 100%; height: 64rpx;  display: flex; margin: 10rpx auto;}
.inputLine .item1{width: 200rpx; height: 64rpx; line-height: 64rpx;text-align: center;}
.inputLine .item2{width: 140rpx;}
::v-deep  .item2 .u-input{height:64rpx; padding: 0rpx 10rpx !important; text-align: center !important;}
.inputLine .item3{width: 80rpx;text-align: center;height: 64rpx; line-height: 64rpx;}
.inputLine .item4{width: 140rpx;}
::v-deep .item4 .u-input{height:64rpx;padding: 0rpx 10rpx !important;text-align: center !important;}
.inputLine .item5{width: 80rpx; text-align: center;height: 64rpx; line-height: 64rpx;}
.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>