<template>
  <div class="goods">
    <div class="goods__title">Max会员尊享<span>·</span><span>0息费</span><span>好物</span></div>
    <cr-sticky id="goodTab">
      <cr-tabs
        v-model="categoryId"
        class="goods__tabs"
        :line="false"
        title-bg-color="#EFF6FF"
        title-active-color="#001746"
        title-inactive-color="#001746"
      >
        <cr-tab
          v-for="(item, index) in category"
          :key="index"
          :name="item.categroyId"
          :title="item.categroyName"
        />
      </cr-tabs>
    </cr-sticky>
    <cr-list
      v-model="loading"
      class="goods__list"
      :finished="finished"
      finished-text="没有更多了"
      offset="100"
      @load="onLoad"
    >
      <good-item
        v-for="(item, index) in list"
        :key="index"
        :categroy-name="categroyName"
        :page-name="pageName"
        :good="item"
      />
    </cr-list>
  </div>
</template>
<script>
import { maxMember } from '@/api/member.api';

import GoodItem from './goodsItem.vue';
// 函数式组件
export default {
  components: {
    GoodItem
  },
  props: {
    pageName: {
      type: String,
      default: ''
    },
    category: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      categroyName: '',
      finished: false,
      loading: false,
      list: [],
      pageNo: 1,
      categoryId: ''
    };
  },
  watch: {
    category: {
      deep: true,
      handler(val) {
        if (val[0]?.categoryId) {
          this.categoryId = val[0].categroyId;
        }
      }
    },
    categoryId(val, oldVal) {
      this.finished = false;
      this.pageNo = 1;
      this.getGoodsList();
      if (oldVal) {
        this.$nextTick(() => {
          const goodTab = document.getElementById('goodTab');
          window.scrollTo(0, goodTab.offsetTop);
        });
      }
      console.log(this.category);
      for (let i = 0; i < this.category.length; i++) {
        if (this.category[i].categroyId === val) {
          this.categroyName = this.category[i].categroyName;
          break;
        }
      }
    }
  },
  methods: {
    onLoad() {
      this.getGoodsList();
    },
    async getGoodsList() {
      if (!this.categoryId) return;
      this.loading = true;
      try {
        const [data] = await maxMember.goodsList({
          categoryId: this.categoryId === '-1' ? '' : this.categoryId,
          pageSize: 10,
          pageNo: this.pageNo
        });
        if (data) {
          if (this.pageNo === 1) {
            this.list = [];
          }
          this.loading = false;
          this.list = [...this.list, ...data.data] || [];
          if (!data.hasNext) {
            this.finished = true;
          } else {
            this.pageNo++;
          }
        } else {
          this.loading = false;
          this.finished = true;
        }
      } catch (error) {
        this.loading = false;
        this.finished = true;
      }
    }
  }
};
</script>
<style lang="less" scoped>
.goods {
  min-height: 105vh;
  .cr-sticky {
    @{deep} > div {
      z-index: 99;
      width: calc(100% - @padding-sm * 2);
    }
  }
  &__title {
    padding: @padding-sm 0 @padding-xs;
    .text-size(17px);
    font-weight: bold;
    span {
      &:first-child {
        padding: 0 @padding-unit;
        color: @black;
        font-weight: bold;
      }
      &:nth-child(2) {
        color: #f63038;
        font-weight: bold;
      }
      &:last-child {
        color: @gray-4;
        font-weight: bold;
      }
    }
  }
  &__tabs {
    margin-left: -@padding-sm;
    margin-right: -@padding-sm;
    width: 100vw;
    @{deep}.cr-tabs__item--active .cr-tabs__text {
      font-weight: bold;
    }
    @{deep}.cr-tabs__content {
      display: none;
    }
  }
  &__list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    @{deep} .cr-list {
      &__loading,
      &__finished-text,
      &__error-text {
        margin: 0 auto;
        width: 100%;
      }
    }
    @{deep} .cr-loading--text {
      color: @black;
    }
  }
}
</style>
