<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'" style="width: 100%;margin-left: 0;">
				<view class="idcard_1">
					<image :src="selectedImg" />
				</view>

				<view class="idcard_2">
					<view class="idcard_2_1">
						<u-tabs :list="list1" lineWidth="30" lineColor="#5A8FFF" :activeStyle="{
						              color: '#5A8FFF',
						              fontWeight: 'bold',
						              transform: 'scale(1.05)'
						          }" :inactiveStyle="{
						              color: '#999999',
						              transform: 'scale(1)'
						          }"></u-tabs>
					</view>
					
					<view class="idcard_2_2">
						<scroll-view class="idcard_2_2_1" 
						enable-flex="true"
						scroll-x="true"
						scroll-with-animation="true">
							<view style="overflow: hidden;" class="idcard_2_2_1_one" v-for="(item,key) in tem_list" :key="key" @tap="selectThis(key)">
								<view class="idcard_2_2_1_one_1">
									<image :src="item.url"/>
								</view>
								<view class="idcard_2_2_1_one_2" :style="key != selectedIndex ? 'display:none' : ''">
									<view class="idcard_2_2_1_one_2_1">
										<image src="/static/img/common/idcard_1.png"/>
									</view>
								</view>
							</view>
						</scroll-view>
						 
						
					</view>
				</view>
			</view>



		</view>



	</view>
</template>

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

		},
		data() {
			return {
				navbar_title: '二寸证件照',
				theme: "white1",
				margin_top: 10,
				selectedImg:'',
				selectedIndex:0,
				list1: [{
						id: 1,
						name: '女装'
					},
					{
						id: 2,
						name: '男装'
					},
				],
				tem_list: [{
						id: 1,
						url: '/static/img/index/banner.png'
					},
					{
						id: 2,
						url: 'https://img14.360buyimg.com/jdcms/s460x460_jfs/t1/234494/2/24198/178409/66a8aad1F59feafc5/41e6871120f47687.jpg'
					},
					{
						id: 3,
						url: '/static/img/index/banner.png'
					},
					{
						id: 4,
						url: 'https://img14.360buyimg.com/jdcms/s460x460_jfs/t1/234494/2/24198/178409/66a8aad1F59feafc5/41e6871120f47687.jpg'
					},
					{
						id: 5,
						url: '/static/img/index/banner.png'
					},
					{
						id: 6,
						url: 'https://img14.360buyimg.com/jdcms/s460x460_jfs/t1/234494/2/24198/178409/66a8aad1F59feafc5/41e6871120f47687.jpg'
					},
					{
						id: 7,
						url: '/static/img/index/banner.png'
					},
					{
						id: 8,
						url: 'https://img14.360buyimg.com/jdcms/s460x460_jfs/t1/234494/2/24198/178409/66a8aad1F59feafc5/41e6871120f47687.jpg'
					},
					{
						id: 9,
						url: '/static/img/index/banner.png'
					},
					{
						id: 10,
						url: 'https://img14.360buyimg.com/jdcms/s460x460_jfs/t1/234494/2/24198/178409/66a8aad1F59feafc5/41e6871120f47687.jpg'
					},
					{
						id: 11,
						url: '/static/img/index/banner.png'
					},
					{
						id: 12,
						url: 'https://img14.360buyimg.com/jdcms/s460x460_jfs/t1/234494/2/24198/178409/66a8aad1F59feafc5/41e6871120f47687.jpg'
					},
				]

			}
		},

		mounted() {

		},
		onLoad() {

		},
		onShow() {
			
		},


		methods: {

			getNavHeight(e) {
				this.margin_top += e;
			},
			selectThis(index){
				this.selectedImg = this.tem_list[index].url;
				this.selectedIndex = index;
			}



		}
	}
</script>

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

	.photo_back {
		background-color: #F5F6FB;
	}
</style>