<template>
  <div class="reco">
    <cr-divider v-show="list.length" :hairline="false">{{ desc }}</cr-divider>
    <cr-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      offset="100"
      @load="onLoad"
    >
      <div class="list">
        <div class="left">
          <Goods :data="leftList" />
        </div>
        <div class="right">
          <Goods :data="rightList" />
        </div>
      </div>
    </cr-list>
  </div>
</template>

<script>
import { getGoodsList } from '@/api/pay.api.js';
import Goods from './Goods.vue';
export default {
  components: {
    Goods
  },
  props: {
    desc: {
      type: String,
      default: '猜你喜欢'
    },
    pageSize: {
      type: Number,
      default: 20
    }
  },
  data() {
    return {
      finished: false,
      loading: false,
      list: [],
      pageNo: 1,
      leftList: [],
      rightList: []
    };
  },
  mounted() {},
  methods: {
    async loadReco() {
      this.loading = true;
      try {
        const [data] = await getGoodsList({
          pageType: 6,
          phoneNo: this.phoneNo,
          pageSize: this.pageSize,
          pageNo: this.pageNo
        });
        if (data) {
          this.loading = false;
          this.list = [...this.list, ...data.goodsList] || [];
          this.leftList = this.list.filter((item, index) => {
            if (index % 2 === 0) {
              return item;
            }
          });
          this.rightList = this.list.filter((item, index) => index % 2);
          if (!data.hasNext) {
            this.finished = true;
          } else {
            this.pageNo++;
          }
        } else {
          this.loading = false;
          this.finished = true;
        }
      } catch (error) {
        this.loading = false;
        this.finished = true;
      }
    },
    onLoad() {
      this.loadReco();
    }
  }
};
</script>

<style lang="less" scoped>
.reco {
  width: 100%;
  height: 100%;
  .cr-divider {
    margin: 0;
    margin-bottom: 12px;
    padding: 0 60px;
    color: #999;
    border: 0 solid #dcdcdc;
    font-size: 12px;
  }

  & /deep/ .cr-list__finished-text {
    display: none;
  }

  & /deep/ .cr-list__loading {
    margin: 0 auto;
  }

  .cr-list {
    box-sizing: border-box;
    padding: 10px 0;
    height: 100%;
    .list {
      height: 100%;
      overflow: auto;
      clear: both;
    }
    .left {
      float: left;
      width: 49%;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
    .right {
      float: right;
      width: 49%;
      height: 100%;
      display: flex;
      flex-direction: column;
    }
  }
}
</style>
