<template>
  <div class="shop-recommend-con">
    <div class="title flex-default">
      更
      <div class="spot flex-default" />
      多
      <div class="spot flex-default" />
      推
      <div class="spot flex-default" />
      荐
    </div>
    <waterfall
      :col="2"
      :data="list"
      :width="itemWidth"
      :gutterWidth="gutterWidth"
    >
      <template>
        <goods-item
          v-for="(item, index) of list"
          :key="`goods-item-${index}`"
          :data="item"
          :index="index"
        />
      </template>
    </waterfall>
  </div>
</template>

<script>
import GoodsItem from "./goods-item.vue";
export default {
  components: { GoodsItem },
  props: {
    size: {
      type: Number,
      default: 5,
    },
  },
  data() {
    return {
      list: [],
    };
  },
  computed: {
    itemWidth() {
      return 168 * (document.documentElement.clientWidth / 375);
    },
    gutterWidth() {
      return 7 * (document.documentElement.clientWidth / 375);
    },
  },
  methods: {
    requestData(page) {
      let postData = {
        page,
        size: this.size,
      };
      this.$api({
        apiName: "getShopFeaturedList",
        postData,
        success: (res) => {
          let { list, total } = res;
          if (page == 1) {
            this.list = list;
          } else {
            this.list = this.list.concat(list);
          }
          this.$emit("loadSuccess", list.length, total);
        },
      });
    },
  },
};
</script>

<style lang="less">
.shop-recommend-con {
  padding: 4px 11px 18px;
  background: #f5f7fb;
  > .title {
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 20px;
    text-align: center;
    line-height: 21px;
    height: 21px;
    .spot {
      display: inline-block;
      height: 21px;
      width: 15px;
      position: relative;
      &::before {
        content: "";
        display: inline-block;
        position: absolute;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background-color: #140603;
        top: 50%;
        left: 50%;
        margin: -2px 0 0 -2px;
      }
    }
  }

  > .vue-waterfall {
    height: fit-content !important;
    overflow-y: hidden !important;
  }
}
</style>
