<template>
    <!-- 订单获取入仓记录 -->
    <el-dialog :title="title" visible :before-close="closeDialog" :close-on-click-modal="false" width="1000px">
        <el-button v-if="info.transportId==3" style="position:absolute;top:15px;left:340px" type="primary" @click="seePackLog">{{$t('查看打包历史')}}</el-button>
        <el-table v-if="warehouseItem && warehouseItem.orderWarehouseInBackItemDoList" :data="warehouseItem.orderWarehouseInBackItemDoList">
          <el-table-column type="index" :label="$t('序号')" />
          <el-table-column :label="$t('箱数')" prop="cartonsNum">
            <template slot-scope="{row}">
              <template v-if="row.orderWarehouseInDetailsVOList && row.orderWarehouseInDetailsVOList.length">
                <WarehouseRecordDetail v-model="row.orderWarehouseInDetailsVOList" :num="row.cartonsNum" text readonly />
              </template>
              <template v-else>{{ row.cartonsNum }}</template>
            </template>
          </el-table-column>
          <el-table-column :label="$t('入仓类型')" prop="cartonsNum">
            <template slot-scope="{row}">
              <dict-tag :type="DICT_TYPE.WAREHOUSING_SPECIFICATION_TYPE" :value="row.specificationType" />
            </template>
          </el-table-column>
          <el-table-column :label="$t('包装类型')" prop="unit">
            <template slot-scope="{row}">
              <dict-tag :type="DICT_TYPE.ECW_PACKAGING_TYPE" :value="row.unit" />
            </template>
          </el-table-column>
          <el-table-column :label="$t('长')" prop="boxGauge">
            <template slot-scope="{row}">
              {{row.boxGauge.split('*')[0]}}
            </template>
          </el-table-column>
          <el-table-column :label="$t('宽')" prop="boxGauge" >
            <template slot-scope="{row}">
              {{row.boxGauge.split('*')[1]}}
            </template>
          </el-table-column>
          <el-table-column :label="$t('高')" prop="boxGauge" >
            <template slot-scope="{row}">
              {{row.boxGauge.split('*')[2]}}
            </template>
          </el-table-column>
          <el-table-column :label="$t('体积') + '(m³)'" prop="volume" />
          <el-table-column :label="$t('重量') + '(kg)'" prop="weight" />
          <el-table-column :label="$t('数量（个）')" prop="quantityAll" />
          <el-table-column :label="$t('入仓快递单号')" prop="expressNo" />
          <el-table-column :label="$t('首次入仓时间')" prop="inTime" >
            <template slot-scope="{row}">{{row.inTime|parseTime}}</template>
          </el-table-column>
          <el-table-column :label="$t('储位')" prop="orderLocationBackVOList" >
            <template slot-scope="{row}">
              {{getLocationName(row.orderLocationBackVOList)}}
            </template>
          </el-table-column>
          <el-table-column :label="$t('入仓影像')" prop="orderLocationBackVOList" >
            <template slot-scope="{row}">
              <image-display :pictureUrls="warehouseItem.pictureUrls" :type="5">
                <el-button type="text">
                  查看
                </el-button>
              </image-display>
            </template>
          </el-table-column>
          <el-table-column :label="$t('备注')" prop="remark" >
            <template slot-scope="{row}">
              {{row.remark}}
            </template>
          </el-table-column>
        </el-table>
    </el-dialog>
</template>
<script>
import { getOrder, getOrderWarehouseIn } from '@/api/ecw/order'
import { DICT_TYPE } from '@/utils/dict'
import { parseTime } from '@/utils/ruoyi'
import WarehouseAreaSelect from "@/components/WarehouseAreaSelect"
import ImageDisplay from "@/views/ecw/order/components/imageDisplay.vue";
import WarehouseRecordDetail from '@/views/ecw/order/warehousing/components/WarehouseRecordDetail.vue'
export default {
  components: {
    WarehouseRecordDetail,
    ImageDisplay,
    WarehouseAreaSelect
  },
    filters: {parseTime},
    props:{
        order: Object, // order 和 orderId 二选一
        orderId: Number,
        orderItemId: Number,
    },
    data(){
        return {
          orderDetail: null,
            warehouseList: null
        }
    },
    computed:{
      info(){
        return this.orderDetail || this.order
      },
      orderItem(){
        if(!this.info) return null
        return this.info.orderItemVOList.find(item => item.orderItemId == this.orderItemId)
      },
      warehouseItem(){
        if(!this.warehouseList) return []
        return this.warehouseList.find(item => item.orderItemId == this.orderItemId) || []
      },
      title(){
        if(!this.orderItem) return '-'
        return this.$l(this.orderItem, 'prodTitle') + ' - ' + this.$t('入仓记录')
      }
    },

    created(){
        this.show = true
        if(!this.order && this.orderId){
          getOrder(this.orderId).then(res => {
            this.orderDetail = res.data
          })
        }
        this.getOrderWarehouseIn()
    },
    methods:{
      // 获取储位名称
      getLocationName(locationArr){
        if(!locationArr || !locationArr.length) return ''
        let arr = []
        locationArr.forEach(item => {
          arr.push(`${item.areaName}${item.locationName || ''}`)
        })
        return Array.from(new Set(arr)).join(",")
      },
        closeDialog(){
            this.show = false
            this.$emit('close');
        },
        getOrderWarehouseIn(){
          getOrderWarehouseIn(this.info.orderId).then(res => {
            this.warehouseList = res.data
          })
        },
        seePackLog(){
          this.$emit('openPackHistory',this.orderItemId)
        }
    }
}
</script>