<template>
  <!-- 订单获取入仓记录 -->
  <el-dialog
    :title="title"
    visible
    :before-close="closeDialog"
    :close-on-click-modal="false"
    width="1000px"
  >
    <el-table :data="warehouseItem">
      <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 { getOrderWarehouseIn } from "@/api/ecw/order";
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,
    type: Number,
  },
  data() {
    return {
      warehouseItem: [],
    };
  },
  computed: {
    title() {
      return this.$l(this.order, "orderNo") + " - " + this.$t("入仓记录");
    },
  },
  created() {
    this.show = true;
    getOrderWarehouseIn(this.order.orderId).then((res) => {
      this.warehouseItem = [];
      for (var i = 0; i < res.data.length; i++) {
        for (
          var j = 0;
          j < res.data[i].orderWarehouseInBackItemDoList.length;
          j++
        ) {
          this.warehouseItem.push(
            res.data[i].orderWarehouseInBackItemDoList[j]
          );
        }
      }
    });
  },
  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");
    },
    seePackLog() {
      this.$emit("openPackHistory", this.orderItemId);
    },
  },
};
</script>