<template>
	<view class="main">
		<view class="apply-bg"></view>
		<view class="apply-main">
      <view class="detail-order-time" style="margin-top:15px">
        <view class="detail-order-time-lf">
          <image src="../../static/images/err-2.png" mode=""></image>
          <text style="font-weight: bold; color: red; font-size: 1.5rem">*</text>
          <text v-if="isAir">{{$t('到仓时间')}}</text>
          <text v-else>{{$t('卸柜时间')}}</text>
        </view>
        <view class="detail-order-time-rf">
          <leeDatetime @change="bindDateTimeChange" :placeholder="$t('请选择日期时间')" :value="unloadTime"></leeDatetime>
        </view>
      </view>
			<view class="apply-sn">
				<view class="apply-sn-lf">
					<image src="../../static/images/xiegui-12.png" mode=""></image>
					<text>{{$t('订单号')}}</text>
				</view>
				<view class="apply-sn-rf">{{ orderInfo.orderNo }}</view>
			</view>
			<view class="apply-items" v-for="(item, index) in orderInfo.orderItemVOList" :key="index">
				<view class="apply-items-sn">{{$t('序号')}}：{{index+1}}</view>
				<view class="apply-items-flex">
					<view class="apply-items-flex-v">
						<view class="apply-items-flex-v-s">
							<image src="../../static/images/pinm.png" mode=""></image>
							<view>{{$t('品名')}}:<text>{{ item.prodTitleZh }}</text></view>
						</view>
						<view class="apply-items-flex-v-s">
							<image src="../../static/images/xiegui-4.png" mode=""></image>
							<view>{{$t('品牌')}}:<text>{{ [$t('无牌'), $t('有牌'), $t('中性')][item.brandType] }}</text></view>
						</view>
						<view class="apply-items-flex-v-s">
							<image src="../../static/images/xiegui-8.png" mode=""></image>
							<view>{{$t('体积')}}:<text>{{ item.volume }}m³</text></view>
						</view>
					</view>
					<view class="apply-items-flex-v">
						<view class="apply-items-flex-v-s">
							<image src="../../static/images/xiegui-11.png" mode=""></image>
							<view>{{$t('状态')}}:
							<text>
								<dict-tag v-if="item.warehouseInInfoVO && item.warehouseInInfoVO.diffType" :type="DICT_TYPE.ORDER_WAREHOUSE_IN_STATUS" :value="item.warehouseInInfoVO.diffType" class="red" :class="{green: item.warehouseInInfoVO.diffType === 4}"/>
								<span class="red" v-if="item.warehouseInInfoVO && item.warehouseInInfoVO.cartonsNumDiff">{{ item.warehouseInInfoVO.cartonsNumDiff }}{{$t('箱')}}</span>
							</text>
						</view>
						</view>
						<view class="apply-items-flex-v-s">
							<image src="../../static/images/xiegui-8.png" mode=""></image>
							<view>{{$t('箱数')}}:<text>{{ item.num }}{{$t('箱')}}</text></view>
						</view>
						<view class="apply-items-flex-v-s">
							<image src="../../static/images/xiegui-9.png" mode=""></image>
							<view>{{$t('重量')}}:<text>{{ item.weight }}Kg</text></view>
						</view>
					</view>
				</view>
				<view class="apply-items-bom" v-if="item.warehouseInInfoVO">
					<view class="apply-items-bom-title">{{$t('品名')}}:<text>{{ item.prodTitleZh }}</text></view>
					<view class="apply-items-bom-flex">
						<view class="apply-items-bom-flex-v">
							<view class="">{{$t('品牌')}}:<text>{{ item.brandName }}</text></view>
							<view class="">{{$t('体积')}}:<text>{{ item.warehouseInInfoVO.volume }}m³</text></view>
							<view class="">{{$t('尺寸')}}:<text>
								{{
								  orderItemList.find(v => v.orderItemId === item.orderItemId)
								  && orderItemList.find(v => v.orderItemId === item.orderItemId).orderWarehouseInBackItemDoList[0]
								  && orderItemList.find(v => v.orderItemId === item.orderItemId).orderWarehouseInBackItemDoList[0].boxGauge
								}}
							</text></view>
						</view>
						<view class="apply-items-bom-flex-v">
							<view class="">{{$t('箱数')}}:<text>{{ item.warehouseInInfoVO.cartonsNum }}{{$t('箱')}}</text></view>
							<view class="">{{$t('重量')}}:<text>{{ item.warehouseInInfoVO.weight }}Kg</text></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="apply-put">
			<view class="apply-put-view">
				<view class="apply-put-view-lf">
					<image src="../../static/images/xiegui-12.png" mode=""></image>
					<text>{{$t('下单统计')}}</text>
				</view>
				<view class="apply-put-view-rf">
					{{ statistics.orderSum }}{{$t('箱')}} {{ statistics.orderV }}m³ {{ statistics.orderW }}Kg {{$t('数量')}}({{$t('个')}}): {{ statistics.orderQ }}
				</view>
			</view>
			<view class="apply-put-view">
				<view class="apply-put-view-lf">
					<image src="../../static/images/xiegui-5.png" mode=""></image>
					<text>{{$t('入仓统计')}}</text>
				</view>
				<view class="apply-put-view-rf">
					{{ statistics.leviteSum }}箱 {{ statistics.leviteV }}m³ {{ statistics.leviteW }}Kg {{$t('数量')}}({{$t('个')}}): {{ statistics.leviteQ  }}
				</view>
			</view>
			<view class="apply-put-view">
				<view class="apply-put-view-lf">
					<image src="../../static/images/xiegui-6.png" mode=""></image>
					<text>{{$t('储位')}}</text>
				</view>
				<view class="apply-put-view-rf" @tap="toLocation" style="width: 400upx;text-align: right">
					<view class="content">
					  {{ orderLocationCreateReqVOList.map(v => v.code).join(',') }}
					  <uni-icons type="right" size="16"></uni-icons>
					</view>
				</view>
			</view>
			<view class="apply-put-view">
				<view class="apply-put-view-lf">
					<image src="../../static/images/xiegui-11.png" mode=""></image>
					<text>{{$t('收货人员')}}</text>
				</view>
				<view class="apply-put-view-rf">{{ orderInfo.consigneeVO ? orderInfo.consigneeVO.name : '' }}</view>
			</view>
		</view>

		<view class="detailbtns">
			<view class="">
				<text @click="orderModelToggle">{{$t('转异')}}</text>
			</view>
			<view class="">
				<text @click="orderBatchUnload">{{isAir ? $t('完成到仓') : $t("完成卸柜") }}</text>
			</view>
		</view>

		<!-- 订单异常柜型弹窗 -->
		<view class="cu-modal" :class="orderModel ? 'show' : ''" style="z-index: 999;">
			<view class="cu-main">
				<view class="cu-title">{{$t('异常')}}</view>
				<view class="cu-tips">
					<image src="../../static/images/zhyi.png" mode=""></image>
					<text>{{$t('异常类型')}}</text>
				</view>
				<view class="cu-reson">
					<view class="" v-for="(i, v) in shippingUnloadingError" @click="shippingUnloadingChoose(i.value)">
						<image :src="shippingUnloadingValue == i.value ? '../../static/images/radio-true.png' : '../../static/images/radio-false.png'" mode=""></image>
						<text>{{i.label}}</text>
					</view>
				</view>
				<view class="cu-goods-view">
					<view class="cu-goods">
						<image src="../../static/images/pinm.png" mode=""></image>
						<text>{{$t('品名')}}</text>
					</view>
					<view class="cu-select">
						<picker :value="goodsIndex" :range="goodsData" @change="goodsChange" v-if="goodsData.length > 0">
							<view class="uni-input">{{goodsData[goodsIndex]}}</view>
						</picker>
					</view>
				</view>
				<view class="cu-goods-view">
					<view class="cu-goods">
						<image src="../../static/images/number.png" mode=""></image>
						<text>{{$t('件数')}}</text>
					</view>
					<view class="cu-select">
						<input type="number" v-model="productNum" :placeholder="$t('请输入件数')">
					</view>
				</view>
				<view class="cu-goods-view no-border-bottom">
					<view class="cu-goods-info">
						<image src="../../static/images/yichang.png" mode=""></image>
						<text>{{$t('异常详情')}}</text>
					</view>
					<view class="cu-goods-textarea">
						<textarea name="" v-model="exceptionDetail"></textarea>
					</view>
				</view>
				<view class="cu-btns">
					<view class="">
						<text @click="unloadCabinetOrderCreate">{{$t('提交')}}</text>
					</view>
					<view class="">
						<text @click="orderModelToggle()">{{$t('关闭')}}</text>
					</view>
				</view>
			</view>
		</view>

	</view>
</template>
<script>
	import leeDatetime from "@/components/lee-datetime/lee-datetime.vue"
	import * as types from '../../store/mutations-types.js';
	import { uniLoadMore } from '@dcloudio/uni-ui';
	import { cabinetUnloadDetail } from './api';
	import { unloadCabinetOrder } from './api';
	import { boxAbnormal } from './api';
	import { getOrderWarehouseIn } from './api';
	import { getOrderInfo } from './api';
	import { batchUnload } from './api';
	export default {
		name: 'apply',
		components: { uniLoadMore, leeDatetime },
		data() {
			return {
				orderInfo: {},
				orderLocationCreateReqVOList: [],
				statistics: {},

				shippingUnloadingError: [], //订单异常
				shippingUnloadingValue: '', //订单异常值
				orderModel: false, //订单异常弹框
				orderId: 0, //订单ID

				goodsData: [], //品名
				goodsIndex: 0,
				goodsIds: [],
				productNum: '', //件数
				exceptionDetail: '', //异常详情

				orderItemList: [],
        unloadTime: null, // 卸柜时间
			}
		},
    computed:{
      isAir(){
        return this.orderInfo?.transportId === 3 || this.orderInfo?.transportId === 4
      }
    },
		onLoad (option) {
			uni.setNavigationBarTitle({
				title:this.$t('确认信息')
			})
			this.shippingUnloadingError =  this.$store.getters.dict_datas.shipping_unloading_error
			this.orderId = option.orderId
			this.shipmentId = option.shipmentId
			this.getOrder(this.orderId)
			getOrderWarehouseIn(this.orderId).then(data => this.orderItemList = data ? data.reverse() : [])
		},
		methods: {
			getOrder (orderId) {
				getOrderInfo(orderId).then(data => {
					this.orderInfo = data
					this.getStatistics()
				})
			},
			toLocation(){
				const warehouseId = this.orderInfo?.logisticsInfoDto?.startWarehouseId
				let url = `./location?warehouseId=${warehouseId}&orderId=${this.orderId}&locationList=${JSON.stringify(this.orderLocationCreateReqVOList)}`
				uni.navigateTo({
					url: url
				})
			},

			getStatistics(){
			  let orderSum = 0
			  let orderV = 0
			  let orderW = 0
			  let leviteSum = 0
			  let leviteV = 0
			  let leviteW = 0
			  let orderQ = 0
			  let leviteQ = 0
			  this.orderInfo?.orderItemVOList?.forEach((column, index) => {
			      orderSum += column.num
			      orderV += column.volume
			      orderW += column.weight
			      orderQ += column.quantity
			      leviteSum += column.warehouseInInfoVO?column.warehouseInInfoVO.cartonsNum:0
			      leviteV += column.warehouseInInfoVO?column.warehouseInInfoVO.volume:0
			      leviteW += column.warehouseInInfoVO?column.warehouseInInfoVO.weight:0
			      leviteQ += column.warehouseInInfoVO?column.warehouseInInfoVO.quantityAll:0
			  });
			  this.statistics = { orderSum, orderV, orderW, leviteSum, leviteV, leviteW, orderQ, leviteQ }
			},

			//订单异常显示
			orderModelToggle () {
				this.orderModel = !this.orderModel
				this.shippingUnloadingValue = ''
				if(this.goodsData.length == 0){
					console.log('111', this.orderInfo.orderItemVOList)
					if(this.orderInfo.orderItemVOList){
						for(let i = 0; i < this.orderInfo.orderItemVOList.length; i++){
							this.goodsData.push(this.orderInfo.orderItemVOList[i].prodTitleZh)
							this.goodsIds.push(this.orderInfo.orderItemVOList[i].orderItemId)
						}
					}
				}
				if(!this.orderModel){
					this.goodsData = []
					this.goodsIds = []
					this.productNum = ''
					this.exceptionDetail = ''
				}
			},

			shippingUnloadingChoose (e) {
				this.shippingUnloadingValue = e
			},

			goodsChange (e) {
				this.goodsIndex = e.detail.value
				console.log('goodsid', this.goodsIds[this.goodsIndex])
			},

			//提交异常
			unloadCabinetOrderCreate () {
				if(this.shippingUnloadingValue == ''){
					return uni.showToast({
						title: this.$t('请选择异常类型'),
						icon: 'error',
					})
				}
				if(this.productNum == ''){
					return uni.showToast({
						title: this.$t('请输入件数'),
						icon: 'error',
					})
				}
				if(this.exceptionDetail == ''){
					return uni.showToast({
						title: this.$t('请输入异常详情'),
						icon: 'error',
					})
				}
				let params = {
					exceptionDetail: this.exceptionDetail,
					exceptionType: this.shippingUnloadingValue,
					orderId: this.orderId,
					productId: this.goodsIds[this.goodsIndex],
					productNum: this.productNum,
					shipmentId: this.shipmentId
				}
				let t = this
				unloadCabinetOrder(params).then(res => {
					if(res > 0){
						uni.showModal({
							title: this.$t('提示'),
							content: res.msg || this.$t('提交异常成功'),
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									t.orderModelToggle()
									t.getOrder(t.orderId)
								}
							}
						})
					} else {
						uni.showToast({
							title: res.msg || this.$t('提交失败'),
							icon: 'none'
						})
					}
				})
			},
			orderBatchUnload () {
				let t = this
				if(this.orderLocationCreateReqVOList.length == 0){
					return uni.showToast({
						title: this.$t('请选择储位'),
						icon: 'error',
					})
				}

				let params = {
					orderId: t.orderId,
					orderNo: t.orderInfo.orderNo,
					shipmentId: t.shipmentId,
					orderLocationList: this.orderLocationCreateReqVOList,
          unloadTime: this.unloadTime
				}

        if(!params.unloadTime){
          return uni.showToast({
            title: this.isAir ? this.$t('请选择到仓时间') : this.$t('请选择鞋柜时间'),
            icon: 'error',
          })
        }

				batchUnload(params).then(res => {
					if(res > 0){
						uni.showModal({
							title: this.$t('提示'),
							content: res.msg || this.$t('操作成功'),
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									t.getOrder(t.orderId)
								}
							}
						})
					} else {
						uni.showToast({
							title: res.msg || this.$t('操作失败'),
							icon: 'none'
						})
					}
				})
			},
      bindDateTimeChange(e){
        this.unloadTime = e.value
      }
		}
	}
</script>

<style>
	@import url(./apply.css);
	@import url(./detail.css);
</style>
