<template>
  <div v-if="orderList.length" class="shipment-order">
    <div ref="listRef" class="shipment-info">
      <div v-for="o in orderList" :key="o.id" class="shipment-info-item">
        <div class="shipment-info-item-header">
          <div class="shipment-info-item-header--title">
            <span class="shipment-info-item-header__label">主单号:</span>
            <span class="shipment-info-item-header__value">{{
              isPod ? o.factoryOrderNumber || '--' : o.orderNumber || '--'
            }}</span>
          </div>
          <div class="shipment-info-item-header--title">
            <span class="shipment-info-item-header__label">订单类型:</span>
            <span class="shipment-info-item-header__value">{{
              o.sourceType || '--'
            }}</span>
          </div>
          <div class="shipment-info-item-header--title high-light">
            <span class="shipment-info-item-header__label">客户:</span>
            <span class="shipment-info-item-header__value">{{
              o.userMark || '--'
            }}</span>
          </div>
          <div class="shipment-info-item-header--title">
            <span class="shipment-info-item-header__label">收货人:</span>
            <span class="shipment-info-item-header__value">{{
              o.lanshouName || '--'
            }}</span>
          </div>
          <div class="shipment-info-item-header--title">
            <span class="shipment-info-item-header__label">区域:</span>
            <span class="shipment-info-item-header__value">{{
              o.lanshouRegion || '--'
            }}</span>
          </div>
          <div class="shipment-info-item-header--title">
            <span class="shipment-info-item-header__label">地址:</span>
            <span
              class="shipment-info-item-header__value"
              :title="o.lanshouAddress"
              >{{ o.lanshouAddress || '--' }}</span
            >
          </div>
          <div class="shipment-info-item-header--title">
            <span class="shipment-info-item-header__label">邮编:</span>
            <span class="shipment-info-item-header__value">{{
              o.lanshouPost || '--'
            }}</span>
          </div>
          <div class="shipment-info-item-header--title">
            <span class="shipment-info-item-header__label">电话:</span>
            <span class="shipment-info-item-header__value">{{
              o.lanshouPhone || '--'
            }}</span>
          </div>
        </div>
        <div v-if="currentRow" class="shipment-info-item-content">
          <div
            v-for="item in o.productList"
            :key="item.id"
            :data-id="item.id"
            :class="{
              'active-row': isPod
                ? item.factorySubOrderNumber ===
                  currentRow.factorySubOrderNumber
                : item.subOrderNumber === currentRow.subOrderNumber,
            }"
            class="shipment-info-item-content-item"
            @click="onRowClick(item, o)"
          >
            <div class="image">
              <img :src="item.variantImage" />
            </div>
            <div class="shipment-info-item-content-item--info">
              <span class="label">SKU:</span>
              <span class="value">{{ item.baseSku || '--' }}</span>
            </div>
            <div v-if="!isPod" class="shipment-info-item-content-item--info">
              <span class="label">生产单号:</span>
              <span class="value">{{ item.subOrderNumber || '--' }}</span>
            </div>
            <div v-if="isPod" class="shipment-info-item-content-item--info2">
              <div>
                <span class="label">工厂单号:</span>
                <span class="value">{{
                  item.factorySubOrderNumber || '--'
                }}</span>
              </div>
              <div>
                <span class="label">生产单号:</span>
                <span class="value">{{
                  item.thirdSubOrderNumber || '--'
                }}</span>
              </div>
            </div>
            <div
              class="shipment-info-item-content-item--info"
              style="width: 90px; flex: none"
            >
              <span class="label">购买数:</span>
              <span class="value">{{ item.num || 0 }}</span>
            </div>
            <div
              class="shipment-info-item-content-item--info"
              style="width: 90px; flex: none"
            >
              <span class="label">已发数:</span>
              <span class="value">{{ item.shipmentNum || 0 }}</span>
            </div>
            <div
              class="shipment-info-item-content-item--info"
              style="width: 90px; flex: none"
            >
              <span class="label">未发数:</span>
              <span class="value">{{
                (item.num || 0) -
                ((item.shipmentNum || 0) - (item.notPassNum || 0))
              }}</span>
            </div>
            <div
              class="shipment-info-item-content-item--info"
              style="width: 100px; flex: none"
            >
              <span class="label">拣货数:</span>
              <span class="value">{{ item.count }}</span>
              <span
                title="清空拣货数量"
                style="margin: 6px; cursor: pointer; display: flex"
                @click.stop="onShipment(item)"
              >
                <el-icon style="vertical-align: middle"
                  ><CircleCloseFilled
                /></el-icon>
              </span>
            </div>
          </div>
        </div>
        <div class="shipment-info-item-footer">
          <div class="image">总计</div>
          <div class="shipment-info-item-content-item--info"></div>
          <div
            v-if="!isPod"
            class="shipment-info-item-content-item--info"
          ></div>
          <div
            v-if="isPod"
            class="shipment-info-item-content-item--info2"
          ></div>
          <div
            class="shipment-info-item-content-item--info"
            style="width: 90px; flex: none"
          >
            <span class="value">{{ calculateTotals(o)?.totalNum || 0 }}</span>
          </div>
          <div
            class="shipment-info-item-content-item--info"
            style="width: 90px; flex: none"
          >
            <span class="value">{{
              calculateTotals(o)?.totalShipmentNum || 0
            }}</span>
          </div>
          <div
            class="shipment-info-item-content-item--info"
            style="width: 90px; flex: none"
          >
            <span class="value">{{
              calculateTotals(o)?.totalNotShipmentNum || 0
            }}</span>
          </div>
          <div
            class="shipment-info-item-content-item--info"
            style="width: 100px; flex: none"
          >
            <span class="value highlight">{{
              calculateTotals(o)?.totalPickNum || 0
            }}</span>
          </div>
        </div>
      </div>
    </div>
    <div v-if="currentRow" class="shipment-order-detail_info">
      <div v-if="!currentRow.imageAry" class="shipment-order-detail_info_image">
        <img :src="currentRow.variantImage" style="width: 100%" />
      </div>
      <div v-else class="shipment-order-detail_info_image-list">
        <div
          v-for="item in JSON.parse(currentRow.imageAry)"
          :key="item"
          class="shipment-order-detail_info_image-list-item"
        >
          <img :src="item.url" style="width: 100%" />
        </div>
      </div>
      <div class="shipment-order-detail_info_other">
        <div class="order-norm">
          <span class="order-norm-label" style="margin-right: 6px">
            规格:
          </span>
          <span class="order-norm-value" :title="currentRow.variantSku">
            {{ currentRow.variantSku }}
          </span>
        </div>
        <div class="order-count" style="line-height: 26px">
          <span class="order-count-label" style="margin-right: 6px">
            拣货数:
          </span>
          <span
            class="order-count-value"
            style="font-size: 16px; font-weight: bold; color: red"
          >
            {{ currentRow.count }}
          </span>
        </div>
        <div class="order-norm">
          <span class="order-norm-label" style="margin-right: 6px">
            订单号:
          </span>
          <span
            class="order-norm-value"
            :title="
              isPod ? currentRow.factoryOrderNumber : currentRow.orderNumber
            "
          >
            {{ isPod ? currentRow.factoryOrderNumber : currentRow.orderNumber }}
          </span>
        </div>
      </div>
    </div>
  </div>

  <ElEmpty v-else class="shipment-order"></ElEmpty>
</template>

<script setup lang="ts">
import { OrderData, ProductList } from '@/types/api/order'
import { PropType, ref } from 'vue'
import { CircleCloseFilled } from '@element-plus/icons-vue'
import { showConfirm } from '@/utils/ui'

const emit = defineEmits<{
  (e: 'changeCurrentRow', v: ProductList): void
}>()
const props = defineProps({
  orderList: {
    type: Array as PropType<OrderData[]>,
    default: () => [],
  },
  currentRow: {
    type: Object as PropType<ProductList>,
    default: () => {},
  },
  isPod: {
    type: Boolean,
    default: false,
  },
})

const listRef = ref<HTMLDivElement>()

export interface ShipmentType {
  listRef: HTMLDivElement | undefined
}

defineExpose<ShipmentType>({
  get listRef() {
    return listRef.value
  },
})

const onRowClick = (item: ProductList, o: OrderData) => {
  if (props.isPod) {
    item.factoryOrderNumber = o.factoryOrderNumber
  } else {
    item.orderNumber = o.orderNumber
  }
  emit('changeCurrentRow', item)
}
const onShipment = async (item: ProductList) => {
  try {
    await showConfirm('是否确认清空拣货数量', {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    })
  } catch {
    return
  }
  item.count = 0
}
const calculateTotals = (ee: OrderData) => {
  return ee.productList?.reduce(
    (acc, item) => {
      return {
        totalNum: acc.totalNum + (item.num || 0),
        totalShipmentNum: acc.totalShipmentNum + (item.shipmentNum || 0),
        totalNotShipmentNum:
          acc.totalNotShipmentNum +
          ((item.num || 0) -
            ((item.shipmentNum || 0) - (item.notPassNum || 0))),
        totalPickNum: acc.totalPickNum + (item.count || 0),
      }
    },
    {
      totalNum: 0, // 总购买数
      totalShipmentNum: 0, // 总已发数
      totalNotShipmentNum: 0, // 总未发数
      totalPickNum: 0, // 总拣货数
    },
  )
}
</script>
<style lang="scss" scoped>
.shipment-order {
  overflow: hidden;
  margin-top: 20px;
  height: 600px;

  display: flex;
  gap: 10px;
}

.shipment-info {
  width: 54%;
  border: 1px solid #eee;
  overflow: auto;
  font-size: 13px;
}

.shipment-order-detail_info {
  width: 50%;
  display: flex;
  gap: 6px;
}

.shipment-order-detail_info_image {
  flex: 1;
  overflow: hidden;
  border: 1px solid #eee;
}

.shipment-order-detail_info_other {
  width: 200px;
}

.image {
  height: 100%;
  width: 50px;
  border-right: 1px solid #eee;

  img {
    width: 100%;
    height: 100%;
  }
}
.shipment-info-item {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.shipment-info-item-content {
  flex: 1;
  overflow: auto;
}
.shipment-info-item-footer {
  height: 42px;
  border-top: 1px solid #eee;
}

.shipment-info-item-header {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  background-color: #e6e6e6;
  padding: 10px;
  .high-light {
    color: #ff0000;
    font-weight: bold;
  }
  .shipment-info-item-header--title {
    display: inline-flex;
    align-items: center;
    overflow: hidden;
  }
  .shipment-info-item-header__value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.shipment-info-item-content-item {
  display: flex;
  justify-content: space-between;
  height: 42px;
  border-bottom: 1px solid #eee;
}

.active-row {
  background-color: #529b2e;
  color: #fff;
}

.shipment-info-item-header__label {
  margin-right: 6px;
}

.shipment-info-item-content-item--info {
  border-right: 1px solid #eee;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;

  .label {
    margin-right: 6px;
  }
}
.shipment-info-item-content-item--info2 {
  padding-left: 5px;
  border-right: 1px solid #eee;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-items: flex-start;
  div {
    margin-bottom: 5px;
  }
  .label {
    margin-right: 6px;
  }
}

.shipment-info-item-content-item--info:last-child {
  border-right: 0;
}
.shipment-info-item-footer {
  height: 42px;
  border-top: 1px solid #eee;
  display: flex;

  .image {
    width: 50px;
    border-right: 1px solid #eee;
    text-align: center;
    line-height: 42px;
    font-weight: bold;
  }

  .value.highlight {
    color: #f56c6c;
    font-weight: bold;
  }
}
.shipment-order-detail_info_image-list {
  height: 100%;
  overflow: auto;
  border: 1px solid #eee;
  .shipment-order-detail_info_image-list-item:not(:last-child) {
    border-bottom: 1px solid #eee;
  }
}
</style>
