<template>
  <div class="order-goods-item-con common">
    <div class="header flex-default">
      <div class="name">{{ data.merchantName }}</div>
      <m-icon icon="icon-more-light" className="more" :size="10" />
    </div>
    <div
      class="content flex-default"
      v-for="(sku, index) of data.skuList"
      :key="`sku-item-${data.merchantId}-${index}`"
    >
      <img class="thumb" :src="sku.thumb" />
      <div class="desc flex-default">
        <div class="top">
          <div class="name">{{ sku.goodsName }}</div>
          <div class="sku">{{ sku.skuLabel }}</div>
        </div>
        <div class="bottom flex-default">
          <m-price :amt="sku.originalPrice" />
          <!-- <m-num-box v-model="sku.num" /> -->
          <div style="font-weight: bold">x {{ sku.num }}</div>
        </div>
      </div>
    </div>
    <!-- <div class="bottom flex-default">
          <div class="left">配送</div>
          <div class="right flex-default">
            <div class="text">xx快递</div>
            <div class="more" />
          </div>
        </div> -->
    <div class="bottom flex-default">
      <div class="left">备注</div>
      <div class="right flex-default">
        <input
          placeholder="建议备注前先与卖家沟通"
          class="note-input"
          v-model="data.vnote"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["data"],
};
</script>

<style lang="less">
.order-goods-item-con {
  margin-top: 10px;
  padding-right: 0 !important;

  .header {
    align-items: center;
    justify-content: space-between;
    padding-right: 16px;
    padding-bottom: 13px;
    border-bottom: 1px solid #f1f1f1;
  }

  .header .name {
    font-size: 14px;
    font-weight: bold;
  }

  > .content {
    padding: 12px 16px 27px 0;
    align-items: flex-end;

    .thumb {
      height: 90px;
      width: 90px;
      border-radius: 7px;
      margin-right: 11px;
    }

    .desc {
      flex: 1;
      height: 90px;
      flex-direction: column;
      align-items: flex-start;
      .top {
        flex: 1;
      }
      .bottom {
        width: 100%;
        align-items: center;
        justify-content: space-between;
      }
    }

    .desc .name {
      font-size: 14px;
      font-weight: bold;
      line-height: 26px;
    }

    .desc .sku {
      color: #72767d;
      font-size: 10px;
    }
  }

  > .bottom {
    align-items: center;
    justify-content: space-between;
    padding-right: 16px;

    .left {
      font-size: 14px;
      font-weight: bold;
      margin-right: 10px;
    }

    .right {
      align-items: center;
      flex: 1;
    }

    .right .text {
      font-size: 13px;
      margin-right: 6px;
    }

    .right .note-input {
      width: 100%;
      text-align: right;
      font-size: 12px;
    }

    .right input::-webkit-input-placeholder {
      color: #aeaeae;
    }
  }
}
</style>