<template>
  <view class="cu-modal" :class="show ? 'show' : ''" style="z-index: 901;">
    <view class="cu-dialog">
      <view class="cu-bar bg-white justify-end bottom-line">
        <view class="content title-bolder" style="width:100%;">{{ title }}</view>
      </view>
      <scroll-view scroll-y="true" style="height: 400px;">
        <view v-if="warehouseItem && warehouseItem.orderWarehouseInBackItemDoList">
          <uni-card v-for="(v, index) in warehouseItem.orderWarehouseInBackItemDoList" :key="'goods-' + index">
            <view class="item-content noPadding">
              <view>
                <view>{{ $t("箱数") }}：{{ v.cartonsNum }}</view>
                <view>{{ $t("数量（个）") }}：{{ v.quantityAll }}</view>
              </view>
              <view>
                <view>{{ $t("包装类型") }}：
                  <dict-tag :type="DICT_TYPE.ECW_PACKAGING_TYPE" :value="v.unit" />
                </view>
                <view>{{ $t("入仓类型") }}：
                  <dict-tag :type="DICT_TYPE.WAREHOUSING_SPECIFICATION_TYPE" :value="v.specificationType" />
                </view>
              </view>
              <view>
                <view>{{ $t("长") }}：{{ v.boxGauge.split("*")[0] }}</view>
                <view>{{ $t("体积") + "(m³)" }}：{{ v.volume }}</view>
              </view>
              <view>
                <view>{{ $t("宽") }}：{{ v.boxGauge.split("*")[1] }}</view>
                <view>{{ $t("重量") + "(kg)" }}: {{ v.weight }}</view>
              </view>
              <view>
                <view>{{ $t("高") }}: {{ v.boxGauge.split("*")[2] }}</view>
                <view>{{ $t("快递单号") }}: {{ v.expressNo }}</view>
              </view>
              <view>
                <view>{{ $t("首次入仓时间") }}：{{ v.inTime ? dayjs(v.inTime).format("YYYY-MM-DD HH:mm:ss") : v.inTime
                  }}
                </view>
              </view>
              <view>
                <view class="flex">
                  <view class="left">
                    {{ $t("储位") }}：
                    {{ showLocationName(v.orderLocationBackVOList) }}
                  </view>
                  <!-- 这里只做跳转，实际修改逻辑在宿主页面完成，宿主页面需要实现updateWarehouseInLocation方法 -->
                  <navigator
                    v-if="locationModifiable"
                    class="btn"
                    :url="`../warehousing/location?warehouseId=${orderDetail.adjustToDestWarehouseId || orderDetail.logisticsInfoDto.startWarehouseId}&locationList=${JSON.stringify(v.orderLocationBackVOList)}&callback=updateWarehouseInLocation&extra=${JSON.stringify({
							orderId: warehouseItem.orderId,
							orderItemId: warehouseItem.orderItemId,
							warehouseInId: v.id
						})}`"
                  >修改
                  </navigator>
                </view>
              </view>
            </view>
          </uni-card>
        </view>
      </scroll-view>

      <view class="cu-bar bg-white justify-end top-line">
        <view class="action"><button class="cu-btn bg-grey" @tap="closeDialog">{{$t('关闭')}}</button></view>
      </view>
    </view>
  </view>
</template>
<script>
import { getOrder, getOrderWarehouseIn } from "./api";

export default {
  props: {
    orderId: Number,
    orderItemId: Number,
	  locationModifiable: Boolean ,// 是否可以修改储位
	  warehouseId: Number, // 当前仓库ID，如果是调拨则是调拨入仓的ID，否则就是始发仓ID
  },
  data() {
    return {
      show: false,
      orderDetail: null,
      warehouseList: null,
      locale: this.$lang.locale,
    };
  },
  computed: {
    info() {
      return this.orderDetail;
    },
    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 "-";
      /* const titleStr =
        this.locale == "zh-Hans"
          ? this.orderItem.prodTitleZh
          : this.orderItem.prodTitleEh;
      return titleStr + " - " + this.$t("入仓记录"); */
	  // 已修复国际化名称导致的$l取值错误，可以直接使用下列方式
	  return this.$l(this.orderItem, 'prodTitle') + '-' + this.$t('入仓记录')
    },
  },
  methods: {
	// 从warehouseInInfo中提取储位信息
	showLocationName(orderLocationBackVOList){
		if(!orderLocationBackVOList) return ''
		let locations = []
		orderLocationBackVOList.forEach(item => {
			locations.push(item.areaName + (item.locationName || ''))
		})
		return locations.join(',')
	},
    showDetail(row) {
      this.show = true;
      if (row.orderId) {
        getOrder(row.orderId).then((res) => {
          this.orderDetail = res;
          this.getOrderWarehouseIn();
        });
      }
    },
    closeDialog() {
      this.show = false;
    },
    getOrderWarehouseIn() {
      getOrderWarehouseIn(this.orderDetail.orderId).then((res) => {
        this.warehouseList = res;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.scroll {
  margin-top: -8px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  padding: 8px;
  background: #fff;

  ::v-deep .uni-card {
    margin: 12px 0 0 !important;
    padding: 0 !important;
  }

  .img-wrap {
    width: calc(100% - 68px);

    ::v-deep .uni-grid-item {
      background: #fbf8fb;
    }

    .grid-item-box-add {
      height: 100%;
      display: flex;
      flex-flow: column;
      font-size: 10px;
      padding: 16px 0;
      text-align: center;
      justify-content: center;
    }
  }
}

.cu-dialog {
  background-color: #fff;

  .content {
    &.title-bolder {
      color: #333333;
      font-weight: bolder;
    }
  }

  .item-content {
    text-align: left;
    padding: 10px 20px 0px 20px;

    &.noPadding {
      padding: 0;
    }

    > view {
      display: flex;
      padding: 4px 0;

      > view {
        flex: 1;
        word-break: break-all;
        padding-left: 4px;
      }
    }
	.flex{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.left{
			flex: 1;
		}
	}
	.btn{
		background-color: rgb(47, 77, 174);
		color: #fff;
		border-radius: 5rpx;
		padding: 5rpx 10rpx;
		margin-left: 10px;
	}
  }
}
</style>

