<template>
  <div class="pick-table">
    <div class="order-info-panel">
      <div class="form-line">
        <div class="form-item bold">
          <div class="label">
            订单编号：
          </div>
          <div class="value w-180">
            {{ orderId }}
          </div>
        </div>
      </div>

      <div class="form-line">
        <div class="form-item">
          <div class="label">
            平台编号：
          </div>
          <div class="value w-180">
            {{ tid }}
          </div>
        </div>
        <div class="form-item">
          <div class="label">
            买家备注：
          </div>
          <div class="value">
            {{ buyerMsg }}
          </div>
        </div>
      </div>

      <div class="form-line">
        <div class="form-item">
          <div class="label">
            物流单号：
          </div>
          <div class="value w-180">
            {{ logisticsNumber }}<span>({{ shipName }})</span>
          </div>
        </div>
        <div class="form-item">
          <div class="label">
            卖家备注：
          </div>
          <div class="value">
            {{ sellerMsg }}
          </div>
        </div>
      </div>

      <div class="table-panel">
        <arkCommonTableByAgGrid
          :height="height"
          style="width: 100%;"
          :data="rows"
          :columns="columns"
        />
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'PickTable',

    props: {
      rows: {
        type: Array,
        default: () => []
      },
      orderId: {
        type: [String, Number],
        default: ''
      },
      tid: {
        type: [String, Number],
        default: ''
      },
      buyerMsg: {
        type: String,
        default: ''
      },
      sellerMsg: {
        type: String,
        default: ''
      },
      logisticsNumber: {
        type: [String, Number],
        default: ''
      },
      shipName: {
        type: String,
        default: ''
      },
    },

    data() {
      return {
        columns: [
          {
            field: 'product_name',
            headerName: '商品名称',
            width: 165
          },
          {
            field: 'sku',
            headerName: 'SKU',
            width: 120
          },
          {
            field: 'num',
            headerName: '商品数量',
            width: 80
          },
          {
            field: 'already_pick_num',
            headerName: '已拣货数',
            width: 80
          },
          {
            field: 'is_gif',
            headerName: '是否赠品',
            width: 80
          },
          {
            field: 'order_status',
            headerName: '订单状态',
            width: 80
          },
          {
            field: 'is_intercept',
            headerName: '是否拦截',
            width: 80
          },
        ],
      };
    },

    computed: {
      height() {
        const scrollHeight = localStorage.getItem('tableScrollbarHeight') || 6;
        const rowHeight = 32;
        let h = 35 + rowHeight * 2 + scrollHeight; // 默认5行高度
        if (this.rows.length > 0) {
          h = 35 + rowHeight * Math.min(this.rows.length, 6) + scrollHeight; // 最多6行
        }
        return `${h}px`;
      }
    },

    mounted() {

    },

    methods: {

    },
  };
</script>

<style lang="less" scoped>
.pick-table {
  padding: 12px 4px;
  width: 698px;
}
.bold {
  font-weight: bold;
}
.form-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  .form-item {
    display: flex;
  }
  .label {
    width: 60px;
    margin-right: 10px;
  }
  .value {
    width: 328px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .w-180 {
    width: 180px;
  }
}
</style>
