<template>
	<view class="containers">
		<view class="empty" v-if="auxiliaryData.length <= 0 || auxiliaryData === null">
			<u-empty :text="$t('hdk.AttachmentIsEmpty')" mode="data"></u-empty>
		</view>
		<view class="auxiliaryModule" v-for="(item,index) in auxiliaryData" :key="index" v-else>
			<view class="title">{{$t('hdk.AttachmentModel')}}：{{item.type}}</view>
			<view class="photo">
				<u-swiper @click="previewLargeImage(item.productPicturePath,index)" :current="currents[index]"
					:list="item.productPicturePath" indicator indicatorMode="dot" circular imgMode="aspectFit"
					:height="$isMobile?'400rpx':'600px'" indicatorActiveColor="#00aeaa"
					indicatorInactiveColor="rgba(0, 174, 170, 0.3)" @change=" e => currents[index] = e.current"
					:indicatorStyle="{bottom:'20px',right:'5px'}"></u-swiper>
			</view>
			<view class="title">{{$t('hdk.OrderCode')}}：{{item.orderCode}}</view>
			<UploadFile :fileType="1" :downloadFileName="item.productManual"
				:downloadFileNamePath="item.productManualPath" />
		</view>
	</view>
</template>

<script>
	import UploadFile from './UploadFile.vue'
	export default {
		components: {
			UploadFile
		},
		props: {
			auxiliaryData: {
				type: Array
			}
		},
		data() {
			return {
				currents: []
			}
		},
		computed: {

		},
		mounted() {
			this.currents = this.auxiliaryData.map(() => 0)
		},
		methods: {
			previewLargeImage(productPicturePath, index) {
				console.log("第几组图", index);
				console.log("图片列表", productPicturePath);
				console.log("滑块", this.currents[index]);
				const current = this.currents[index]
				wx.previewImage({
					current: productPicturePath[current],
					urls: productPicturePath
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.containers {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	@media screen and (max-width: 767px) {
		.title {
			font-size: 15px;
			margin: 19px 0 0 14px;
		}

		.flex-between {
			margin: 16.5px;
			display: flex;
			justify-content: space-between;
			font-size: 13px;
		}

		.auxiliaryModule {
			width: 95%;
			margin: 16px 24px 20px 24px;
			padding: 2px 2px 2px 2px;
			border-radius: 20px;
			background-color: #ffffff;
			box-sizing: border-box;
		}
	}

	//PC端样式
	@media screen and (min-width: 768px) {
		.title {
			font-size: 30px;
			margin: 38px 0 0 28px;
			white-space: nowrap;
			/* 防止换行 */
			overflow: hidden;
			/* 超出部分隐藏 */
			text-overflow: ellipsis;
		}

		.flex-between {
			margin: 33px;
			display: flex;
			justify-content: space-between;
			font-size: 26px;
		}

		.auxiliaryModule {
			width: 80%;
			margin: 16px 24px 20px 24px;
			padding: 2px 2px 2px 2px;
			border-radius: 20px;
			background-color: #ffffff;
			box-sizing: border-box;
		}
	}

	.empty {
		width: 100%;
		height: 100%;
	}



	.photo {
		margin: 30px;
	}



	.leftT {
		background-color: rgba(255, 255, 255, 0);
		box-sizing: border-box;
		font-family: '苹方 中等', '苹方', sans-serif;
		color: #999db0;
		text-align: left;
		line-height: normal;
	}

	.rightT {
		background-color: rgba(255, 255, 255, 0);
		box-sizing: border-box;
		font-family: '苹方 中等', '苹方', sans-serif;
		color: #2b3950;
		text-align: left;
		line-height: normal;
	}
</style>