<!-- 拍照规范弹窗 -->
<template>
	<view class="standard-box">
		<swiper class="swiper-box" :current="swiperCurrent" @change="changeTab" @transition="transition" @animationfinish="animationfinish">
			<swiper-item class="swiper-item" key="swiper1">
				<view class="title">
					拍照要求
				</view>
				<view class="txt-box" >
					<view class="txt" v-for="(txt,index) in currentItem.main_point" :key="index">
						{{index+1}}. {{txt}}
					</view>
					<view class="txt tips">
						注意：{{currentItem.note}}
					</view>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item" v-for="(src, index) in swiperList" :key="index">
				<image @click="previewImage(index)" class="icon" mode="aspectFit" :src="src"></image>
				
			</swiper-item>
		</swiper>
		<view class="tab-box">
			<u-tabs-swiper bg-color="transparent" inactive-color="#999" 
				ref="uTabs" :list="tabList" :current="current" 
				@change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
		</view>
	</view>
</template>

<script>
	export default {
		name:"photo-standard",
		props:{
			currentItem:{
				type: Object,
				default () {
					return  {
						images: [],
					}
				}
			},
		},
		data() {
			return {
				tabList: [{
					name: '十年'
				}, {
					name: '青春'
				}, {
					name: '之约'
				}],
				swiperList:[],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				height:0,
			}
		},
		watch:{
			"currentItem.images"(val){
				if(val.length>0){
					this.changeList(val)
					// let swiperList = JSON.parse(JSON.stringify(val))
					// let len = tabs.length
					// let tabList = [{name:'拍照要求'}].concat(Array.from({name:'示意图'},len))
				}
			},
		},
		created() {
			// getApp().trackPage('照片预览页')
			// if (e.img) {
			// 	this.images = [e.img]
			// }
		},
		mounted(){
			this.changeList(this.currentItem.images)
			this.getSwiperHeight()
		},
		methods: {
			changeList(list){
				let swiperList = JSON.parse(JSON.stringify(list))
				let len = list.length
				let tabList = []
				for(let i=0;i<len;i++){
					let item = {
						name:'示意图' + (i + 1)
					}
					tabList.push(item)
				}
				tabList =  [{name:'拍照要求'}].concat(tabList)
				this.swiperList = swiperList
				this.tabList = tabList
				
			},
			getSwiperHeight(){
				const globalData = getApp().globalData
				this.height = globalData.screenHeight*2 - globalData.navHeight - 200
			},
			previewImage(index){
				uni.previewImage({
					current:index,
					urls:this.swiperList,
				})
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				// let dx = e.detail.dx;
				// this.$refs.uTabs.setDx(dx);
			},
			changeTab(){
				this.current = this.swiperCurrent
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				// let current = e.detail.current;
				// this.$refs.uTabs.setFinishCurrent(current);
				// this.swiperCurrent = current;
				// this.current = current;
			},
			// scroll-view到底部加载更多
			onreachBottom() {

			}

		}
	}
</script>

<style lang="scss">
	.standard-box{
		position: absolute;
		left:0;right:0;
		/* height: calc(100vh - 240rpx); */
		z-index: 100;
		bottom:240rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		color:#fff;
	}
	.swiper-box{
		width: 690rpx;
		min-height: 690rpx;
		margin-bottom: 150rpx;
		border-radius: 12rpx;
		background-color: #fff;
	}
	.tab-box{
		position: absolute;
		bottom:0;
		left:30rpx;
		right:30rpx;
	}
	.swiper-item{
		box-sizing: border-box;
		// width:690rpx;
		padding:30rpx;
		.title{
			margin-top:20rpx;
			font-weight: bold;
			line-height: 50rpx;
			color:#333;
			font-size: 36rpx;
		}
		&>image{
			width:630rpx;
			min-height: 630rpx;
		}
		.txt-box{
			max-height: 560rpx;
			overflow: auto;
		}
		.txt{
			white-space: normal;
			padding-top:26rpx;
			line-height: 34rpx;
			color:#666;
			font-size: 28rpx;
			&.tips{
				padding-bottom:26rpx;
				color:#D73400
			}
		}
	}
/* 	.pic {
		display: block;
		width: 100%;
		height: auto;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 750rpx;
		height: 300rpx;
	}

	.view-content {
		display: flex;
	} */
</style>
