<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%;">{{ $t('混箱商品明细') }}</view>
      </view>
      <scroll-view scroll-y="true" style="height: 400px;">
        <view>
          <view class="productsList">
            <view class="flex text-center text-black bg-white text-bold padding-sm">
              <view class="flex-sub">{{$t('品名')}}</view>
              <view class="flex-sub">{{$t('品牌')}}</view>
              <view class="flex-sub">{{$t('材质')}}</view>
              <view class="flex-sub">{{$t('特性')}}</view>
              <view class="flex-sub">{{$t('用途')}}</view>
              <view class="flex-sub">{{$t("数量")}}</view>
            </view>
            <view v-for="(order, index) in warehouseList" :key="'order-' + index">
              <view class="flex text-center padding-sm" v-for="(v, index) in order.orderWarehouseInBackItemDoList" :key="'goods-' + index">
                <view class="flex-sub">{{ index + 1 }}</view>
                <view class="flex-sub">{{ v.cartonsNum }}</view>
                <view class="flex-sub"><dict-tag :type="DICT_TYPE.WAREHOUSING_SPECIFICATION_TYPE" :value="v.specificationType" />/<dict-tag :type="DICT_TYPE.ECW_PACKAGING_TYPE" :value="v.unit" /></view>
                <view class="flex-sub">{{ v.boxGauge }}</view>
                <view class="flex-sub">{{ v.volume }}</view>
                <view class="flex-sub">{{ v.weight }}</view>
              </view>
            </view>
          </view>
        </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,
    };
  },
  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>

