<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="https://img30.360buyimg.com/sku/jfs/t1/221254/4/39390/74349/661e039aF46114279/48532008a0001dd0.jpg" />
						</view>
						<view class="photo_tem_1_head_2">
							<view class="photo_tem_1_head_2_1">复古港风</view>
							<view class="photo_tem_1_head_2_2">走进中国香港90年代的繁华</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="photo_list" 
						indicator indicatorMode="line" 
						circular
						 radius="24rpx"
						 height="880rpx"
						
						></u-swiper>
					</view>

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

		</view>
		
		<u-popup :show="show_2" mode="center" bgColor="transparent" :round="12">
			<view class="show_readme_div" style="height: 380rpx;">
				<view class="show_readme_div_1">
					提醒
				</view>
				<view class="show_readme_div_2">
					<view>目前系统还未存入您的面部档案信息，请先前往创建需要生成写真的面部档案</view>
		
				</view>
				<view class="show_readme_div_line">
					<view class="show_readme_div_4" style="width: 220rpx;">
						暂不生成
					</view>
					<view class="show_readme_div_3" style="width: 220rpx;">
						前往创建
					</view>
				</view>
		
			</view>
		</u-popup>
		
		<u-popup :show="show_3" mode="center" bgColor="transparent" :round="12">
			<view class="show_readme_div" style="height: 440rpx;">
				<view class="show_readme_div_1">
					请选择需要生成写真的面部档案
				</view>
				<view class="show_readme_div_2" style="width: 520rpx;margin-left: 40rpx;">
					<view class="show_readme_div_2_1">
						<view class="show_readme_div_2_1_one" v-for="(item,index) in face_list" :key="index" @tap="selectThis(index,id)">
							<view class="show_readme_div_2_1_one_1">
								<image :src="item.url" />
							</view>
							<view class="show_readme_div_2_1_one_2" v-if="index == select_index">
								<image src="/static/img/common/photo_common_21.png" />
							</view>
						</view>
		
						
					</view>
		
				</view>
				<view class="show_readme_div_line">
					<view class="show_readme_div_4" style="width: 220rpx;">
						暂不生成
					</view>
					<view class="show_readme_div_3" style="width: 220rpx;" @tap="goUrl('/pagesA/pohto/face')">
						确定
					</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,
				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',
				],
				has_face : 1 ,//是否已有模板 及数量
				show_3:false,
				show_2:false,
				show_btn:false,
				face_list :[],	
				select_index:0,
				select_id:''

			}
		},

		mounted() {

		},
		onLoad() {
			this.getFace()
		},
		onShow() {
			
		},
		
		
		methods: {

			getNavHeight(e) {
				this.margin_top += e;
			}
			,
			getFace(){			
				
				if(this.has_face == 0){
					this.show_2 = true
				}else{
					for(let n=0;n<3;n++){
						let t = {};
						t.url = '/static/img/index/banner.png';
						this.face_list.push(t);
					}					
					this.show_3 = true
				}
			},
			selectThis(index,id){
				this.select_id = id;
				this.select_index = index;
			}
			
			

		}
	}
</script>

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