<template>
<div>
  <h1>{{ $t('申请信息【订单信息】') }}</h1>
  <el-table :data="list"  v-if="type === 1">
    <el-table-column
      prop="orderNo"
      :label="$t('订单编号')">
    </el-table-column>
    <el-table-column
      prop="marks"
      :label="$t('唛头')">
    </el-table-column>
    <el-table-column
      label="已到箱数/总箱数">
       <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">
          <div>箱数：{{row.costVO.totalNum}}</div>
           <div>体积：{{row.costVO.totalVolume}}CMB</div>
           <div>重量：{{row.costVO.totalWeight}}kg</div>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      :label="$t('入仓统计')">
       <template v-slot="{row}">
         <div>总箱数：{{row.totalNum}}</div>
         <div>体积：{{row.sumVolume}}CBM </div>
         <div>重量：{{row.sumWeight}}kg</div>
       </template>
    </el-table-column>
    <el-table-column
      :label="$t('入仓时间')">
      <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('发货人')">
      <template v-slot="{row}">
        <p>
          {{row.consignorName}}
        </p>
        <p style="white-space: nowrap">
         +{{row.consignorCountryCode}}  {{row.consignorPhone}}
        </p>
      </template>
  </el-table-column>
      <el-table-column :label="$t('收货人')">
    <template v-slot="{row}">
        <p>
          {{row.consigneeName}}
        </p>
        <p style="white-space: nowrap">
          +{{row.consigneeCountryCode}} {{row.consigneePhone}}
        </p>
      </template>
    </el-table-column>
  </el-table>
  <el-descriptions  v-else-if="type === 2" :column="4" border>
    <el-descriptions-item :label="$t('订单号')">{{FeeDetails.orderBackVO.orderNo}}</el-descriptions-item>
    <el-descriptions-item :label="$t('运输方式')">
      <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="FeeDetails.orderBackVO.transportId"></dict-tag>
    </el-descriptions-item>
    <el-descriptions-item :label="$t('出货方式')">
      {{selectChannel(FeeDetails.channelId)}}
    </el-descriptions-item>
    <el-descriptions-item :label="$t('订单状态')">
      <dict-tag :type="DICT_TYPE.ORDER_ABNORMAL_STATE" :value="FeeDetails.orderBackVO.abnormalState"></dict-tag>
    </el-descriptions-item>
    <el-descriptions-item :label="$t('唛头')">
      {{FeeDetails.orderBackVO.marks}}
    </el-descriptions-item>
    <el-descriptions-item :label="$t('始发仓')">{{FeeDetails.startWarehouse}}</el-descriptions-item>
    <el-descriptions-item :label="$t('目的仓')">{{FeeDetails.destWarehouse}}</el-descriptions-item>
  </el-descriptions>
  <el-descriptions  v-else-if="type === 3 || type === 4" :column="4" border>
    <el-descriptions-item :label="$t('订单号')">{{FeeDetails.orderNo}}</el-descriptions-item>
    <el-descriptions-item :label="$t('运输方式')">
      <dict-tag :type="DICT_TYPE.ECW_TRANSPORT_TYPE" :value="FeeDetails.transportId"></dict-tag>
    </el-descriptions-item>
    <el-descriptions-item :label="$t('出货方式')">
      {{selectChannel(FeeDetails.channelId)}}
    </el-descriptions-item>
    <el-descriptions-item :label="$t('订单状态')">
      <dict-tag :type="DICT_TYPE.ORDER_ABNORMAL_STATE" :value="FeeDetails.abnormalState"></dict-tag>
    </el-descriptions-item>
    <el-descriptions-item :label="$t('唛头')">
      {{FeeDetails.marks}}
    </el-descriptions-item>
    <el-descriptions-item :label="$t('始发仓')">{{FeeDetails.logisticsInfoDto.startTitleZh}}</el-descriptions-item>
    <el-descriptions-item :label="$t('目的仓')">{{FeeDetails.logisticsInfoDto.destTitleZh}}</el-descriptions-item>
  </el-descriptions>
  <div v-if="type === 1">
    <p>{{ $t('申请说明') }}</p>
    <div >
      从 【{{selectWarehouse(FeeDetails.details && FeeDetails.details.warehouseOutId ? FeeDetails.details.warehouseOutId : '' )}}】 调到
      【{{selectWarehouse(FeeDetails.details && FeeDetails.details.warehouseInId ? FeeDetails.details.warehouseInId : '' )}}】
    </div>
  </div>
  <div v-if="type === 2">
    <p>{{ $t('申请理由') }}</p>
    <div>
      <dict-tag   :type="DICT_TYPE.FEE_TYPE" :value="FeeDetails.feeType" />，
      {{FeeDetails.applicationFee}}
      <!-- <dict-tag   :type="DICT_TYPE.COMMISSION_    CURRENCY_TYPE" :value="FeeDetails.applicationFeeCurrency" />， -->
      {{currencyName(FeeDetails.applicationFeeCurrency)}}
      <dict-tag  :value="FeeDetails.payType"  :type="DICT_TYPE.PAYMENT_TYPE" ></dict-tag>，
      【{{FeeDetails.remarks}}】
    </div>
  </div>
  <div v-if="type === 3">
    <p>{{ $t('申请理由') }}</p>
    <div>
      {{ FeeDetails.details && FeeDetails.details.reason ? FeeDetails.details.reason :''}}
    </div>
    <p>{{$t('退仓图片')}}</p>
    <div>
      <el-image
        v-for="(item, index) in (FeeDetails.details.imgUrl || '').split(',')"
        :key = 'index'
        style="width: 100px; height: 100px;margin:10px;"
        :src="item"
        :preview-src-list="(FeeDetails.details.imgUrl || '').split(',')">
      </el-image>
    </div>
  </div>
  <div v-if="type === 4">
    <p>{{ $t('申请理由') }}</p>
    <div>
      用户修改了订单中商品编号为【{{ FeeDetails.orderItemVOList[0].prodId }}】的【{{ prodName }}】信息：
      <ol>
        <template v-for="item in FeeDetails.details.applyInfoVOList">
          <li v-if="item.orgValue === undefined">{{ item.name }}：{{ item.newValue }}</li>
          <li v-else-if="item.newValue === undefined">{{ $t('删除入仓') }} 【{{ item.orgValue }}】</li>
          <li v-else-if="item.newValue !== item.orgValue">{{ item.name }}从【{{ item.orgValue }}】改为【{{ item.newValue }}】</li>
        </template>
      </ol>
    </div>
  </div>
</div>
</template>

<script>
import {
  warehouseApprovalGetByFormId,
  warehouseApprovalGetById,
  warehouseAreaPositionList
} from "@/api/ecw/batchSingleApplication";
import {
  applicationGetOrderByProcessId,
  feeApplicationGet,
  getOrder,
  getOrderPage,
  getWarehouseUpdateApprovalInfo
} from '@/api/ecw/order'

import { getChannelList } from '@/api/ecw/channel';
import Template from "@/views/cms/template";
import {getSupplierPage} from "@/api/ecw/supplier";
import { DICT_TYPE } from "@/utils/dict";

import { getCurrencyList } from "@/api/ecw/currency";
import {arrryToKeyedObjectBy} from '@/utils/index'
export default {
  components: {Template},
  props:{
    type:{
      type: Number,
       default:1,
    },
    processId:{
      type:[Number,String],
    }
  },
  name: "warehouseDetails",
  data(){
    return{
      DICT_TYPE,
      FeeDetails:{
        orderBackVO:{},
        logisticsInfoDto:{}
      },
      transfer:{},
      warehouseList:[],
      channelList:[],
      processInstanceID:undefined,
      list:[],
      currencyList:[],
      prodName: ''
    }
  },
  computed:{
    currencyMap(){
      return arrryToKeyedObjectBy(this.currencyList, 'id')
    },
    currencyName(){
      return id => {
        let obj = this.currencyMap[id]
        if(obj) return this.$l(obj, 'title')
        return this.$t('未知')
      }
    }
  },
  created() {
    getCurrencyList().then(res => {
      this.currencyList = res.data
    })
    getChannelList().then(r => this.channelList = r.data);
    warehouseAreaPositionList().then(r => this.warehouseList = r.data)
       if(this.type === 2){
         feeApplicationGet({id:this.processId}).then(r => {
           if(r.code === 0){
             this.processInstanceID = r.data.bpmProcessId;
             this.getDetails()
           }
         })
       }else {
         warehouseApprovalGetById({id:this.processId}).then(r => {
           if(r.code === 0){
             this.processInstanceID = r.data.formId;
             this.getDetails()
           }
         })
       }
  },
  methods:{
    selectWarehouse(val){
      if(this.warehouseList.length > 0 && !!val){
       return  this.warehouseList.find(e => e.id === val).titleZh
      }
        return ''
    },
    selectChannel(val){
      if(this.channelList.length > 0 && !!val) return this.channelList.find(e => e.channelId === val).nameEn
      return ''
    },
    getDetails(){
      switch (this.type){
        case 1:
          //调仓
          warehouseApprovalGetByFormId({formId:this.processInstanceID}).then( r => {
            this.FeeDetails = r.data
            this.FeeDetails.details = JSON.parse(r.data.details)
              getOrderPage({orderIdList:r.data.adjustActualOrderIds}).then(res=>{
              this.list = res.data.list
            })

          });
          break;
        case 2:
          // 费用申请
          applicationGetOrderByProcessId({processId:this.processInstanceID}).then(r => {
            this.FeeDetails = r.data
            console.log(this.FeeDetails,'FeeDetails')
          })
          break;
        case 3:
          //退仓
          warehouseApprovalGetByFormId({formId:this.processInstanceID}).then( res => {
            getOrder(res.data.orderIds).then(r =>{
              this.FeeDetails = r.data
              this.FeeDetails.details = JSON.parse(res.data.details)
            })
          });
          break;
        case 4:
          // 入仓修改
          getWarehouseUpdateApprovalInfo(this.processInstanceID).then(res => {
            getOrder(res.data.orderIds).then(r =>{
              this.FeeDetails = r.data
              this.FeeDetails.details = JSON.parse(res.data.details)
              const orderItem = this.FeeDetails.orderItemVOList.find(e => e.orderItemId === this.FeeDetails.details.orderItemId)
              if (orderItem){
                this.prodName = orderItem.prodTitleZh + '(' + orderItem.prodTitleEn + ')'
              }
            })
          })
          break
      }
    }

  }
}
</script>

<style scoped>

</style>