<template>
  <div class="card-shop">
    <div class="card-shop-container">
      <cr-grid
        v-if="orders.skuList.length > 1"
        :border="false"
        :column-num="5"
        class="card-shop-multi"
      >
        <cr-grid-item v-for="item in orders.skuList" :key="item.skuNo" class="card-grid__item">
          <div class="card-shop-image">
            <cr-image width="100%" height="100%" lazy-load :src="item.imageUrl | Img2Thumb" />
          </div>
        </cr-grid-item>
      </cr-grid>
      <template v-else>
        <div v-for="item in orders.skuList" :key="item.skuNo" class="card-shop-one">
          <div class="card-shop-image">
            <cr-image width="100%" height="100%" lazy-load :src="item.imageUrl | Img2Thumb" />
          </div>
          <div class="card-shop-one__content">
            <div class="card-shop-one__content__title" :class="{ skuSource: showSkuSource(item) }">
              {{ item.skuName }}
            </div>
            <div class="card-shop-one__content__spec">
              {{ item.skuAttrs || item.attsValue }}
            </div>
          </div>
        </div>
      </template>
      <div class="card-shop-mark" />
    </div>
    <div class="card-shop-num">
      <div v-if="orders.sumPrice" class="card-shop-num__price">¥{{ orders.sumPrice }}</div>
      <div>共 {{ orders.totalNum }} 件</div>
    </div>
  </div>
</template>
<script>
import { Img2Thumb } from '@/filters/img2Thumb.filter';
export default {
  filters: { Img2Thumb },
  props: {
    orders: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {};
  },
  methods: {
    showSkuSource(item) {
      return item.skuSource >= 2 && item.skuSource <= 6;
    }
  }
};
</script>
<style lang="less" scoped>
.card {
  &-grid__item {
    @{deep} .cr-grid-item__content {
      padding: 0;
    }
  }
  &-shop {
    padding: 8px;
    display: flex;
    align-items: center;

    &-container {
      flex: 1;
      overflow: hidden;
      position: relative;
    }

    &-image {
      width: 54px;
      height: 54px;
      border-radius: 8px;
      overflow: hidden;
    }

    &-one {
      display: flex;
      align-items: center;
      &__content {
        // flex: 1;
        padding-left: 8px;
        width: calc(100% - 54px);
        box-sizing: border-box;
        &__title {
          .text-size(13);
          color: @black;
          width: 100%;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
          &.skuSource {
            background: url(~@/assets/images/electronicInvoice/skuSource.png) no-repeat left center;
            background-size: 22px 14px;
            padding-left: 26px;
            box-sizing: border-box;
          }
        }
        &__spec {
          .text-size(12);
          color: @gray-4;
          min-height: 12px;
        }
      }
    }

    &-num {
      // width: 54px;
      padding-left: 10px;
      color: @gray-4;
      .text-size(12);
      text-align: right;

      &__price {
        font-weight: bold;
        color: @black;
      }
    }

    &-multi {
      // width: 100%;
      flex-wrap: nowrap;
      overflow-y: hidden;
      overflow-x: auto;
      &::-webkit-scrollbar {
        display: none;
      }
      .card-shop-image {
        margin-right: 8px;
      }
    }
    &-mark {
      position: absolute;
      right: -1px;
      top: 0;
      width: 18px;
      height: 100%;
      background-image: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffffff 101%);
    }
  }
}
</style>
