<template>
  <div v-if="!showEmpy" class="Goods">
    <div v-if="showTitle && 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">
            <service-product :item="item" position="left" />
          </div>
        </div>
        <div class="Goods-right">
          <div v-for="(item, index) in rightList" :key="index" class="Goods-item">
            <service-product :item="item" position="right" />
          </div>
        </div>
      </div>
    </cr-list>
  </div>
</template>

<script>
import serviceProduct from './serviceProduct.vue';
import { getGoodsList } from '@/api/serviceGoods.api';
export default {
  components: {
    serviceProduct
  },
  props: {
    showTitle: {
      type: Boolean,
      default: true
    },
    serviceType: {
      type: Number,
      default: 0
    },
    params: {
      type: Object,
      default: () => ({})
    }
  },
  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);
    }
  },
  mounted() {
    this.onLoad();
  },
  methods: {
    async onLoad() {
      this.loading = true;
      try {
        const serviceType = this.serviceType;
        console.log(this.params);
        const [res, error] = await getGoodsList(serviceType, {
          ...this.queryParams,
          ...this.params
        });
        if (!error) {
          this.goodsList = [...this.goodsList, ...(res.recommendGoodsList || [])];
          this.loading = false;
          if (serviceType === 0) {
            this.finished = true; // -----临时加上去
            return;
          }
          if (res.hasNext) {
            this.queryParams.pageNo++;
          } else {
            this.finished = true;
          }
        } else {
          this.loading = false;
          this.finished = true;
        }
      } catch (error) {
        console.log(error);
      }
    }
  }
};
</script>
<style lang="less" scoped>
.Goods {
  margin-top: @padding-sm;
  padding: 0 @padding-unit;
  &-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-xs;
  }
}
</style>
