<template>
  <view style="background: #fff; min-height: calc(100vh - 44px)">
    <scroll-view scroll-y="true" scroll-with-animation>
      <view>
        <view class="productsList">
          <view class="flex text-center text-black bg-white text-bold padding-sm">
            <view style="width:20%;">{{$t('关联单号')}}</view>
            <view class="flex-sub">{{$t('体积') + "(m³)"}}</view>
            <view class="flex-sub">{{$t("重量") + "(kg)"}}</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="(v, index) in orderList" :key="'order-' + index">
            <view class="flex text-center padding-sm" v-for="(order, index) in v.orderItemList" :key="'goods-' + index">
              <view class="text-break text-blue" style="width:20%;">
                <view @tap="showOrderDetail(true, order.orderId)">{{ order.orderNo }}</view>
                <view style="color:blue;fontWeight:bold;">
                  {{ order.isExternalWarehouse === 1 ? ('('+$t('外部仓')+')') : ''}}
                </view>
                <view style="color:sandybrown;fontWeight:bold;">
                  {{ order.adjustToDestWarehouseId > 0 ? ('('+$t('调仓')+')') : ''}}
                </view>
                <!-- 报关方式 -->
                <view v-if="order.customsType !== 1">
                  <dict-tag :type="DICT_TYPE.ECW_CUSTOMS_TYPE" :value="order.customsType" style="color:red;fontWeight:bold;" />
                </view>
                  <!-- 包装类型 -->
                <view style="color:red;fontWeight:bold;">
                  <text v-for="(unit, index) in order.units.split(',')" :key="index">
                    <dict-tag :type="DICT_TYPE.ECW_PACKAGING_TYPE" :value="unit" />{{ index!== order.units.split(',').length-1 ? ',':'' }}
                  </text>
                </view>
                <!-- 关联单 -->
                <view v-if="v.hasRelationOrder" style="color:red;fontWeight:bold;" @tap="relatedClick(order.orderId)">{{$t('关联单')}}</view>
                <!-- 混箱 -->
                <view v-if="order.mixStatus === 1" style="color:red;fontWeight:bold;">{{$t('混箱')}}</view>
              </view>
              <view class="flex-sub">{{ order.volume | toFixed }}</view>
              <view class="flex-sub">{{ order.weight | toFixed }}</view>
              <view class="flex-sub">
                <view class="text-break text-blue" @tap="showGoodsDetail(true, order)">{{ order.num }}箱</view>
                <view style="color:blue;fontWeight:bold;">
                  {{ order.multiSpecification === true ? ('('+$t('多规格')+')') : ''}}
                </view>
              </view>
              <view class="flex-sub">{{ order.positionNo ? order.positionNo.split(',').join(', ') : '' }}</view>
              <view class="flex-sub">{{ order.containerNumber }}</view>
              <view class="flex-sub">{{ order.containerNumber === selfNo ? $t('是') : $t('否') }}</view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 订单详情弹窗 -->
    <OrderDetailModal :orderDetailModal="orderDetailModal" :orderDetail="orderDetail" @close="showOrderDetail"></OrderDetailModal>
    
    <!-- 货物详情弹窗 -->
    <view class="cu-modal" :class="goodsModal ? 'show' : ''" style="z-index: 900;">
      <view class="cu-dialog">
        <view class="cu-bar bg-white justify-end bottom-line">
          <view class="content title-bolder" style="width:100%;">{{`${$t('货物详情')}-${$t('订单号')}${currRow.orderNo}`}}</view>
        </view>
        <scroll-view scroll-y="true" style="height: 400px;">
          <uni-card v-for="(v, key) in goodsList" :key="key">
            <view class="item-content noPadding">
              <view>
                <view>{{$t('中文名')}}：{{ v.prodTitleZh }}</view>
                <view>{{$t('英文名')}}：{{ v.prodTitleEn }}</view>
              </view>
              <view>
                <view>{{$t('品牌')}}：
                  {{ v.brandName }}
                </view>
                <view>
                  <view class="flex">
                    {{$t('入仓件数')}}：
                    <view class="text-break text-blue" @tap="showWarehouseLogs(v)">
                      <view>{{ v.num }}{{ $t('箱') }}</view>
                      <view style="color:blue;fontWeight:bold;">
                        {{ v.multiSpecification === true ? ('('+$t('多规格')+')') : '' }}
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              <view>
                <view>{{$t('材质')}}:
                  <dict-tag :type="DICT_TYPE.ECW_PRODUCT_MATERIAL" :value="v.material" />
                </view>
                <view>{{$t('体积')}}：{{ v.volume }}m³</view>
              </view>
              <view>
                <view>{{$t('重量')}}：{{ v.weight }}kg</view>
                <view>{{$t('入仓快递单号')}}：{{ v.expressNo ? v.expressNo: '' }}</view>
              </view>
              <view>
                <view>{{$t('数量') + '(个)'}}：{{ v.num }}</view>
				        <view>{{$t('储位')}}：{{v.positionNo || showLocationName(v.orderItemLocationList)}}</view>
              </view>
            </view>
          </uni-card>
        </scroll-view>

        <view class="cu-bar bg-white justify-end top-line">
          <view class="action"><button class="cu-btn bg-grey" @tap="showGoodsDetail(false)">{{$t('关闭')}}</button></view>
        </view>
      </view>
    </view>

    <warehouse-detail ref="warehouseDetail" :orderId="orderId" :orderItemId="showWarehouseInItemId" />
    <warehouse-list ref="warehouseList" />
    <mix-order-list ref="mixOrderList" />

  </view>
</template>
<script>
import { getOrder, listByOrderId, tallyListGuanlianOrder } from "./api";
import { getOrderDetail } from "../loading/api";
import WarehouseDetail from "./warehouseDetail.vue";
import WarehouseList from "@/pages/tally/warehouseList.vue";
import MixOrderList from "@/pages/tally/mixOrderList.vue";
import OrderDetailModal from "@/components/order-detail-modal/index.vue"

export default {
  name: "related-order",
  components: { WarehouseDetail,OrderDetailModal, WarehouseList, MixOrderList },
  data() {
    return {
      /* 订单详情 */
      orderDetailModal: false,
      orderDetail: {},
      orderList: null,
      locale: this.$lang.locale,
      // 货物详情
      goodsModal: false,
      // 当前行
      currRow: {},
      goodsList: [],
      // 入仓记录
      showWarehouseInItemId: null,
      orderId: null,
      selfNo: null,
      warehouseList: null,
    };
  },
  methods: {
    // 从warehouseInInfo中提取储位信息
    showLocationName(locationList){
      if(!locationList || !locationList.length) return ''
      let locations = new Set()
      locationList.forEach(item => {
        locations.add((item.areaName || '') + (item.locationName || ''))
      })
      return Array.from(new Set(locations)).join(',')
    },
    // 货物详情
    showGoodsDetail(show, row) {
      this.goodsList = [];
        if (show) {
          this.currRow = row;
          this.goodsList.push(row);
        }
        this.goodsModal = show;
      },
    /* 显示订单详情 */
    showOrderDetail(show, id) {
      this.orderDetailModal = show;
      if (show) {
        this.getOrderDetail(id);
      }
    },
    // 显示入仓列表
    showWarehouseList(row) {
      this.orderId = row.orderId;
      this.$refs.warehouseList.showDetail(row);
    },
    // 显示混箱明细
    showMixOrder(row) {
      this.orderId = row.orderId;
      this.$refs.mixOrderList.showDetail(row);
    },
    /* 读取订单详情 */
    getOrderDetail(id) {
      return new Promise((resolve, reject) => {
        getOrderDetail(id).then((data) => {
          //订单信息
          this.orderDetail = data;
          listByOrderId({ orderId: id }).then((data) => {
            let positionNos = data.map((item) => {
              return `${item.warehouseName}${item.areaName}${item.locationName || ''}`;
            });
            this.$set(this.orderDetail, "positionNo", positionNos.join(","));
          });
        });
      });
    },
    /* 跳转到关联单 */
    relatedClick(orderId) {
      uni.navigateTo({
        url: `./relatedOrder?orderId=${orderId}`,
      });
    },
  },
  onLoad: function (option) {
    uni.setNavigationBarTitle({
      title: this.$t("关联单"),
    });
    this.selfNo = option.selfNo
    if ("orderId" in option) {
      tallyListGuanlianOrder({orderId : option.orderId}).then((res) => {
        console.log(res)
        this.orderList = 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>

