<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="list1" 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)">
								 	<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">{{item.w_h_mm.w}}×{{item.w_h_mm.h}}mm | {{item.w_h_px.w}}×{{item.w_h_px.h}}px</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"
									    v-model="value"
									    @change="change"
									  ></u-input>
								</view>
								<view class="item3">x</view>
								<view class="item4">
									<u-input
									    placeholder="高"
									    border="surround"
									    v-model="value"
									    @change="change"
									  ></u-input>
								</view>
								<view class="item5">PX</view>
							</view>	
							<view class="inputLine">
								<view class="item1">文件大小</view>
								<view class="item2">
									<u-input
									    placeholder="最小"
									    border="surround"
									    v-model="value"
									    @change="change"
									  ></u-input>
								</view>
								<view class="item3">-</view>
								<view class="item4">
									<u-input
									    placeholder="最大"
									    border="surround"
									    v-model="value"
									    @change="change"
									  ></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">
										<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=',
				
				
				list1: [{
					name: '普通寸照'
				}, {
					name: '考试寸照',
				},
				{
					name: '社会寸照',
				}],
				this_tab:0,
				
				curPage: 0,
				total: 0,
				temList:[],
				
				//自定义弹窗
				custom_show:false,
				//选面部档案 弹窗
				select_show:false,
				//弹窗
				tips_show: false,
				content: `<p>目前系统还未存入您的面部档案信息，</p>
							<p>请先前往创建需要生成写真的面部档案</p>`,
				style: {
							// 字符串的形式
					
							p: 'font-weight: 400;font-size: 28rpx;color: #555555;line-height: 60rpx;',
						
					 },

			}
		},
		onLoad(){
			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(){
				
				let params = {
					page: this.curPage + 1,
					limit: 10,
					sex: this.this_tab,
					text:this.search_text				
				};
				
				let res = this.getListData();		
					
				
				this.curPage = params.page;				
				this.total = res.total;
				
				let datas = [...this.temList];
				
				if (params.page > 1) {
					datas.push(...res.list)
				} else {
					datas = res.list;					
				}
				
				this.temList = datas;
				
			},
			goThis(id){
				uni.navigateTo({
					url:'/pagesA/photo/photo_2?id='+id
				})
			},
			//证件照图片加载失败默认
			specsErr(index)
			{
				this.temList[index].icon = '/static/img/index/zj_icon.png';
			},
			//自定义
			showEdit(){
				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;
				 _this.close(key);
				 if(key == 'tips_show')
				 {
					 uni.navigateTo({
					 	url:'/pagesA/photo/face'
					 })
				 }
			},
			//判断选择
			checkHave(item){
				var _this = this;
				// 生成0到9之间的随机整数
				var randomNumber = Math.floor(Math.random() * 10);
				if(randomNumber > 5)
				{
					_this.select_show = true;
				}
				else
				{
					_this.tips_show = true;
				}
				
			},
			
			
		}
		
	}
</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;}
.imgBox .imgBg{width: 160rpx; height: 160rpx; border-radius: 20rpx; position: absolute; left: 0; top: 0;}
.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>