<template>
	<view class="viewLoadDischarg content_box">
		<bs-pageHeader-orderNo :shipmentNo="shipmentNo" />
		<view class="routine_radius_card">
			<bs-customRowCell leftIcon="current-location" :title="data.address" />
		</view>
		<!-- 动态显示区域 -->
		<view class="timeNode-list">
			<!-- 放弃装货、拒收 -->
			<template v-if="action==='LoadAbort' || action==='UnloadRefuse'">
				<bs-customCell :label="action==='LoadAbort' ? '放弃装货:' : '拒收原因:'"
					:value="data.content ? data.content.split('|')[0] : ''" labelCol="4" wrapCol="7" />
			</template>
			<!-- 按数量装、卸 -->
			<template v-if="action==='LoadQty' || action==='UnloadQty'">
				<bs-customCell :label="`${action==='LoadQty' ? '装' : '卸'}货时间:`" :value="data.eventTime" labelCol="4"
					wrapCol="7" />
			</template>
			<!-- 装、卸货完成 -->
			<template v-if="action==='LoadFinish' || action==='UnloadFinish'">
				<bs-customCell :label="`${action==='LoadFinish' ? '装' : '卸'}货状态:`"
					:value="`${data.loadUnloadStatusLabel}${action==='LoadFinish' ? '装' : '卸'}货`" labelCol="4"
					wrapCol="7" />
				<u-line color="#F0F0F0" margin="30rpx 0" />
				<bs-customCell :label="`${action==='LoadFinish' ? '装' : '卸'}货完成时间:`" :value="data.eventTime"
					labelCol="4" wrapCol="7" />
				<!-- 铅封号 装货时显示 -->
				<template v-if="action==='LoadFinish'">
					<u-line color="#F0F0F0" margin="30rpx 0" />
					<bs-customCell label="铅封号:" :value="data.carSeal" labelCol="4" wrapCol="7" />
				</template>
			</template>
			<!-- 装、卸货开始 -->
			<template v-if="action==='Loading' || action==='Unloading'">
				<bs-customCell :label="`${action==='Loading' ? '装' : '卸'}货开始时间:`" :value="data.eventTime" labelCol="4"
					wrapCol="7" />
			</template>
		</view>
		<template v-if="action!=='UnloadRefuse'">
			<view class="outer-frame">
				<!-- 图片列表 -->
				<view class="imgList" v-if="action!=='LoadAbort' && action !== 'LoadQty' && action !== 'UnloadQty'">
					<text style="color: #8C8C8C">图片列表（{{imgs.length}}/6）</text>
					<view class="previewImages routine_radius_card 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" :class="{'marginTopNone': action === 'LoadQty' || action === 'UnloadQty'}" />
			</view>
		</template>
	</view>
</template>

<script>
	import { downloadImg } from '../../api/apiList'
	import { formatGMT } from '../../utils/util'
	const appInstance = getApp()
	export default {
		options: { styleIsolation: 'shared' },
		data() {
			return {
				action: "", //当前事件类型
				data: {},
				imgs: [],
				shipmentNo: '', //运单号
			}
		},
		onLoad: function(options) {
			const data = JSON.parse(options.data)
			const action = data.eventType
			const { shipmentNo } = appInstance.globalData.shipmentInfo
			if (data.images) {
				this.downloadImgs(data.images)
			}
			data.eventTime = formatGMT(data.eventTime) //格式化时间
			const actionMode = { //事件类型
				Loading: "装货开始",
				Unloading: "卸货开始",
				LoadFinish: "装货完成",
				UnloadFinish: "卸货完成",
				LoadAbort: '放弃装货',
				UnloadRefuse: "拒收",
				LoadQty: "数量装货",
				UnloadQty: "数量卸货",
			}
			this.setNavTitle(actionMode[action])
			if (action !== 'UnloadRefuse') {
				this.$nextTick(() => this.setRemark(data)) //避免H5报错
			}
			this.action = action
			this.data = data
			this.shipmentNo = shipmentNo
		},
		methods: {
			setRemark(data) {
				let content = data.content
				if (data.eventType === 'LoadAbort') {
					content = data.content.split('|')[1]
				}
				const remarkInstance = this.$refs.myRemark // 获取备注信息实例
				remarkInstance.setValue(content || '')
			},
			//设置页面头部标题
			setNavTitle(title) {
				uni.setNavigationBarTitle({
					title: title,
				})
			}, //图片下载
			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">
	.viewLoadDischarg {

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

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

		.timeNode-list {
			background-color: #fff;
			padding: 12rpx 32rpx;
		}

		.outer-frame {
			padding: 32rpx;
			background-color: #fff;
			margin-top: 24rpx;

			/deep/.marginTopNone {
				margin-top: 0;
			}
		}

		.imgList {
			font-size: 28rpx;

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

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