<template>
	<view class="viewWeightBill content_box ">
		<!-- <shipmentBriefInfo /> -->
		<bs-pageHeader-orderNo :shipmentNo="shipmentNo" />
		<view class="routine_radius_card">
			<bs-customRowCell leftIcon="current-location" :title="data.address" />
		</view>
		<!-- 磅单明细列表 -->
		<view class="weightBill-datail-list routine_radius_card">
			<bs-customCell label="磅单号:" :value="data.poundNo" labelCol="4" wrapCol="7" />
			<u-line color="#F0F0F0" margin="30rpx 0" />
			<bs-customCell label="过磅时间:" :value="data.eventTime" labelCol="4" wrapCol="7" />
			<u-line color="#F0F0F0" margin="30rpx 0" />
			<bs-customCell label="过磅详情:" :value="data.content" labelCol="4" wrapCol="7" />
		</view>
		<view class="outer-frame">
			<text class="font_bolder" style="font-size: 28rpx;margin-left: 30rpx;">图片列表：{{imgs.length}}/6</text>
			<view class="snapshoot" v-if="imgs.length">
				<image mode="aspectFill" v-for="(item,index) in imgs" :key="index" :src="item" :data-index="index"
					@click="onPreviewImage" class="previewImg" />
			</view>
		</view>
	</view>
</template>

<script>
	import { downloadImg } from '../../api/apiList'
	import { formatGMT } from '../../utils/util'
	const app = getApp()
	export default {
		data() {
			return {
				data: {},
				imgs: [],
				shipmentNo: '', //运单号
				isMass: false, //是否为大宗模式
			}
		},
		onLoad: function(options) {
			const data = JSON.parse(options.data)
			const {shipmentNo, shipmentBizName} = app.globalData.shipmentInfo
			if (data.images) {
				this.downloadImgs(data.images)
			}
			data.eventTime = formatGMT(data.eventTime) //格式化时间			
			this.data = data			
			this.shipmentNo = shipmentNo
			this.isMass = shipmentBizName === 'tm.MassShipment'
		},
		methods: {
			//图片下载
			downloadImgs(paths) {
				const _this = this
				const imgPaths = paths.split('|')
				imgPaths.map(path => {
					downloadImg(path).then(res => {
						this.imgs = _this.imgs.concat(res)
					})
				})
			},
			//图片预览
			onPreviewImage(e) {
				let { index } = e.currentTarget.dataset;
				uni.previewImage({
					current: index,
					urls: this.imgs
				})
			},
		}
	}
</script>

<style lang="scss">
	.viewWeightBill {

		.weightBill-datail-list {
			margin: 40rpx 0;
			background-color: #fff;
			padding: 12rpx 32rpx;

			/deep/.custom-cell-row {
				margin: 20rpx 0;

				.custom-cell-label {
					color: #8C8C8C;
				}
			}
		}

		.outer-frame {
			background-color: #fff;
			padding-top: 20rpx;

			.snapshoot {
				padding-left: 20rpx;

				.previewImg {
					margin: 20rpx 15rpx;
					width: 140rpx;
					height: 140rpx;
				}
			}
		}

	}
</style>
