<template>
	<view>
		<view class="wrap">
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-if="currentItem.mainPoint && currentItem.mainPoint.length > 0">
					<view class="inner txt-inner" :style="{'background-image':'url(/static/photo/shadow-bg.png)'}">
						<view class="title">
							拍照要求
						</view>
						<view class="txt-box" >
							<view class="txt" v-for="(txt,index) in currentItem.mainPoint" :key="index">
								{{index+1}}. {{txt}}
							</view>
							<view class="txt tips" v-if="currentItem.note">
								注意：{{currentItem.note}}
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item class="swiper-item" v-for="(src, index) in swiperList" :key="index">
					<view class="inner pic">
						<image @click="previewImage(index)" class="icon" mode="aspectFit" :src="src"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="u-tabs-box">
				<u-tabs-swiper bg-color="transparent" inactive-color="#999" activeColor="#2272FF" ref="tabs"
					:list="tabList" :current="current" @change="change" :is-scroll="false" swiperWidth="750">
				</u-tabs-swiper>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			currentItem: {
				type: Object,
				default () {
					return {
						images: [],
					}
				}
			},
		},
		data() {
			return {
				current: 0,
				swiperCurrent: 0,
				dx: 0,
			};
		},
		onLoad() {
			this.$refs.tabs.setFinishCurrent(current);
		},
		computed: {
			swiperList() {
				let list = this.currentItem.images || []
				return list
			},
			tabList() {
				let list = this.currentItem.images || []
				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)
				return tabList
			},
		},
		methods: {
			previewImage(index){
				uni.previewImage({
					current:index,
					urls:this.swiperList,
				})
			},
			// tab栏切换
			change(index) {
				this.swiperCurrent = index;
				// this.getOrderList(index);
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			}
		}
	};
</script>

<style>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #f2f2f2;
	}

	/* #endif */
</style>

<style lang="scss" scoped>
	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top) - 200rpx);
		padding-top:100rpx;
		width: 100%;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		display: flex;
		align-items: center;
		height: 100%;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.swiper-item .inner {
		padding: 30rpx;
		background-color: #fff;
		width:690rpx;
		height: 690rpx;
		overflow: hidden;
		&.txt-inner{
			background-position: bottom right;
			background-size: 340rpx 380rpx;
			background-repeat: no-repeat;
		}
		.title {
			margin-top: 20rpx;
			font-weight: bold;
			line-height: 50rpx;
			color: #333;
			font-size: 36rpx;
		}
		&.pic{
			padding:0;
			background-color: transparent;
		}
		&>image {
			width: 690rpx;
			min-height: 690rpx;
		}

		.txt-box {
			// max-height: 560rpx;
			overflow: auto;
			width:100%;
			height: 560rpx;
		}

		.txt {
			white-space: normal;
			padding-top: 26rpx;
			line-height: 34rpx;
			color: #666;
			font-size: 28rpx;

			&.tips {
				padding-bottom: 26rpx;
				color: #D73400
			}
		}
	}
</style>
