<template>
  <div class="product-list">
    <RecommendProductItem class="item" v-for="(i, index) in list" v-bind="i" :key="index" @click.native="onClick(i.href)"></RecommendProductItem>
  </div>
</template>

<script>

import RecommendProductItem from './recommend-product-item';

export default {
  name: 'RecommendProductList',
  props: ['list'],
  components: {
    RecommendProductItem
  },
  methods: {
    onClick(url) {
      console.log(url);
      this.$yoho.goNewPage({url});
    }
  }
};
</script>

<style lang="scss" scoped>

.product-list {
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  display: flex;
}

.item + .item {
  margin-left: 22px;
}

.item:first-child {
  margin-left: 40px;
}

.item:last-child {
  margin-right: 40px;
}
</style>