<template>
  <div class="Goods">
    <div v-if="goodsList.length" class="Goods-title" />
    <cr-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了..."
      :offset="100"
      @load="onLoad"
    >
      <div class="Goods-container">
        <div class="Goods-left">
          <div v-for="(item, index) in leftList" :key="index" class="Goods-item">
            <browse-goods :status="status" :item="item" @close="closeProduct" />
          </div>
        </div>
        <div class="Goods-right">
          <div v-for="(item, index) in rightList" :key="index" class="Goods-item">
            <browse-goods :status="status" :item="item" @close="closeProduct" />
          </div>
        </div>
      </div>
    </cr-list>
  </div>
</template>

<script>
import browseGoods from './browseGoods.vue';
import { getGoodsList } from '@/api/home.api';
import goods from '@/api/goods.api';
// import { getGoodsList } from '@/api/browse.api';
export default {
  components: {
    browseGoods
  },
  props: {
    status: {
      type: Number,
      default: 0 // 0 推荐流，1查看相似
    },
    serviceType: {
      type: Number,
      default: 0
    },
    params: {
      type: Object,
      default: () => ({
        pageType: 1
      })
    }
  },
  data() {
    return {
      loading: true,
      finished: false,

      goodsList: [],
      queryParams: {
        pageNo: 1,
        pageSize: 20
      }
    };
  },
  computed: {
    showEmpy() {
      return this.finished && !this.goodsList.length;
    },
    leftList() {
      return this.goodsList.filter((item, index) => index % 2 === 0);
    },
    rightList() {
      return this.goodsList.filter((item, index) => index % 2 === 1);
    }
  },
  created() {
    this.onLoad();
  },
  methods: {
    closeProduct(product) {
      this.goodsList = this.goodsList.filter(item => product.goods.goodsId !== item.goods.goodsId);
    },

    getLoadData() {
      if (this.status === 0) {
        return getGoodsList({
          ...this.queryParams,
          ...this.params
        });
      } else if (this.status === 1) {
        return goods.goodsLike(this.params);
      }
    },
    async onLoad() {
      this.loading = true;
      const [res, error] = await this.getLoadData();
      if (!error) {
        this.goodsList = [...this.goodsList, ...(res.goodsList || [])];
        this.loading = false;
        if (res.hasNext) {
          this.queryParams.pageNo++;
        } else {
          this.finished = true;
        }
      } else {
        this.loading = false;
        this.finished = true;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.Goods {
  padding: 0 @padding-sm;
  /deep/ .cr-loading--text {
    color: @black;
  }
  &-title {
    height: 29px;
    background: url(~@/assets/images/sericeGoods/recommend.png) no-repeat center center;
    background-size: 136px 29px;
    padding: @padding-sm 0;
  }
  &-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  &-item {
    margin-bottom: @padding-sm;
  }
}
</style>
