<template>
	<view>
		<view style="height: 100px; background: #2f4dae"></view>
		<view class="detail-wrap">
			<view class="info-wrap">
				<view class="cu-form-group">
					<view class="title">{{$t('自编号')}}</view>
					<view class="content">{{ detail.boxInfo.selfNo }}</view>
				</view>
				<view class="cu-form-group">
					<view class="title">{{$t('货柜号')}}</view>
					<view class="content">{{ detail.boxInfo.cubNo }}
					</view>
				</view>
				<view class="cu-form-group">
					<view class="title">{{$t('运输方式')}}</view>
					<view class="content">
						<dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="detail.boxInfo.transportType" />
					</view>
				</view>
				<view class="cu-form-group">
					<view class="title">{{$t('柜型')}}</view>
					<view class="content">{{ detail.boxInfo.cabinetRespVO && detail.boxInfo.cabinetRespVO.name }}</view>
				</view>
				<view class="cu-form-group">
					<view class="title">{{$t('出货渠道')}}</view>
					<view class="content">{{ detail.boxInfo.channelRespVO && detail.boxInfo.channelRespVO.nameZh }}
					</view>
				</view>
				<view class="cu-form-group">
					<view class="title">{{$t('始发地')}}</view>
					<view class="content">
						{{ detail.boxInfo.startWarehouseResp && detail.boxInfo.startWarehouseResp[isChinese ? 'titleZh' : 'titleEn'] }}
					</view>
				</view>
				<view class="cu-form-group">
					<view class="title">{{$t('目的地')}}</view>
					<view class="content">
						{{ detail.boxInfo.destWarehouseResp && (detail.boxInfo.destWarehouseResp.addressZh || detail.boxInfo.destWarehouseResp.titleZh) }}
					</view>
				</view>
				<view class="cu-form-group">
					<view class="title">{{$t('方数')}}({{$t('已装')}})</view>
					<view class="content">{{ detail.boxInfo.boxStatistics && detail.boxInfo.boxStatistics.loadVolume }}
					</view>
				</view>
				<view class="cu-form-group">
					<view class="title">{{$t('重量')}}({{$t('已装')}})</view>
					<view class="content">{{ detail.boxInfo.boxStatistics && detail.boxInfo.boxStatistics.loadWeight }}
					</view>
				</view>
				<view class="cu-form-group">
					<view class="title">{{$t('入仓原因')}}</view>
					<view class="content">{{ detail.boxInfo.dcCheckStatus == 1 ? $t('全部退场') : $t('部分退场') }}</view>
				</view>
			</view>
			<view class="order-list">
				<view class="list-hearder">
					<view class="title">{{$t('已退场入仓订单')}}</view>
					<view class="header-right-btn" @tap="$refs.batchPopup.open('center')">{{$t('批量输入')}}</view>
				</view>
				<view class="list-wrap">
					<template v-if="orderList && orderList.length > 0">
						<uni-card v-for="(item, index) in orderList" :key="index">
							<view class="list-card-wrap">
								<uni-row>
									<uni-col :span="12">
										<view>{{$t('序号')}}：{{ index + 1 }}</view>
									</uni-col>
								</uni-row>
								<uni-row>
									<uni-col :span="12">
										<view>{{$t('订单号')}}：{{ item.orderNo }}</view>
									</uni-col>
									<uni-col :span="12">
										<view>
											{{$t('货物信息')}}：
											<text v-for="(v, i) in (item.goodsList || [])" :key="i">
												{{ `${i + 1}. ${v.prodTitleZh} ` }}
											</text>
										</view>
									</uni-col>
								</uni-row>
								<uni-row>
									<uni-col :span="12">
										<view>{{$t('实装箱数')}}：{{ item.installNum }}</view>
									</uni-col>
									<uni-col :span="12">
										<view>{{$t('体积')}}：{{ item.volume }}</view>
									</uni-col>
								</uni-row>
								<uni-row>
									<uni-col :span="12">
										<view>{{$t('重量')}}：{{ item.weight }}</view>
									</uni-col>
									<uni-col :span="12">
										<view>{{$t('货值')}}：{{ item.totalWorth }}</view>
									</uni-col>
								</uni-row>
								<uni-row>
									<uni-col :span="12">
										<view>
											{{$t('备案')}}：
                      <dict-tag v-if="item.goodsList && item.goodsList.length" :type="DICT_TYPE.PRODUCT_RECORD_ATTRIBUTE" :value="item.goodsList[0].productRecord"></dict-tag>
										</view>
									</uni-col>
                  <uni-col :span="12">
                    <view>{{$t('已入仓箱数')}}：{{ item.refundNum }}</view>
                  </uni-col>
								</uni-row>
                <uni-row>
                  <uni-col :span="4">
                    <view>
                      {{$t('储位')}}：
                    </view>
                  </uni-col>
                  <uni-col :span="20">
                    <view>
                      {{showLocationJson(item.locationJson)}}
                    </view>
                  </uni-col>
                </uni-row>
                <uni-row>
                  <uni-col :span="12">
                    <view>
                      {{$t('退场状态')}}：
                      <!--0 不需要拆单 1 部分退场待拆单 2 部分退场拆单中 3 部分退场已拆单-->
                      <template v-if="item.splitStatus === 3">
                        {{$t('已退场，拆单审核通过')}}
                      </template>
                      <template v-else-if="item.splitStatus === 2">
                        {{$t('拆单审核中')}}
                      </template>
                      <template v-else-if="item.splitStatus === 1">
                        {{$t('部分退场待拆单')}}
                      </template>
                      <template v-else>
                        {{$t('已退场')}}
                      </template>
                    </view>
                  </uni-col>
                </uni-row>
                <uni-row>
                  <uni-col :span="8">
                    <button class="mini-btn" type="warn" size="mini"
                            @tap="showException(item)">{{$t('异常')}}</button>
                  </uni-col>
                  <uni-col :span="8" v-if="item.refundNum < item.installNum">
                    <button class="mini-btn" type="primary" size="mini"
                            @tap="showSplit(item)">{{$t('拆单')}}</button>
                  </uni-col>
                  <uni-col :span="8" v-if="item.exitWarehouseIn === false && item.splitStatus != 2">
                    <button class="mini-btn" type="primary" size="mini"
                            @tap="updateBoxNum(item)">{{$t('修改数量')}}</button>
                  </uni-col>
                </uni-row>
							</view>
						</uni-card>
					</template>
					<view v-else class="no-data-text">{{$t('暂无退场入仓订单，如需入仓请扫码入仓')}}</view>
				</view>
			</view>
			<view>
				<view class="cu-form-group">
					<view class="title">{{$t('退场入仓影像')}}</view>
				</view>
				<view class="img-wrap">
					<uni-grid :column="4" :highlight="true" :show-border="false">
						<uni-grid-item v-for="(item, index) in imageList" :index="index" :key="index">
							<view class="grid-item-box" style="height: 100%;position: relative;">
								<image :src="iconpath"
									style="position: absolute;top:4px;right:4px;width:24px;height:24px;z-index:9"
									@tap="delimage(index)" mode="widthFix"></image>
								<image v-if="item.type === 'image'" :src="item.url" mode="scaleToFill"
									style="height: 100%" @tap="previewImage(item.url)" />
								<video v-else-if="item.type === 'video'" :id="`video_${index}`"
									style="width: 100%;height: 100%" :src="item.url" @play="playVideo(index)"
									@tap="playVideo(index)" @fullscreenchange="fullscreenchange"></video>
							</view>
						</uni-grid-item>
						<uni-grid-item>
							<view class="grid-item-box" style="height: 100%">
								<view class="grid-item-box-add" @tap="chooseVideoImage">
									<uni-icons type="plusempty" size="30" color="#eae8eb"></uni-icons>
								</view>
							</view>
						</uni-grid-item>
					</uni-grid>
				</view>
				<view class="foot-btn">
					<button class="mini-btn" type="primary" size="mini"
                  @click="submit"
						@tap2="$refs.WarehousingPopup.open('center')">{{ detail.boxInfo.dcCheckStatus == 1 ? $t('确认订单入仓') : $t('自编号退场完成') }}</button>
					<button v-if="detail.boxInfo.dcCheckStatus == 1" class="mini-btn" style="color: #007aff" size="mini"
						@tap="$refs.retransmissionPopup.open('center')">{{$t('更换柜号重发')}}</button>
				</view>
			</view>
		</view>
		<!-- 批量输入 -->
		<uni-popup ref="batchPopup" background-color="#fff" @change="closeBatchPopup">
			<view class="popup-content">
				<view class="popup-title">{{$t('批量输入')}}</view>
				<view>
					<view class="">
						<scanlistener v-if="showScanlistener" suffixIcon="scan" v-model="keyword"
							:placeholder="$t('请扫描订单号')" @iconClick="scanCode" @confirm="searchOrder"
							@submit="keyword=$event; searchOrder()"></scanlistener>
					</view>
					<view>
						<view v-for="(item, index) in addOrderList" :key="index">
							<view class="form-wrap">
								<view class="cu-form-group">
									<view class="title">{{$t('订单号')}}</view>
									<view class="content">{{ item.orderNo }}</view>
								</view>
								<view class="cu-form-group">
									<view class="title">{{$t('实装箱数')}}</view>
									<view class="content">{{ item.num }}</view>
								</view>
								<view class="cu-form-group">
									<view class="title">{{$t('实装方数')}}</view>
									<view class="content">{{ item.volume }}</view>
								</view>
								<view class="cu-form-group">
									<view class="title">{{$t('实装重量')}}</view>
									<view class="content">{{ item.weight }}</view>
								</view>
                <view class="cu-form-group">
                  <view class="title">{{$t('退场入仓箱数')}}</view>
                  <view class="content">
                    <input type="number" v-model="item.refundNum" class="cu-input" :placeholder="$t('请输入箱数')" style="text-align: right" />
                  </view>
                </view>
								<view class="cu-form-group">
									<view class="title">{{$t('储位')}}</view>
									<view class="content" @tap="toLocation()" style="flex:1;justify-content: flex-end;">
										{{ orderLocationCreateReqVOList ? orderLocationCreateReqVOList.map(v => v.code ||  v.areaName + (v.locationName || '')).join(',') : '' }}
										<uni-icons type="right" size="16"></uni-icons>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="popup-foot-btn">
					<button class="mini-btn" type="primary" size="mini" @tap="saveOrder"
						:disabled="addOrderList.length === 0">{{$t('确认')}}</button>
					<button class="mini-btn" type="default" size="mini"
						@tap="$refs.batchPopup.close()">{{$t('取消')}}</button>
				</view>
			</view>
		</uni-popup>
		<!-- 重新发货  -->
		<uni-popup ref="retransmissionPopup" background-color="#fff" @change="closeRetransmissionPopup">
			<view class="popup-content">
				<view class="popup-title">{{$t('退场重新发货确认')}}</view>
				<view>
					<view style="text-align: center; padding: 4px 0">
						{{$t('柜号：{tlContainerNo}将改为新柜号重新发货，请问您确认吗？', {tlContainerNo: detail.boxInfo.trailerInfo && detail.boxInfo.trailerInfo.tlContainerNo})}}
					</view>
					<view class="cu-form-group">
						<view class="title" style="min-width: 70px">{{$t('新柜号')}}</view>
						<view class="content" style="width: calc(100% - 70px)">
							<uni-easyinput autoHeight v-model="retransmissionParams.cubNo" placeholder="">
							</uni-easyinput>
						</view>
					</view>
					<view class="cu-form-group" style="border: none">
						<view class="title" style="min-width: 70px">SO NO</view>
						<view class="content" style="width: calc(100% - 70px)">
							<uni-easyinput autoHeight v-model="retransmissionParams.sono" placeholder="">
							</uni-easyinput>
						</view>
					</view>
				</view>
				<view class="popup-foot-btn">
					<button class="mini-btn" type="primary" size="mini" @tap="retransmission">{{$t('确认')}}</button>
					<button class="mini-btn" type="default" size="mini"
						@tap="$refs.retransmissionPopup.close()">{{$t('取消')}}</button>
				</view>
			</view>
		</uni-popup>
		<!-- 全部退场入仓完成 -->
		<uni-popup ref="WarehousingPopup" background-color="#fff" @change="closeRetransmissionPopup">
			<view class="popup-content">
				<view class="popup-title">
					{{$t('货柜')}}{{ detail.boxInfo.dcCheckStatus == 1 ? $t('全部退场'): $t('部分退场') }}{{$t('确认入仓')}}
				</view>
				<view>
					<view style="padding: 4px 0">{{$t('自编号：{selfNo}中退场入仓的订单如下', {selfNo: detail.boxInfo.selfNo})}}：
					</view>
					<view v-for="(item, index) in orderList" :key="index" style="padding: 4px 0">{{ index + 1 }}.
						{{ item.orderNo }}
					</view>
					<view style="padding: 4px 0">
						{{$t('以上订单将从自编号：{selfNo}装箱单中移出并入仓，请问您确认吗？' ,{selfNo: detail.boxInfo.selfNo})}}
					</view>
				</view>
				<view class="popup-foot-btn">
					<button class="mini-btn" type="primary" size="mini" @tap="warehousing">{{$t('确认')}}</button>
					<button class="mini-btn" type="default" size="mini"
						@tap="$refs.WarehousingPopup.close()">{{$t('取消')}}</button>
				</view>
			</view>
		</uni-popup>
		<!-- 转异 -->
		<uni-popup ref="popup" background-color="#fff" class="add-popup">
			<view class="popup-content">
				<view class="popup-title">{{ selectOrderNo }}{{$t('订单转异')}}</view>
				<view class="form-wrap">
					<view style="align-items: center;">
						<text>{{$t('异常类型')}}</text>
						<uni-data-checkbox v-model="manualExceptionType" multiple :localdata="manualExceptionTypeList" />
					</view>
					<view>
						<text>{{$t('详细信息')}}</text>
						<uni-easyinput type="textarea" autoHeight v-model="descZh" placeholder=""></uni-easyinput>
					</view>
					<view>
						<text>{{$t('附件')}}</text>
						<view class="img-wrap">
							<uni-grid :column="4" :highlight="true" :show-border="false">
								<uni-grid-item v-for="(item, index) in exceptionList" :index="index" :key="index">
									<view class="grid-item-box" style="height: 100%">
										<image :src="item.url" mode="scaleToFill" style="height: 100%"
											@tap="previewImage(item.url)" />
									</view>
								</uni-grid-item>
								<uni-grid-item>
									<view class="grid-item-box" style="height: 100%">
										<view class="grid-item-box-add" @tap="chooseImages(false)">
											<uni-icons type="plusempty" size="30" color="#eae8eb"></uni-icons>
											<!-- <text>添加视频或图片</text> -->
										</view>
									</view>
								</uni-grid-item>
							</uni-grid>
						</view>
					</view>
				</view>
				<view class="popup-foot-btn">
					<button class="mini-btn" type="primary" size="mini" @tap="saveException">{{$t('提交')}}</button>
					<button class="mini-btn" type="default" size="mini" @tap="cancel">{{$t('取消')}}</button>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import {
  getCabinetDetail,
  getCabinetExitList,
  orderNoSearch,
  getOrderPage,
  changeContainer,
  exitOrder,
  confirmArrival,
  searchOrderByBoxNo,
  getCabinetExitDetail, updateExitBoxNum, getWarehouseAreaList
} from "./api";
import {
  getOrderInfo,
  finishWarehouseIn, getByWarehouseId
} from "../warehousing/api";
	import {
		updateImg
	} from '@/api/system'
	import * as types from '@/store/mutations-types.js'
	import iconpath from '../../static/images/close.png'
  import { DICT_TYPE } from "@/util/dict";
  import { alert, confirm, prompt } from "@/util/tools";
import { getLocationSelect } from "@/api/api";

	export default {
		data() {
			return {
				id: null,
				detail: {
					boxInfo: {}
				},
				orderList: [],
				imageList: [],
				keyword: '',
				iconpath: iconpath,
				addOrderList: [],
				retransmissionParams: {
					cubNo: '',
					sono: '',
					shipmentId: ''
				},
				manualExceptionType: [],
				manualExceptionTypeList: [],
				descZh: '',
				exceptionList: [],
				selectOrderId: '',
				selectOrderNo: '',

				orderLocationCreateReqVOList: [],
        area:[] // 储位信息
			};
		},
		methods: {
			toLocation(index) {
				const warehouseId = this.detail.boxInfo.startWarehouseId
				let url =`../warehousing/location?warehouseId=${warehouseId}&locationList=${JSON.stringify(this.orderLocationCreateReqVOList)}`
				console.log({url})
				uni.navigateTo({url});
			},
			searchOrder() {
				searchOrderByBoxNo({
					orderNumCode: this.keyword,
					shipmentId: this.id
				}).then(data => {
					this.addOrderList = [data]
					this.ScanSuccess()
				}).catch((data) => {
					this.ScanError()
				});
			},
			showException(item) {
				this.$refs.popup.open('center')
				this.selectOrderId = item.orderId
				this.selectOrderNo = item.orderNo
			},
      // 打开拆单页面
      showSplit(item){
        uni.navigateTo({
          url: `./split?orderId=${item.orderId}&shipmentId=${this.id}&canSplitNum=${item.refundNum}`
        })
      },
			cancel() {
				this.$refs.popup.close()
				this.manualExceptionType = ''
				this.descZh = ''
				this.exceptionList = []
			},
			saveException() {
				const params = {
					descZh: this.descZh,
					manualExceptionType: this.manualExceptionType.join(','),
					orderId: this.selectOrderId,
					isRollbackIn: true
				}
				if (this.exceptionList.length > 0) {
					params.exceptionUrls = this.exceptionList.map(v => v.url)
				}
				console.log(params, '--------params-----');

				// const pages = getCurrentPages()
				// console.log(pages, pages.length - 2, '---pages---');

				finishWarehouseIn(params).then(data => {
					this.$store.dispatch(types.SHOW_TOAST, {
						msg: this.$t('转异成功')
					});
					this.cancel()
					// uni.showModal({
					//   title: '提示',
					//   content: '是否需要打印入仓单？',
					//   confirmText: '打印',
					//   success: (res) => {
					//     setTimeout(() => {
					//       uni.navigateBack({
					//         delta: pages.length - 2
					//       })
					//     }, 100)
					//   }
					// });
				})
			},
			saveOrder() {
        let item = this.addOrderList[0]
        if(!item.refundNum || +item.refundNum <= 0){
          return this.$store.dispatch(types.SHOW_TOAST, {
            msg: this.$t('入仓箱数错误')
          });
        }
        if(this.addOrderList[0].refundNum > this.addOrderList[0].num){
          return this.$store.dispatch(types.SHOW_TOAST, {
            msg: this.$t('入仓箱数不能超过实装箱数')
          });
        }
				exitOrder({
					orderId: this.addOrderList[0].orderId,
					orderNo: this.addOrderList[0].orderNo,
					shipmentId: this.id,
          refundNum: this.addOrderList[0].refundNum,
					orderLocationCreateReqVOList: this.orderLocationCreateReqVOList
				}).then(data => {
					getCabinetExitList({
						shipmentId: this.id
					}).then(data => {
						this.orderList = data
					})
					this.$store.dispatch(types.SHOW_TOAST, {
						msg: this.$t('退场订单成功')
					});
					this.$refs.batchPopup.close()
				})
			},
			getData() {
				if (this.id) {
					getCabinetExitDetail({
						shipmentId: this.id
					}).then(data => {
						this.detail = data
						console.log(data.customsInfo.dcExitImg)
						const imgList = data.customsInfo?.dcExitImg?.split(',') ||[]
						this.imageList = imgList.length > 0 && imgList[0] !== '' ? imgList.map(e => {
							return {
								url: e,
								type: 'image'
							}
						}) : []
					})

          getCabinetExitList({
            shipmentId: this.id
          }).then(data => {
            this.orderList = data
          })
				}
			},
			chooseVideoImage() {
				uni.showActionSheet({
					title: this.$t('选择上传类型'),
					itemList: [this.$t('图片'), this.$t('视频')],
					success: res => {
						console.log(res);
						if (res.tapIndex == 0) {
							this.chooseImages();
						} else {
							this.chooseVideo();
						}
					}
				});
			},
			delimage(index) {
				this.imageList.splice(index, 1)
			},
			chooseImages(flag = true) {
				uni.chooseImage({
					count: 9, //默认是9张
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: res => {
						console.log(res, 'ddddsss')
						// let imgFile = res.tempFilePaths;
						res.tempFilePaths.forEach((item, index) => {
							updateImg(item).then(data => {
								// console.log(data, '--------res--------');
								if (flag) {
									this.imageList.push({
										type: 'image',
										url: data.data
									})

								} else {
									this.exceptionList.push({
										type: 'image',
										url: data.data
									})
									//   this.$set(this.exceptionList, this.exceptionList.length, { url: data.data })
								}
								console.log(data)
								// const type = res.tempFiles[index].type.split('/')[0]
							})
						})
					}
				})
			},
			//上传视频
			chooseVideo(index) {
				uni.chooseVideo({
					maxDuration: 60, //拍摄视频最长拍摄时间，单位秒。最长支持 60 秒
					count: 9,
					// camera: this.cameraList[this.cameraIndex].value, //'front'、'back'，默认'back'
					// sourceType: sourceType[this.sourceTypeIndex],
					success: res => {
						let videoFile = res.tempFilePath;
						console.log(res, 'ddddsss')
						// res.tempFilePaths.forEach((item, index) => {
						updateImg(videoFile).then(data => {
							console.log(data, '--------res--------');
							// const type = res.tempFile.type.split('/')[0]
							this.imageList.push({
								type: 'video',
								url: data.data
							})
						})
						// })
					},
					fail: (error) => {
						uni.hideLoading();
						uni.showToast({
							title: error,
							icon: 'none'
						})
					}
				})
			},
			previewImage(url) {
				//uniapp预览轮播图
				uni.previewImage({
					current: 0, //预览图片的下标
					urls: [url] //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			playVideo(index) {
				setTimeout(() => {
					this.videoContext = uni.createVideoContext(`video_${index}`)
					this.videoContext.play()
					// this.videoContext.requestFullScreen()
				}, 500)
			},
			fullscreenchange(event) {
				if (!event.detail.fullScreen) {
					// this.videoContext.pause()
				}
			},
			scanCode() {
				uni.scanCode({
					success: (res) => {
						this.keyword = res.result
						this.searchOrder()
					}
				})
			},
			closeBatchPopup({
				show
			}) {
				if (!show) {
					setTimeout(() => {
						this.keyword = ''
						this.addOrderList = []
					}, 500)
				}
			},
			closeRetransmissionPopup({
				show
			}) {
				if (!show) {
					this.retransmissionParams = {
						cubNo: '',
						sono: '',
						shipmentId: ''
					}
				}
			},
			retransmission() {
				this.retransmissionParams.shipmentId = this.id;
				changeContainer(this.retransmissionParams).then(data => {
					this.$store.dispatch(types.SHOW_TOAST, {
						msg: this.$t('重发成功')
					});
					setTimeout(() => {
						uni.navigateBack()
					}, 500)
				})
			},
			warehousing() {
				const params = {
					shipmentId: this.id,
					exitType: this.detail.boxInfo.dcCheckStatus,
          id: this.detail.customsInfo?.id
				}
				if (this.imageList.length > 0) params.dcExitImg = this.imageList.map(v => v.url).join(',')
				confirmArrival(params).then(data => {
					this.$store.dispatch(types.SHOW_TOAST, {
						msg: this.$t('入仓成功')
					});
					this.$refs.WarehousingPopup.close()
					setTimeout(() => {
						uni.navigateBack()
					}, 500)
				})
			},
      // 提交完成
      submit(){
        /* splitStatus
        * 0 不需要拆单
        * 1 部分退场待拆单
        * 2 拆弹中
        * 3 一拆单
        * */

        // 拆单箱数小于实装的提示拆单
        let orders = []
        this.orderList.forEach(item => {
          if (item.refundNum < item.installNum) {
            orders.push(item.orderNo)
          }
        })
        if(orders.length){
          return alert(this.$t('{orders}的退场入仓箱数小于实装箱数，请先完成退场订单的拆单申请后，再点击自编号退场完成', {orders: orders.join(',')}), this.$t('提示'))
        }
        confirm(this.$t('请问您确定自编号内所有订单均已退场入仓完成了吗？'), this.$t('提示')).then(res => {
          this.warehousing()
        })
      },
      // 修改退场箱数
      updateBoxNum(row){
        prompt(row.refundNum, this.$t('修改退场箱数'), this.$t("输入箱数")).then(res => {
          return updateExitBoxNum({id: row.orderExitId, refundNum: res.content})
        }).then(res => {
          this.getData()
        })
      },
      // 显示储位
      showLocationJson(json){
        if(!json) return ''
        let locationList = []
        try{
          locationList = JSON.parse(json)
        }catch (e) {
          return ''
        }
        // [{areaId: 21, wareId: 20}, {areaId: 21, locationId: 390, wareId: 20}]
        locationList.forEach(location => {
          // 根据wareId找到一级
          let firstLevel = this.area.find(item => item.id == location.wareId)
          if(!firstLevel || !firstLevel.children || !firstLevel.children.length){
            return
          }
          // 根据areaId找到二级
          let secondLevel = firstLevel.children.find(item => item.id == location.areaId)
          if(!secondLevel){
            return
          }
          if(location.locationId == undefined){
            location.name = `${secondLevel.name}`
            return
          }

          // 如果有locationId则找三级positionList
          let thirdLevel = secondLevel.positionList.find(item => item.id == location.locationId)
          location.name = thirdLevel.areaName + thirdLevel.code
        })
        return locationList.map(item => item.name).join(',')
      }
		},
		onLoad: function(option) {
			uni.setNavigationBarTitle({
				title: this.$t('退场货柜详情')
			})
			if ('id' in option) {
				this.id = option.id;
				this.retransmissionParams.shipmentId = this.id

        // 先获取库区库域列表，再获取详情
        getWarehouseAreaList().then(data => {
          this.area = data
          this.getData();
        })
			}
			this.manualExceptionTypeList = this.getDictDatas(this.DICT_TYPE.MANUAL_EXCEPTION_TYPE).map(v => ({
				...v,
				text: v.label
			}))

		},
		computed: {
      DICT_TYPE() {
        return DICT_TYPE
      },
			isChinese() {
				return uni.getLocale() === 'zh-Hans'
			}
		},
    watch:{
      // 订单变化后，需要提取仓库id并挨个获取储位信息
      /*orderList(list){
        console.log('watch list', list)
        let warehouseIds = []
        list.forEach(item => {
          if(item.locationJson){
            try{
              this.$set(item, 'locationList', JSON.parse(item.locationJson))
            }catch (e) {

            }
          }
          if(item.locationList && item.locationList.length){
            item.locationList.forEach(location => {
              if(location.wareId && warehouseIds.indexOf(location.wareId) === -1){
                warehouseIds.push(location.wareId)
              }
            })
          }
        })
        // 然后挨个获取储位
        warehouseIds.forEach(warehouseId => {
          console.log('获取储位信息', warehouseId)
          if(this.area[warehouseId])return
          getByWarehouseId({warehouseId}).then(res => {
            this.$set(this.area, warehouseId,res)
          })
        })
      }*/
    },
	};
</script>

<style scoped lang="scss">
	.detail-wrap {
		margin: -75px 0 0;

		// border-top-left-radius: 8px;
		// border-top-right-radius: 8px;
		>view {
			padding-left: 8px;
			padding-right: 8px;
			background: #fff;
		}

		>.info-wrap {
			border-top-left-radius: 8px;
			border-top-right-radius: 8px;
		}

		>view+view {
			margin-top: 12px;
		}

		.cu-form-group {
			background: none;
		}

		.order-list {
			padding: 16px;

			.list-hearder {
				display: flex;
				align-items: center;

				.title {
					font-size: 16px;
					font-weight: bold;
				}

				.header-right-btn {
					color: #007aff;
					margin-left: auto;
				}
			}

			.list-wrap {
				margin-top: 10px;

				::v-deep .uni-card {
					margin: 12px 0 0 !important;
				}

				.list-card-wrap {
					::v-deep .uni-row {
						padding: 4px 0;

						.uni-col {
							>view {
								.mini-btn {
									line-height: 2;
								}
							}
						}
					}
				}

				.no-data-text {
					font-size: 16px;
					text-align: center;
					line-height: 80px;
				}
			}
		}

		.img-wrap {
			padding: 0 15px;
			margin-bottom: 15px;

			::v-deep .uni-grid-item {
				background: #fbf8fb;
			}

			.grid-item-box-add {
				height: 100%;
				display: flex;
				flex-flow: column;
				font-size: 10px;
				padding: 16px 0;
				text-align: center;
				justify-content: center;
			}
		}
	}

	.popup-content {
		width: 90vw;
		border-radius: 8px;
		background: #fff;
		padding: 8px;
		max-height: 80vh;
		overflow: auto;

		.popup-title {
			line-height: 48px;
			text-align: center;
			font-size: 18px;
			font-weight: bold;
		}

		.form-wrap {
			>view {
				display: flex;
				margin-bottom: 8px;

				>text {
					width: 60px;
					margin-right: 8px;
				}
			}

			.title {
				font-size: 14px;
				// color: #323232;
			}
		}

		.popup-foot-btn {
			padding: 8px;
			margin-top: 8px;
			text-align: center;

			button {
				border: 1px solid #007aff;
			}

			>button+button {
				margin-left: 16px;
				color: #007aff;
				background: #fff;
			}
		}
	}

	::v-deep .uni-popup__wrapper {
		background: none !important;
	}

	.add-popup {
		::v-deep .uni-popup__wrapper {
			background: none !important;
		}

		.popup-content {
			width: 90vw;
			border-radius: 8px;
			background: #fff;
			padding: 8px;
			max-height: 80vh;
			overflow: auto;

			.popup-title {
				line-height: 48px;
				text-align: center;
				font-size: 18px;
				font-weight: bold;
			}

			.form-wrap {
				>view {
					display: flex;
					margin-bottom: 8px;

					>text {
						width: 60px;
						margin-right: 8px;
					}
				}

				.img-wrap {
					flex: 1;
					width: calc(100% - 68px);

					::v-deep .uni-grid-item {
						background: #fbf8fb;
					}

					.grid-item-box-add {
						height: 100%;
						display: flex;
						flex-flow: column;
						font-size: 10px;
						padding: 16px 0;
						text-align: center;
						justify-content: center;
					}
				}
			}

			.popup-foot-btn {
				padding: 8px;
				margin-top: 8px;
				text-align: center;

				button {
					border: 1px solid #007aff;
				}

				>button+button {
					margin-left: 16px;
					color: #007aff;
					background: #fff;
				}
			}
		}
	}
</style>
