<template>
	<view class="viewSign content_box">
		<!-- 运单号 -->
		<bs-pageHeader-orderNo :shipmentNo="shipmentNo" />
		<view class="routine_radius_card">
			<bs-customRowCell leftIcon="current-location" :title="data.address" />
		</view>
		<view class="viewSign-datail-list">
			<bs-customCell label="在途事件类型:" :value="viewEnums[data.eventType]" labelCol="4" wrapCol="7" />
			<u-line color="#F0F0F0" margin="30rpx 0" />
			<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="outer-frame">
			<!-- 图片列表 -->
			<view class="imgList">
				<text>位置图片（{{imgs.length}}/6）</text>
				<view class="previewImages flex flex_wrap" 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>
			<!-- 备注信息 -->
			<bs-todoRemark isReadonly ref=myRemark />
		</view>
	</view>
</template>

<script>
	import { downloadImg, getOptionEnum } from '../../api/apiList'
	import { formatGMT } from '../../utils/util'
	export default {
		data() {
			return {
				data: {},
				imgs: [],
				viewEnums: [],
				shipmentNo: '' //运单号
			}
		},
		onLoad(options) {
			const data = JSON.parse(options.data)
			if (data.images) {
				this.downloadImgs(data.images)
			}
			data.eventTime = formatGMT(data.eventTime) //格式化时间
			this.getOptions()
			this.$nextTick(() => this.setRemark(data)) //避免H5报错
			this.data = data
			this.shipmentNo = getApp().globalData.shipmentInfo.shipmentNo
		},
		methods: {
			setRemark(data) {
				const remarkInstance = this.$refs.myRemark // 获取备注信息实例
				remarkInstance.setValue(data.content || '')
			},
			//图片下载
			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
				})
			},
			//获取事件类型枚举
			getOptions() {
				getOptionEnum('TransitType').then(res => {
					const datas = res.data.data.datas
					let viewEnums = {}
					datas.map(item => {
						viewEnums[item.value] = item.label
					})
					this.viewEnums = viewEnums
				})
			},
		}
	}
</script>

<style lang="scss">
	.viewSign {
		.viewSign-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: 20rpx;

			.imgList {
				font-size: 28rpx;
				color: #8C8C8C;

				.previewImages {
					margin-top: 18rpx;
					min-height: 160rpx;

					.previewImg {
						margin: 20rpx 15rpx;
						width: 140rpx;
						height: 140rpx;
					}
				}
			}
		}
	}
</style>
