<template>
  <div class="after-delivery-panel">
    <div class="info-group">
      <div class="info-item">
        <div class="info-label">
          拣货单号：
        </div>
        <div class="info-value">
          <span>{{ orderInfo.pickNo}}</span>
        </div>
      </div>
      <div class="info-item">
        <div class="info-label statistics">
          已分拣数/总商品数：
        </div>
        <div class="info-value num">
          <span :class="[scanNum===totalNum? 'green': 'red']">{{scanNum}}</span>/<span>{{totalNum}}</span>
        </div>
      </div>
    </div>

    <div class="info-group" v-if="Object.keys(skuInfo).length > 0">
      <div class="info-item">
        <div class="info-label">
          平台单号：
        </div>
        <div class="info-value">
          <span>{{  skuInfo.tid}}</span>
        </div>
      </div>
      <div class="info-item">
        <div class="info-label">
          订单编号：
        </div>
        <div class="info-value">
          <span>{{  skuInfo.order_id}}</span>
        </div>
      </div>
      <div class="info-item">
        <div class="info-label">
          下单店铺：
        </div>
        <div class="info-value">
          <span>{{  skuInfo.shop_name}}</span>
        </div>
      </div>
      <div class="info-item">
        <div class="info-label">
          发货仓库：
        </div>
        <div class="info-value">
          <span>{{  skuInfo.wareHouseName}}</span>
        </div>
      </div>
      <div class="info-item">
        <div class="info-label">
          物流单号：
        </div>
        <div class="info-value">
          <span>{{  skuInfo.logistics_number}}<span v-if="skuInfo.NAME">（</span>{{ skuInfo.NAME}}<span v-if="skuInfo.NAME">）</span></span>
        </div>
      </div>

      <div class="info-item" v-if="skuInfo.buyermessage">
        <div class="info-label">
          买家备注：
        </div>
        <div class="info-value red">
          {{ skuInfo.buyermessage }}
        </div>
      </div>
      <div class="info-item" v-if="skuInfo.sellermemo">
        <div class="info-label">
          卖家备注：
        </div>
        <div class="info-value red">
          {{ skuInfo.sellermemo }}
        </div>
      </div>
      <div class="info-item" v-if="skuInfo.insideremark">
        <div class="info-label">
          内部备注：
        </div>
        <div class="info-value red">
          {{ skuInfo.insideremark }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'AfterDeliveryPanel',

  components: {
  },

  data() {
    return {
    };
  },

  props: {
    orderInfo: {
      type: Object,
      default: () => {
        return {}
      }
    },
    scanNum: {
      type: Number,
      default: 0
    },
    totalNum: {
      type: Number,
      default: 0
    },
    skuInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },



  created() {
  },

  mounted() {
  },

  methods: {
  },
};
</script>

<style lang="less" scoped>
.after-delivery-panel {
  padding: 16px 0;
  .info-group {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #DADADA;
    &:last-child {
      border-bottom: none;
    }
  }
  .info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 14px;
    line-height: 16px;
    padding: 0 16px;
    &:last-child {
      margin-bottom: 0;
    }
    .info-label {
      flex: 0 0 70px;
      color: #666666;
    }
    .statistics {
      flex: 0 0 120px;
    }
    .info-value {
      color: #333333;
      width: calc(100% - 70px);
      word-wrap: break-word;
      vertical-align: middle;
    }
  }

  .num {
    font-size: 26px;
    font-weight: 700;
    font-family: PingFangSC-Medium, PingFang SC;
  }
  .red {
    color: #ff0101;
  }
  .green {
    color: #2baa0c;
  }
}
</style>


