<template>
  <div class="out-store-panel">
    <div class="info-group">
      <div class="info-item">
        <div class="info-label scale-font">
          已出/应出：
        </div>
        <div class="info-value num">
          <span :class="[scanNum===totalNum? 'green': 'red']">{{scanNum}}</span>/<span>{{totalNum}}</span>
        </div>
      </div>
      <div class="info-item" v-if="orderInfo.BUYERMESSAGE">
        <div class="info-label">
          买家备注：
        </div>
        <div class="info-value red">
          {{ orderInfo.BUYERMESSAGE }}
        </div>
      </div>

      <div class="info-item" v-if="orderInfo.SELLERMEMO">
        <div class="info-label">
          卖家备注：
        </div>
        <div class="info-value red">
          {{ orderInfo.SELLERMEMO }}
        </div>
      </div>

      <div class="info-item" v-if="orderInfo.INSIDEREMARK">
        <div class="info-label">
          内部备注：
        </div>
        <div class="info-value red">
          {{ orderInfo.INSIDEREMARK }}
        </div>
      </div>
    </div>

    <div class="info-group">
      <div class="info-item">
        <div class="info-label">
          下单店铺：
        </div>
        <div class="info-value">
          <span>{{  orderInfo.ORDERSHOPNAME}}（{{  orderInfo.PLATFORMNAME}}）</span>
        </div>
      </div>
      <div class="info-item">
        <div class="info-label">
          订单编号：
        </div>
        <div class="info-value">
          <span>{{  orderInfo.ID}}</span>
        </div>
      </div>
      <div class="info-item">
        <div class="info-label">
          平台单号：
        </div>
        <div class="info-value">
          <span>{{  orderInfo.SOURCECODE}}</span>
        </div>
      </div>
      <div class="info-item">
        <div class="info-label">
          下单时间：
        </div>
        <div class="info-value">
          <span>{{ orderInfo.ORDERDATE }}</span>
        </div>
      </div>
      <div class="info-item">
        <div class="info-label">
          支付时间：
        </div>
        <div class="info-value">
          <span>{{ orderInfo.PAYTIME }}</span>
        </div>
      </div>
      <div class="info-item">
        <div class="info-label">
          物流信息：
        </div>
        <div class="info-value">
          <span>{{  orderInfo.LOGISTICSNUMBER}}<span v-if="orderInfo.NAME">（</span>{{ orderInfo.NAME}}<span v-if="orderInfo.NAME">）</span></span>
        </div>
      </div>
      <div class="info-item">
        <div class="info-label">
          收件地址：
        </div>
        <div class="info-value one-line-flow">
          <span :title="orderInfo.ADDRESS">{{ orderInfo.ADDRESS }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'OutStorePanel',

  components: {
  },

  data() {
    return {
    };
  },

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



  created() {
  },

  mounted() {
  },

  methods: {
  },
};
</script>

<style lang="less" scoped>
.out-store-panel {
  padding: 16px 0;
  box-sizing: border-box;
  .info-group {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #DADADA;
    &:last-child {
      border-bottom: none;
      margin-bottom: 0;
    }
  }
  .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 60px;
      color: #666666;
    }
    .info-value {
      color: #333333;
      width: calc(100% - 60px);
      word-wrap: break-word;
      vertical-align: middle;
    }
    .scale-font {
      font-size: 14px;
      flex: 0 0 80px;
    }
    .red {
      color: #ff0101;
    }
  }
  .num {
    font-size: 26px;
    font-weight: 700;
    font-family: PingFangSC-Medium, PingFang SC;
  }
  .green {
    color: #2baa0c;
  }
}
</style>


