<template>
	<view class="containers">
		<!-- <view class="empty" v-if="inspectionData === null">
      <u-empty text="附件为空" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
    </view> -->
		<view class="informationModule">
			<view class="title">
				{{$t('hdk.inspectionInformation')}}
			</view>
			<view class="flex-between">
				<text class="leftT">{{$t('hdk.SoftwareVersion')}}</text>
				<text class="rightT">{{inspectionData.softwareVersion || ''}}</text>
			</view>
			<view class="flex-between">
				<text class="leftT">{{$t('hdk.HardwareVersion')}}</text>
				<text class="rightT">{{inspectionData.hardwareVersion || ''}}</text>
			</view>
			<view class="flex-between">
				<text class="leftT">{{$t('hdk.TestDate')}}</text>
				<text class="rightT">{{$u.timeFormat(inspectionData.checkTime, 'yyyy年mm月dd日') || ''}}</text>
			</view>
		</view>

		<view class="informationModule">
			<view class="title">
				{{$t('hdk.ElectricalParameters')}}
			</view>
			<view class="flex-between">
				<text class="leftT">{{$t('hdk.Power')}}</text>
				<text class="rightT">{{inspectionData.power || ''}}</text>
			</view>
			<view class="flex-between">
				<text class="leftT">{{$t('hdk.PowerFactor')}}</text>
				<text class="rightT">{{inspectionData.powerFactor || ''}}</text>
			</view>
		</view>

		<view class="dataViewingModule">
			<view class="title">
				{{$t('hdk.LightIntensityDistribution')}}
			</view>
			<view class="photo">
				<u-swiper :list="inspectionData.lightIntensityPhoto"
					@click="previewLargeImage(inspectionData.lightIntensityPhoto,current)" :current="current"
					v-if="inspectionData.lightIntensityPhoto.length > 0" indicator indicatorMode="dot" circular
					imgMode="aspectFit" :height="$isMobile?'400rpx':'600px'" indicatorActiveColor="#00aeaa"
					@change="changeSwiper" indicatorInactiveColor="rgba(0, 174, 170, 0.3)"
					:indicatorStyle="{bottom:'20px',right:'5px'}"></u-swiper>
			</view>
			<UploadFile :fileType="2" v-for="(item,index) in inspectionData.lightIntensityFile" :key="index"
				:downloadFileName="item" :downloadFileNamePath="item" :isCsv="true" />
		</view>

		<view class="fileViewingModule">
			<view class="title">
				{{$t('hdk.AirTightnessInspectionDocuments')}}
			</view>
			<UploadFile :fileType="2" :downloadFileName="inspectionData.tightnessCheckFile"
				:downloadFileNamePath="inspectionData.tightnessCheckFilePath" />
		</view>

	</view>
</template>

<script>
	import UploadFile from './UploadFile.vue'
	export default {
		components: {
			UploadFile
		},
		props: {
			inspectionData: {
				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;
		}

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

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

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


		.dataViewingModule {
			width: 95%;
			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;
		}

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

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

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


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



	.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>