<template>
  <el-dialog
    :visible.sync="dialogVisible"
    width="80%"
    :before-close="()=>{
      $emit('update:dialogVisible',false)
    }">
    <div class="batch-single-application">
      <h1 class="title">{{$t('调仓申请')}}</h1>
      <el-table :data="list">
        <el-table-column :label="$t('订单编号')" prop="orderNo"></el-table-column>
        <el-table-column :label="$t('唛头')" prop="marks"></el-table-column>
        <el-table-column :label="$t('已到箱数/总箱数')">
          <template v-slot={row}>
            {{ row.sumNum }}箱/{{ row.totalNum }}箱
          </template>
        </el-table-column>
        <el-table-column :label="$t('下单统计')">
          <template v-slot="{row}">
            <div v-if="row.costVO">
              {{$t('箱数')}}：{{ row.costVO.totalNum }}
               <div>
                 体积：{{ row.costVO.totalVolume }}CBM
               </div>
                <div>
                  重量：{{ row.costVO.totalWeight }}kg
                </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('入仓统计')" width="150">
          <template v-slot="{row}">
            <div>{{$t('总箱数')}}：{{ row.sumNum || 0 }}</div>
            <div>{{$t('体积')}}：{{ row.sumVolume || 0 }}CBM</div>
            <div>{{$t('重量')}}：{{ row.sumWeight || 0 }}KG</div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('入仓时间')" prop="rucangTime">
           <template v-slot="{row}">
             {{parseTime(row.rucangTime)}}
           </template>
        </el-table-column>
        <el-table-column :label="$t('运输方式')">
          <template v-slot={row}>
            <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="row.transportId"></dict-tag>
          </template>
        </el-table-column>
        <el-table-column :label="$t('出货渠道')">
          <template v-slot="{row}">
           {{row.channelName || '/'}}</template>
        </el-table-column>
        <!--      <el-table-column :label="$t('始发仓')" prop="startWarehouseName"></el-table-column>-->
        <el-table-column :label="$t('目的地')" prop="objectiveName"></el-table-column>
        <el-table-column :label="$t('始发仓')" prop="startWarehouseName">
        </el-table-column>
        <el-table-column :label="$t('发货人')">
          <template v-slot="{row}">
            <div>
              <div>
                <p>
                  {{ row.consignorName }}
                </p>
                <p>
                  +{{row.consignorCountryCode}}   {{row.consignorPhone}}
                </p>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('收货人')">
          <template v-slot="{row}">
            <div>
              <p>
                {{ row.consigneeName }}
              </p>
              <p>
               +{{row.consigneeCountryCode}}   {{ row.consigneePhone}}
              </p>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <el-row style="margin-top: 30px">
        <el-col :span="8">
          <div style="text-align: right;">
            {{ list[0] && list[0].adjustToDestWarehouseName ? list[0].adjustToDestWarehouseName : list[0] ? [14,16,15].includes(this.list[0].status) ? list[0].dstWarehouseName : list[0].startWarehouseName : '' }}
          </div>
        </el-col>
        <el-col :span="3"><div style="text-align:center">
          {{$t('调至')}}
        </div></el-col>
        <el-col :span="8">
          <el-select clearable v-model="params.warehouseInId">
          <el-option  v-for="(item ,index) in availableWarehouse" v-if="item.status !== 1"  :value="item.id" :label="item.titleZh"
                     :key="index"></el-option>
        </el-select></el-col>
      </el-row>
      <el-divider contentPosition="left">{{$t('调仓明细')}}</el-divider>
      <el-card class="box-card">
          <el-table :data="warehouseList">
            <el-table-column :label="$t('调仓编号')" prop="id"></el-table-column>
            <el-table-column :label="$t('调出仓库')" prop="warehouseOutName" ></el-table-column>
            <el-table-column :label="$t('调入仓库')" prop="warehouseInName"></el-table-column>
            <el-table-column :label="$t('申请人')" prop="creatorName"></el-table-column>
            <el-table-column :label="$t('申请时间')">
              <template v-slot="{row}">
                {{parseTime(row.createTime)}}
              </template>
            </el-table-column>
            <el-table-column :label="$t('状态')">
              <template v-slot="{row}">
                {{STATUS[row.status]}}
              </template>
            </el-table-column>
            <el-table-column :label="$t('出仓影像')">
              <template v-slot="{row}">
                <warehouse-video-list :modal="false" :status="2" :item ="row"></warehouse-video-list>
              </template>
            </el-table-column>
            <el-table-column :label="$t('入仓影像')">
              <template v-slot="{row}">
                <warehouse-video-list :modal="false" :status="3" :item ="row"></warehouse-video-list>
              </template>
            </el-table-column>
            <el-table-column :label="$t('调拨出仓备注')" prop="deliveryRemark">
            </el-table-column>
            <el-table-column :label="$t('调拨到仓备注')" prop="arrivalRemark">
            </el-table-column>
          </el-table>
      </el-card>
      <el-divider contentPosition="left">{{$t('审批流程')}}</el-divider>
      <div style="padding: 20px">
        <work-flow xmlkey="warehouse_transfer" v-model="params.copyUserId"/>
      </div>
      <div style="text-align: center" v-if="!adjustmentBol">
        <el-button :disabled="!params.warehouseInId" style="margin-right: 50px" @click="submit">{{$t('提交申请')}}</el-button>
        <el-button @click="$emit('update:dialogVisible',false)">{{$t('取消')}}</el-button>
      </div>
      <div style="text-align: center" v-else>
        <el-button @click="()=>{
          $emit('update:dialogVisible',false)
          $router.push({path:'/bpm/process-instance/detail',query:{id:this.applyStatus.orderWarehouseApprovalBackVO.formId}})
        }">{{$t('审核中')}}</el-button>
        <el-button @click="cancellationOfOrder" >{{$t('取消审核')}}</el-button>
        <el-button @click="$emit('update:dialogVisible',false)" >{{$t('取消')}}</el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {DICT_TYPE, getDictDatas} from "@/utils/dict";
import {
  adjustApplyStatus, adjustLastWithStatus, cancelAdjustApply,
  ecwOrderList,
  orderWarehouseInAdjustApply,
  warehouseAdjustmentList, warehouseApprovalCancel,
} from "@/api/ecw/batchSingleApplication";
import {getProcessDefinitionBpmnXMLByKey} from "@/api/bpm/definition";
import warehouseDetails from "@/views/ecw/order/components/warehouseDetails";
import {getAdjustInfo, getOrderPage} from "@/api/ecw/order";
import workFlow from "@/components/WorkFlow";
import Template from "@/views/cms/template";
import {arrryToKeyedObjectBy} from "@/utils";
import {getChannelList} from "@/api/ecw/channel";
import WarehouseVideoList from "@/views/ecw/order/components/warehouse-video-list.vue";

export default {
  name: "batchSingleApplication",
  props: {
    orderList: [String, Number],
    dialogVisible: {
      type: Boolean,
      default: false,
    }
  },
  components: {
    WarehouseVideoList,
    Template,
    warehouseDetails,
    workFlow
  },
  created() {
    getChannelList().then(res => this.channelList = res.data)

    },

  watch: {
    dialogVisible(val) {
      if (val) {
        this.getOrderListFn()
        getAdjustInfo({orderId:this.orderList,lang:0}).then(r => {
          this.warehouseList = r.data
        })
      } else {
        this.params = {
          orderIds: undefined,
          warehouseInId: undefined,
          warehouseOutId: undefined,
          copyUserId: [],
        }
      }
    }
  },
  computed: {
    adjustmentBol() {
      return this.applyStatus?.orderWarehouseAdjustBackVO?.status === 1
    },
    getShipChannelName() {
      return shippingChannelId => {
        for (let index in this.channelList) {
          let channelItem = this.channelList[index];
          if (channelItem.channelId == shippingChannelId) {
            return channelItem.nameZh;
          }
        }
        return '/'
      }
    }
  },
  data() {
    return {
      STATUS : {1:this.$t('申请中'), 2:this.$t('通过'), 3:this.$t('不通过'), 4:this.$t('已取消'), 5:this.$t('已出仓'),6:this.$t('已到仓')},
      list: [],
      selectedUsers: [],
      availableWarehouse: [],
      DICT_TYPE,
      departureWarehouse: undefined,
      adjustment: undefined,
      params: {
        orderIds: undefined,
        warehouseInId: undefined,
        warehouseOutId: undefined,
        copyUserId: [],
      },
      applyStatus:{},//调仓-查看状态,
      channelList:[],
      warehouseList:[]

    }
  },
  methods: {
    getOrderListFn() {
      getOrderPage({orderIdList: this.orderList}).then(r => {
        this.list = r.data.list
        warehouseAdjustmentList({id: this.list[0].adjustToDestWarehouseId  ? this.list[0].adjustToDestWarehouseId  :[14,16,15].includes(this.list[0].status) ? this.list[0].dstWarehouseId : this.list[0].startWarehouseId }).then(r => this.availableWarehouse = r.data)
        adjustLastWithStatus({orderId:this.list[0].orderId,lang:0}).then(r =>{
          this.applyStatus = r.data
          if(r.data?.orderWarehouseAdjustBackVO?.status === 1){
            this.params.warehouseInId = r.data.orderWarehouseAdjustBackVO?.warehouseInId
          }
        })
      })
    },
    submit() {
      let p = this.list.map(e => e.orderId).join(',');
      this.params.orderIds = p;
      this.params.warehouseOutId = this.list[0].adjustToDestWarehouseId  ? this.list[0].adjustToDestWarehouseId  : [14,16,15].includes(this.list[0].status) ? this.list[0].dstWarehouseId : this.list[0].startWarehouseId;
      this.params.orderNo = this.list[0].orderNo
      orderWarehouseInAdjustApply(this.params).then(r => {
        if (r.code === 0) {
          this.$emit('update:dialogVisible', false)
          this.$message.success(this.$t('调仓申请提交成功，请耐心等待审核'));
        }
      })
    },
    cancellationOfOrder(){
      this.$prompt(this.$t('请输入审核调仓原因'), this.$t('提示'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
      }).then(({ value }) => {
        warehouseApprovalCancel(this.applyStatus.orderWarehouseApprovalBackVO.id,value) .then(r => {
          if(r.data){
            this.$message.success(this.$t('取消调仓成功'))
            this.$emit('update:dialogVisible',false)

          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: this.$t('取消成功')
        });
      });
    },

  }
}
</script>

<style scoped lang="scss">
.batch-single-application {
  padding: 20px;
  box-sizing: border-box;

  .title {
    font-weight: 600;
    text-align: left;
  }
}

.my-process-designer {
  height: calc(100vh - 200px);
}

.box-card {
  width: 100%;
  margin-bottom: 20px;
}
</style>