<template>
	<view class="viewSignature content_box">
		<!-- 运单号 -->
		<bs-pageHeader-orderNo :shipmentNo="shipmentNo" />
		<view class="routine_radius_card">
			<bs-customRowCell leftIcon="current-location" :title="data.address" />
		</view>
		<!-- 签名信息 -->
		<view class="signature-datail-list ">
			<bs-customCell label="签名位置:" :value="data.address" labelCol="4" wrapCol="7" />
			<u-line color="#F0F0F0" margin="30rpx 0" />
			<bs-customCell label="签名时间:" :value="data.eventTime" labelCol="4" wrapCol="7" />
		</view>
		<!-- 图片列表 -->
		<view class="imgList font_bolder">
			<text>签名图片</text>
			<view class="previewImages flex_cen" 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 appInstance = getApp()
	export default {
		data() {
			return {
				data: {},
				imgs: [],
				shipmentNo: '' //运单号
			}
		},
		onLoad(options) {
			const data = JSON.parse(options.data)
			if (data.images) {
				this.downloadImgs(data.images)
			}
			data.eventTime = formatGMT(data.eventTime) //格式化时间
			this.data = data
			this.shipmentNo = appInstance.globalData.shipmentInfo.shipmentNo
		},
		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">
	.viewSignature {

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

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

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

		.imgList {
			font-size: 28rpx;
			margin: 20rpx 0;
			padding: 32rpx;
			background-color: #fff;

			.previewImages {
				margin-top: 20rpx;
				min-height: 300rpx;

				.previewImg {
					width: 100%;
					height: 300rpx;
				}
			}
		}
	}
</style>
