<template>
  <div class="home-con">
    <home-header :downHight="downHight" :upHight="upHight" />
    <home-scroll
      @down="downCallback"
      @up="upCallback"
      @onMoving="onMoving"
      @onScroll="onScroll"
    >
      <!-- Banner列表 -->
      <banner-list ref="bannerList" @loadSuccess="loadSuccess" />
      <!-- 菜单列表 -->
      <menu-list ref="menuList" @loadSuccess="loadSuccess" />

      <!-- 商品推荐 -->
      <component
        :is="item.isType"
        v-for="(item, index) of floorList"
        :key="`floor-item-${index}`"
        :ref="`floor-${item.operationFloorId}`"
        :title="item.name"
        :floorId="item.operationFloorId"
        @loadSuccess="loadSuccess"
      />

      <!-- 店铺商品推荐 -->
      <shop-recommend ref="shopList" @loadSuccess="loadSuccess" :size="10" />
    </home-scroll>
  </div>
</template>

<script>
import HomeHeader from "./home-header";
import HomeScroll from "./home-scroll.vue";

import BannerList from "./banner-list.vue";
import MenuList from "./menu-list.vue";
import ShopRecommend from "./shop-recommend";

import HotGoods from "./goods-list/hot-goods.vue";
import HotRecommend from "./goods-list/hot-recommend.vue";
import TailGoods from "./goods-list/tail-goods.vue";
import CustomizedGoods from "./goods-list/customized-goods.vue";

export default {
  components: {
    HomeHeader,
    HomeScroll,

    BannerList,
    MenuList,
    ShopRecommend,

    HotGoods,
    HotRecommend,
    TailGoods,
    CustomizedGoods,
  },
  data() {
    return {
      loading: true,
      loadFlag: 0,
      floorList: [
        {
          isType: HotGoods,
        },
        {
          isType: HotRecommend,
        },
        {
          isType: TailGoods,
        },
        {
          isType: CustomizedGoods,
        },
      ],
      downHight: 0,
      upHight: 0,
      mescroll: {},

      shopPage: {
        page: 1,
        size: 0,
        total: 0,
      },
    };
  },
  methods: {
    requestData() {
      if (this.shopPage.page == 1) {
        this.loadFlag = 0;
        this.$refs.bannerList.requestData();
        this.$refs.menuList.requestData();
        // this.$refs.seckilllist.requestData();
        this.requestFloor();
        this.$refs.shopList.requestData(this.shopPage.page);
      } else {
        this.$refs.shopList.requestData(this.shopPage.page);
      }
    },

    requestFloor() {
      this.$api({
        apiName: "getFloor",
        success: (res) => {
          let arr = res;
          for (let item of arr) {
            switch (item.name) {
              case "爆款抢购":
                item.isType = HotGoods;
                break;
              case "推荐NFT":
                item.isType = HotRecommend;
                break;
              case "潜力NFT":
                item.isType = TailGoods;
                break;
              case "电影专区":
                item.isType = CustomizedGoods;
                break;
              default:
                item.isType = CustomizedGoods;
            }
          }
          this.floorList = arr;
          this.$nextTick(() => {
            this.floorList.forEach((item) => {
              this.$refs[`floor-${item.operationFloorId}`][0].requestData();
            });
          });
        },
      });
    },
    loadSuccess(size, total) {
      this.loadFlag++;
      size && (this.shopPage.size = size);
      total && (this.shopPage.total = total);
      if (this.shopPage.page == 1) {
        if (this.loadFlag % (this.floorList.length + 3) == 0) {
          this.mescroll.endBySize(this.shopPage.size, this.shopPage.total);
        }
      } else {
        this.mescroll.endBySize(size, total);
      }
    },

    onMoving(downHight) {
      this.downHight = downHight;
    },
    onScroll(upHight) {
      this.upHight = upHight;
    },
    downCallback() {},
    upCallback(mescroll, page) {
      this.mescroll = mescroll;
      this.shopPage.page = page.num;
      this.requestData();
    },
  },
  mounted() {},
};
</script>


<style lang="less">
.home-con {
}
</style>