<template>
	<view class="cargoDetail-list content_box">
		<u-empty mode="data" textSize='32' iconSize="160" text="暂无货量详细数据" v-if="!orderList.length" />
		<view class="cargoDetail-item" v-for="(item,index) in orderList" :key="item.id">
			<view class="detail-title flex_center" style="border: none;">
				<view class="t-icon t-icon-order"/>
				订单号: {{item.orderNo}}
			</view>
			<u-line></u-line>
			<!-- 订单明细" -->
			<view class="detail-title" style="margin: 4rpx;">
				<bs-customCell label="货量" :value="`${item.qty}件/${item.weight}千克/${item.volume}方`" labelCol="3"
					wrapCol="7" />
				<bs-customCell label="运输要求" :value="item.transportRequest" labelCol="3" wrapCol="9" />
			</view>
			<view class="detail-title" style="margin: 4rpx;">
				<bs-customCell label="发货地址" :value="item['originalAddress.name']" labelCol="3" wrapCol="9" />
				<bs-customCell label="发货人" :value="item['originalContact.name']" labelCol="3" wrapCol="9" />
				<bs-customCell label="联系方式" :value="item['originalContact.tel']" labelCol="3" wrapCol="9" />
				<!-- <bs-customCell label="发货人备注:" :value="item['originalContact.remark']" labelCol="3"  /> -->
				<bs-customCell label="提货要求" :value="item['originalRequirement']" labelCol="3" wrapCol="9" />
			</view>
			<view class="detail-title" style="margin:4rpx 4rpx 4rpx 0;padding-bottom:0;border: none;">
				<bs-customCell label="收货地址" :value="item['destinationAddress.name']" labelCol="3" wrapCol="9" />
				<bs-customCell label="收货人" :value="item['destinationContact.name']" labelCol="3" wrapCol="9" />
				<bs-customCell label="联系方式" :value="item['destinationContact.tel']" labelCol="3" wrapCol="9" />
				<!-- <bs-customCell label="卸货人备注:" value="item['destinationContact.remark']" labelCol="3"  /> -->
				<bs-customCell label="配送要求" :value="item['destinationRequirement']" labelCol="3" wrapCol="9" />
				<!-- <view class="snapshoot">
						<image mode="aspectFill" v-for="(itm,index) in item.imgs" :key="index" :src="itm.url"
							:data-index="index" :data-imgs="item.imgs" @click="onPreviewImage" class="previewImg" />
					</view> -->
			</view>
			<!-- 货物明细 -->
			<uni-collapse v-model="activeNames" @change="onChange">
				<view class="outer-frame">
					<uni-collapse-item :show-arrow="false" title-border="none" :name="item.id">
						<!-- 自定义标题栏 -->
						<template v-slot:title>
							<view class="foldPanel-title flex_center">
								<text style="flex-grow: 1">货物详情</text>
								<!-- 自定义标题栏右侧图标 -->
								<view :class="['foldPanel-right-icon', 't-icon', activeNames.includes(item.id) ? 't-icon-unfold-blue' :'t-icon-fold-blue']" />
							</view>
						</template>
						<!-- 货物详情 -->
						<view class="cargo-detail-table">
							<view class="detail-row-title">
								<u-row>
									<u-col textAlign="left" span="4" style="margin-left: 40rpx; text-align='left'">名称</u-col>
									<u-col textAlign="end" span="7">数量</u-col>
								</u-row>
							</view>
							<u-empty mode="data" textSize='32' iconSize="160" text="暂无货物明细" v-if="!item.cargoDetails.length" />
							<view class="detail-col-item" v-for="itm in item.cargoDetails" :key="itm.id">
								<u-row>
									<u-col span="4" class="cargo-title">
										<view class="cargo-title">{{itm['goods.name']}}</view>
									</u-col>
									<u-col span="7" textAlign="end">{{itm.qty}}</u-col>
								</u-row>
							</view>
						</view>
					</uni-collapse-item>
				</view>
			</uni-collapse>
		</view>
	</view>
</template>

<script>
	import { ordermovementOM, ordermovementOR, ordermovementMASS, OMOrderDetail, OROrderDetail, downloadImg } from '../../api/apiList'
	export default {
		data() {
			return {
				orderList: [], //订单列表

				activeNames: [], //当前展开面板 names => orderIds
			}
		},
		onLoad(options) {
			this.initData()
		},
		methods: {
			// 折叠面板
			onChange(values) {
				this.activeNames = values
			},

			initData() {
				const _this = this
				const { shipmentId, shipmentBizName } = getApp().globalData.shipmentInfo
				let shipmentMode = ''
				switch (shipmentBizName) { //根据shipmentBizName 判断运输模式
					case 'tm.MovementShipment':
					case 'tm.SectionShipment': //暂时走OM逻辑
						shipmentMode = 'OM'
						break
					case 'tm.MassShipment':
						shipmentMode = 'MS'; //大宗运输
						break
					default:
						shipmentMode = 'OR';
				}
				if(shipmentMode === 'MS'){
					const reqData = { "aux": { "id": shipmentId } }
					ordermovementMASS(reqData).then(res => {
						const data = res.data.data.header
						const newDetail = {
							'id': data['massOrder.id'], //订单id
							'orderNo': data['massOrder.orderNo'], //订单号
							'qty': data['massOrder.qty'], //订单件数
							'weight': data['massOrder.weight'], //订单重量
							'volume': data['massOrder.volume'], //订单体积
							'originalAddress.name': data['massOrder.originalAddress.name'], //发货地址
							'originalContact.name': data['massOrder.originalContact.name'], //发货人
							'originalContact.tel': data['massOrder.originalContact.tel'], //发货人联系方式
							'originalContact.remark': data['massOrder.originalContact.remark'], //发货人备注
							'destinationAddress.name': data['massOrder.destinationAddress.name'], //收货地址
							'destinationContact.name': data['massOrder.destinationContact.name'], //收货人
							'destinationContact.tel': data['massOrder.destinationContact.tel'], //收货人联系方式
							'destinationContact.remark': data['massOrder.destinationContact.remark'], //收货人备注
							'originalRequirement': data['massOrder.originalRequirement'], //提货要求
							'destinationRequirement': data['massOrder.destinationRequirement'], //配送要求
							'transportRequest': data['massOrder.transportRequest'], //运输要求
							'actualPod.podImages': data['massOrder.actualPod.podImages'], //回单图片
							'cargoDetails': [] //货物明细
						}
						_this.orderList = _this.orderList.concat(newDetail)
						this.activeNames = [newDetail.id]
					})
				} else {
					const reqData = {
						"args": {
							"pageNum": 1,
							"pageSize": 100,
							"restrictions": [{
								"field": "shipment.id",
								"type": "EQ",
								"value": shipmentId
							}]
						}
					}
					const isOM = shipmentMode === 'OM'
					const requestFun = isOM ? ordermovementOM : ordermovementOR
					requestFun(reqData).then(res => {
						const datas = res.data.data.datas
						const newDatas = _this.convertData(isOM, datas)
						const activeNames = []
						newDatas.map(item => {
							activeNames.push(item.id)
							// const imgs = item['actualPod.podImages']
							// if(imgs){
							//   this.downloadImgs(imgs).then( images => {
							//     item.imgs = images
							//     this.setData({
							//       orderList: this.orderList.concat(item)
							//     })
							//   })
							// }else{
							//   this.setData({
							//     orderList: this.orderList.concat(item)
							//   })
							// }
							_this.getOrderDetail(isOM, item.id).then(cargoDetails => { //获取货物明细
								item.cargoDetails = [...cargoDetails]
								const newOrderList = _this.orderList.concat(item)
								_this.orderList = [...newOrderList]
							})
						})
						this.activeNames = activeNames
					})					
				}				
			},
			//转换请求数据
			convertData(isOM, datas) {
				let newDatas = []
				if (isOM) { //OM模式时自定义数据字段名,默认使用简易的OR模式字段名
					datas.map(item => {
						newDatas.push({
							'id': item.id, //订单id
							'orderNo': item.movementNo, //订单号
							'qty': item.shipQty, //订单件数
							'weight': item.shipWeight, //订单重量
							'volume': item.shipVolume, //订单体积
							'originalAddress.name': item['originalAddress.name'], //发货地址
							'originalContact.name': item['originalAddress.addressContact.name'], //发货人
							'originalContact.tel': item['originalAddress.addressContact.tel'], //发货人联系方式
							'originalContact.remark': item['originalAddress.addressContact.remark'], //发货人备注
							'destinationAddress.name': item['destinationAddress.name'], //收货地址
							'destinationContact.name': item['destinationAddress.addressContact.name'], //收货人
							'destinationContact.tel': item['destinationAddress.addressContact.tel'], //收货人联系方式
							'destinationContact.remark': item['destinationAddress.addressContact.remark'], //收货人备注
							'originalRequirement': item['orderRelease.originalRequirement'], //提货要求
							'destinationRequirement': item['orderRelease.destinationRequirement'], //配送要求
							'transportRequest': item['orderRelease.transportRequest'], //运输要求
							'actualPod.podImages': item['orderRelease.actualPod.podImages'], //回单图片
						})
					})
				} else {
					newDatas = [...datas]
				}
				return newDatas
			},
			//获取订单货物明细
			getOrderDetail(isShipmentOM, orderId) {
				return new Promise((reslove, reject) => {
					const reqData = {
						"args": {
							"pageNum": 1,
							"pageSize": 100,
							"restrictions": [{
								"field": isShipmentOM ? 'orderMovement.id' : 'orderRelease.id',
								"type": "EQ",
								"value": orderId
							}]
						}
					}
					const requestFun = isShipmentOM ? OMOrderDetail : OROrderDetail
					requestFun(reqData).then(res => {
						const datas = res.data.data.datas
						const newData = []
						datas.map(item => {
							if (isShipmentOM) { //自定义数据字段 转换为简洁的OR模式字段名
								newData.push({
									'id': item.id,
									'goods.name': item['goods.name'],
									'qty': item.shipQty,
								})
							} else {
								newData.push({ ...item })
							}
						})
						reslove([...newData])
					})
				})
			},
			//图片下载
			downloadImgs(paths) {
				return new Promise((reslove, reject) => {
					let imgs = [],
						i = 0;
					const imgPaths = paths.split('|')
					imgPaths.map((path, index) => {
						downloadImg(path).then(res => {
							i++
							imgs.push({ url: res, index: index })
							if (i === imgPaths.length) {
								reslove(imgs)
							}
						})
					})
				})
			},
			//图片预览
			onPreviewImage(e) {
				let { index, imgs } = e.currentTarget.dataset;
				uni.previewMedia({
					sources: imgs,
					current: index
				})
			},
		}
	}
</script>

<style lang="scss">
	.cargoDetail-list {

		.cargoDetail-item {
			padding: 32rpx;
			margin-bottom: 32rpx;
			background: #FFFFFF;
			position: relative;
			
			.u-line{
				position: absolute;
				left: 0;
				transform: none !important;
				border-bottom-width: 1rpx !important;
			}

			.detail-title {
				font-size: 28rpx;
				color: #BCBCBC;
				padding: 8rpx 0 30rpx;
				border-bottom: 1rpx solid #E5E5E5;
				
				.t-icon-order{
					width: 50rpx;
					height: 50rpx;
					margin-right: 20rpx;
				}
			}

			/deep/.custom-cell-row {
				margin-top: 16rpx;

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

			.outer-frame {
				margin-top: 32rpx;
				border-radius: 16rpx;
				border: 2rpx solid #F0F0F0;
				overflow: hidden;

				.foldPanel-title {
					color: #2E75E6;
					font-size: 28rpx;
					padding-left: 20rpx;
					height: 96rpx;
					background: rgba(46, 117, 230, .1);
					

					
					.foldPanel-right-icon {
						margin-right: 20rpx;
					}
				}

				/deep/.cargo-detail-table {
					background: #FFFFFF;
					padding-bottom: 10rpx;

					.detail-row-title {
						color: #8C8C8C;
						background: #FAFAFA;
						height: 64rpx;
						line-height: 64rpx;
						
						.u-col:first-child{
							padding-left: 40rpx !important;
							margin-left: 0 !important;
						}					
					}

					.detail-col-item {
						margin: 32rpx 20rpx;

						.cargo-title {
							font-size: 28rpx;
							padding-left: 20rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}
				}
			}
		}

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