<template>
  <div class="product-group">
    <div
      class="product-item"
      :class="{single}"
      v-for="(product, inx) in data"
      :key="inx">
      <div class="product-content">
        <ImageFormat class="product-image" :src="product.src"></ImageFormat>
        <div class="product-info">
          <p class="product-name">{{product.name}}</p>
          <p class="price">￥{{product.price}}</p>
        </div>
      </div>
      <Button icon="iconfont icon-zan" class="btn-fav btn-is-fav">{{product.isFav ? '已种草' : '种草'}}</Button>
    </div>
  </div>
</template>

<script>
import {Button} from 'cube-ui';

export default {
  name: 'ProductGroup',
  props: {
    data: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  computed: {
    single() {
      return this.data.length === 1;
    }
  },
  components: {Button}
};
</script>

<style lang="scss" scoped>
.product-group {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  height: 276px;
  padding-top: 40px;
  padding-bottom: 40px;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;

  .product-item {
    position: relative;
    margin-top: 20px;
    margin-right: 20px;
    margin-left: 30px;
    height: 180px;
    width: 580px;
    background-color: #fff;
    box-shadow: 0 5px 10px 0 rgba(107, 95, 95, 0.2);
    display: inline-block;
    padding: 10px 20px;
    white-space: initial;

    &:last-child {
      margin-right: 30px;
    }

    &.single {
      width: 690px;
    }
  }

  .product-content {
    display: flex;
    width: 100%;
    height: 100%;
  }

  .product-image {
    width: 136px;
    height: 180px;
    margin-top: -30px;
  }

  .product-info {
    padding-left: 20px;
    flex: 1;

    .product-name {
      font-size: 24px;
      color: #9b9b9b;
      letter-spacing: -0.25px;
      height: 104px;
    }

    .price {
      font-size: 32px;
      color: #d0021b;
      letter-spacing: -0.34px;
    }
  }

  .btn-fav {
    position: absolute;
    bottom: 20px;
    right: -20px;
    width: 120px;
    height: 48px;
    padding: 0;
    font-size: 24px;

    & /deep/ .iconfont {
      margin: 0;
    }
  }
}
</style>