<template>
	<view class="viewSignFor content_box">
		<!-- 运单号 -->
		<bs-pageHeader-orderNo :shipmentNo="shipmentNo" />
		<view class="routine_radius_card">
			<bs-customRowCell leftIcon="current-location" :title="data.address" />
		</view>
		<!-- 签名信息 -->
		<view class="signFor-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="outer-frame">
			<!-- 图片列表 -->
			<!-- <view class="imgList font_bolder">
				<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 title='签收信息'/>
		</view>
	</view>
</template>

<script>
	import { downloadImg } from '../../api/apiList'
	import { formatGMT } from '../../utils/util'
	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.$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
				})
			},
		}
	}
</script>

<style lang="scss">
	.viewSignFor {

		.signFor-datail-list {
			margin: 0 0 24rpx;
			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;
			
			/deep/.todo-remark{
				margin-top: 0;
				
				.remark-title{
					margin-left: 12rpx;
				}
			}
			
			.imgList {
				font-size: 28rpx;
				color: #8C8C8C;

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

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