<template>
  <div class="send-order-list">
    <div class="send-order-column send-order-header">发货单信息</div>
    <div class="send-order-column send-order-header">物流信息</div>

    <template v-for="o in orderList" :key="o.id">
      <div class="send-order-column">
        <div
          v-for="od in o.detailList"
          :key="od.id"
          class="send-order-product-item"
        >
          <div class="send-order-product-image">
            <img :src="od.variantImage" :alt="od.productName" />
          </div>
          <div
            v-for="(p, i) in productProps"
            :key="i"
            class="send-order-prop-list"
          >
            <div
              v-for="(pi, index) in p"
              :key="index"
              class="send-order-prop-item"
            >
              {{ pi.label }}：{{ val(od, pi.key) }}
            </div>
          </div>
        </div>
      </div>
      <div class="send-order-column">
        <div class="send-order-prop-list">
          <div
            v-for="pi in logisticsProps"
            :key="pi.label"
            class="send-order-prop-item"
          >
            {{ pi.label }}：{{ val(o, pi.key) }}
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { val } from '@/utils'

import type { SendOrderData } from '@/types/api/order'
import type { PropType } from 'vue'

defineProps({
  orderList: {
    type: Array as PropType<SendOrderData[]>,
    required: true,
  },
})

const productProps = [
  [
    { label: '商品名', key: 'productName' },
    { label: 'Base SKU', key: 'baseSku' },
    { label: '变体SKU', key: 'variantSku' },
  ],
  [{ label: '生产单号', key: 'subOrderNumber' }],
  [
    { label: '生产数', key: 'productionNum' },
    { label: '发货数', key: 'shipmentNum' },
  ],
]

const logisticsProps = [
  { label: '发货单号', key: 'billNumber' },
  {
    label: '发货方式',
    key: (d: SendOrderData) =>
      d.shippingWay && { 1: '送货上门', 2: '快递' }[d.shippingWay],
  },
  { label: '创建时间', key: 'createTime' },
  { label: '商户号', key: 'categoryName' },
  { label: '收货人', key: 'lanshouName' },
  { label: '收货人电话', key: 'lanshouPhone' },
  { label: '邮编', key: 'lanshouPost' },
  {
    label: '收货地址',
    key: (d: SendOrderData) =>
      `${d.lanshouRegion || ''}${d.lanshouAddress || ''}`,
  },
]
</script>
<style lang="scss" scoped>
$border: solid 1px #ddd;

.send-order-list {
  display: grid;
  grid-template-columns: 2fr 1fr;
  border-left: $border;
  border-top: $border;
}

.send-order-column {
  padding: 10px 16px;
  border-right: $border;
  border-bottom: $border;
  line-height: 1.5;
}

.send-order-header {
  font-weight: bold;
  text-align: center;
  background-color: #f8f8f9;
}

.send-order-product-item {
  display: flex;
  justify-content: space-between;
  gap: 20px;

  &:not(:first-child) {
    border-top: $border;
    padding: 10px 0;
  }

  .send-order-prop-list {
    flex: 1;
  }
}

.send-order-product-image {
  width: 100px;
}
</style>
