<template>
	<view class="containers">
		<u-swiper class="swiperCss"  :list="informationData.lampPath"
			@click="previewLargeImage(informationData.lampPath,current)" :current="current" indicator
			indicatorMode="dot" imgMode="aspectFit" circular :height="$isMobile?'400rpx':'600px'"
			indicatorActiveColor="#00aeaa" indicatorInactiveColor="rgba(0, 174, 170, 0.3)" @change="changeSwiper"
			:indicatorStyle="{bottom:'20px',right:'5px'}"></u-swiper>
		<view class="informationModule">
			<view class="title">
				{{$t('hdk.productInformation')}}
			</view>
			<view class="flex-between">
				<text class="leftT">{{$t('hdk.SnCode')}}</text>
				<text class="rightT">{{informationData.sn || ""}}</text>
			</view>
			<view class="flex-between">
				<text class="leftT">{{$t('hdk.ProductName')}}</text>
				<text class="rightT">{{informationData.productName || ""}}</text>
			</view>
			<view class="flex-between">
				<text class="leftT">{{$t('hdk.Model')}}</text>
				<text class="rightT">{{informationData.type || ""}}</text>
			</view>
			<!-- 不展示 -->
			<!-- <view class="flex-between">
				<text class="leftT">{{$t('hdk.DateOfProduction')}}</text>
				<text class="rightT">{{$u.timeFormat(informationData.productionTime, 'yyyy-mm-dd') || ""}}</text>
			</view>
			<view class="flex-between">
				<text class="leftT">{{$t('hdk.ProductionPersonnel')}}</text>
				<text class="rightT">{{informationData.productionUserName || ""}}</text>
			</view> -->
		</view>
		<view class="fileViewingModule">
			<view class="title">
				{{$t('hdk.ProductSpecification')}}
			</view>
			<UploadFile :fileType="1" :downloadFileName="informationData.productDatasheet"
				:downloadFileNamePath="informationData.productDatasheetPath" />
		</view>

		<view class="fileViewingModule">
			<view class="title">
				{{$t('hdk.ProductManual')}}
			</view>
			<UploadFile :fileType="1" :downloadFileName="informationData.productManual"
				:downloadFileNamePath="informationData.productManualPath" />
		</view>
	</view>
</template>

<script>
	import UploadFile from './UploadFile.vue'
	export default {
		components: {
			UploadFile
		},
		props: {
			informationData: {
				type: Object
			}
		},
		data() {
			return {
				current: 0
			}
		},
		computed: {

		},
		onLoad() {},
		methods: {
			changeSwiper(e) {
				this.current = e.current
				// console.log("当前滑块", this.current);
			},
			previewLargeImage(productPicturePath, current) {
				console.log("图片列表", productPicturePath);
				console.log("滑块", current);
				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;
		}

		.swiperCss {
			margin-top: 20px;
			width: 95%;
			height: 200px !important; 
		}

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

		.pdfTitle {
			font-size: 13px;
			margin-left: 8px;
		}

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

		.fileViewingModule {
			width: 95%;
			min-height: 100px;
			margin: 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;
		}

		.swiperCss {
			width: 80%;
			margin-top: 20px;
			height: 600px !important;
		}

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

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


		.fileViewingModule {
			width: 80%;
			min-height: 100px;
			margin: 20px 24px;
			padding: 2px 2px 2px 2px;
			border-radius: 20px;
			background-color: #ffffff;
			box-sizing: border-box;
		}
	}
	.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;
		max-width: 400px;
		white-space: nowrap;
		/* 防止换行 */
		overflow: hidden;
		/* 超出部分隐藏 */
		text-overflow: ellipsis;
	}
</style>