<template>
  <div class="product-similar">
    <div class="product-similar-card">
      <grayCard :goods="similarData" />
    </div>

    <div class="product-similar-goods">
      <goodsCard :goods-list.sync="goodsList" show-cart header-type="image" />
    </div>
  </div>
</template>
<script>
import localStorage from '@/service/localStorage.service';
import goods from '@/api/goods.api';
import goodsCard from '@/components/goodsCard';
import grayCard from './components/loseCard';
export default {
  components: {
    grayCard,
    goodsCard
  },
  data() {
    return {
      similarData: {},
      goodsList: []
    };
  },
  created() {
    const similarData = localStorage.get('similarData') || {};
    this.similarData = similarData;
    this.loadData(similarData);
  },
  methods: {
    async loadData({ skuNo }) {
      // 商品详情没有无限流 只有20条数据
      const [res] = await goods.goodsLike({ goodsId: skuNo });
      this.goodsList = res?.goodsList || [];
    }
  }
};
</script>
<style lang="less" scoped>
.product-similar {
  padding: 10px;
  &-card {
    border-radius: 3px;
    background: @white;
    padding: 7px;
  }
  &-goods {
    margin-top: @padding-lg;
  }
}
</style>
