<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" />
      <!-- 商品推荐 -->
      <div class="swipe-con">
        <div :class="{isFixed:isShowSticky&&showTabs}">
          <m-tabs
            v-model="tabIndex"
            :tabs="tabList"
            class="tab-list"
            
            @change="tabChange"
            :fixed="true"
          />
        </div>
      </div>
      <div class="goods-list" v-if="tabList&&tabList.length>0&&tabList[tabIndex].goods">
        <component :is="isType"  v-for="(item, index) of goods" :data="item" :key="`floor-item-${index}`"/>
      </div>
    </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 BlindGoods from "./goods-list/blind-goods.vue";
import DigitalCollectionGoods from "./goods-list/digital-collection-goods"
export default {
  components: {
    HomeHeader,
    HomeScroll,

    BannerList,
    MenuList,
    BlindGoods,
    DigitalCollectionGoods
  },
  data() {
    return {
      loading: true,
      loadFlag: 0,
      tabList: [

      ],
      downHight: 0,
      upHight: 0,
      mescroll: {},
      tabIndex: 0,
      preIndex: 0, // 前一个菜单下标
      navTop: 470, // nav距离到顶部的距离 (如计算不准确,可直接写死某个值)
      tabsLoading: false,
      isChangeTab:false
    };
  },
  computed: {
    // 列表数据
    goods() {
      if (this.tabList[this.tabIndex]) {
        return this.tabList[this.tabIndex].goods;
      } else {
        return [];
      }
    },
    isType(){
      if (this.tabList[this.tabIndex]) {
        return this.tabList[this.tabIndex].isType;
      } else {
        return BlindGoods;
      }
    },
    showTabs() {
      return this.tabList && this.tabList.length > 0;
    },
    isShowSticky(){
      if (this.upHight <= 200) {
        return false;
      } 
      return true
    },
  },
  mounted() {
    // this.requestData();
  },
  methods: {
    requestData() {
      this.$refs.bannerList.requestData();
      this.$refs.menuList.requestData();
      // if (page.num == 1) {
      //   this.loadFlag = 0;
      //   this.$refs.bannerList.requestData();
      //   this.$refs.menuList.requestData();
      //   this.requestFloor(page);
      // }else{
      //   this.getNavigationGoods(page)
      // }
    },
    requestFloor(page) {
      this.$api({
        apiName: "getFloor",
        success: (res) => {
          let arr = res;
          for (let item of arr) {
            switch (item.name) {
              case "盲盒藏品":
                item.isType = BlindGoods;
                break;
              case "推荐数字藏品":
                item.isType = DigitalCollectionGoods;
                break;
              default:
                item.isType = BlindGoods;
            }
          }
          arr.forEach(x=>{
            x.goods=null
            x.hasNext= true
            x.num= 1
            x.y= 0
            x.curPageLen= 0
          })
          this.tabList = arr
          this.tabsLoading = true;
          // this.upCallback(this.mescroll,page);
          this.getNavigationGoods(page)
          // this.$nextTick(() => {
          //   this.floorList.forEach((item) => {
          //     this.$refs[`floor-${item.operationFloorId}`][0].requestData();
          //   });
          // });
        },
      });
    },
    getNavigationGoods(page) {
      this.$api({
        apiName:"getFloorGoods",
        postData: {
          page: page.num,
          size: page.size,
          param: this.tabList[this.tabIndex].operationFloorId,
        },
        success: (res) => {
          let curTab = this.tabList[this.tabIndex];
          curTab.hasNext = true;
          let arr = res.list;
          if (page.num == 1) {
            curTab.goods = arr;
          } else {
            curTab.goods = curTab.goods.concat(arr);
          }
          this.mescroll.endBySize(res.list.length, 1000);
          setTimeout(() => {
            // 需先隐藏加载状态
            this.mescroll.endSuccess(res.list.length);
            // 再记录当前页的数据
            curTab.num = page.num; // 页码
            curTab.curPageLen = res.list.length; // 当前页长
            
            curTab.hasNext = this.mescroll.optUp.hasNext; // 是否还有下一页
            // 设置nav到顶部的距离 (需根据自身的情况获取navTop的值, 这里放到列表数据渲染完毕之后)
            // 也可以放到onReady里面,或者菜单顶部的数据(轮播等)加载完毕之后..
            if (!this.navTop) this.setNavTop();
            // 保持tab悬浮,列表数据显示第一条
            if (this.isChangeTab) {
              this.isChangeTab = false;
              // this.$hideLoading();
              if (this.isShowSticky) this.mescroll.scrollTo(this.navTop, 0);
            }
          }, 20);
        },
        fail: () => {
          this.mescroll.endErr();
        },
        complete: () => {
          this.$hideLoading();
        },
      });
    },
    loadSuccess(size, total) {
      // this.mescroll.endBySize();
      // this.loadFlag++;
      // size && (this.shopPage.size = size);
      // total && (this.shopPage.total = total);
      // if (this.shopPage.page == 1) {
      //   if (this.loadFlag % (this.floorList.length + 2) == 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() {
       // loadSwiper();
      this.tabsLoading = false;
      // 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
      this.mescroll.resetUpScroll();
    },
    upCallback(mescroll,page) {
      this.mescroll = mescroll;
      if (this.tabsLoading) {
        if (this.isChangeTab) {
          this.getNavigationGoods(page)
          this.mescroll.hideUpScroll(); // 切换菜单,不显示mescroll进度, 显示系统进度条
        }else{
          this.getNavigationGoods(page)
        }
      } else {
        this.requestData();
        this.requestFloor(page);
      }
      
    },
    tabChange(index) {
      this.tabIndex = index;
      // 记录前一个菜单的数据
      let preTab = this.tabList[this.preIndex];
      preTab.y = this.mescroll.getScrollTop(); // 滚动条位置
      this.preIndex = index;
      // 当前菜单的数据
      let curTab = this.tabList[index];
      if (!curTab.goods) {
        // 没有初始化,则初始化
        this.isChangeTab = true;
        this.mescroll.resetUpScroll();
      } else {
        // 初始化过,则恢复之前的列表数据
        this.mescroll.setPageNum(curTab.num + 1); // 恢复当前页码
        this.mescroll.endSuccess(curTab.curPageLen, curTab.hasNext); // 恢复是否有下一页或显示空布局
        this.$nextTick(() => {
          this.mescroll.scrollTo(curTab.y, 0); // 恢复滚动条的位置
        });
      }
    },
  }
};
</script>


<style lang="less">
.home-con {
   background: linear-gradient(180deg, #FFFFFF 0%, #F5F7FB 100%);
  .swipe-con {
    
    .m-tabs {
      border: 0;
      padding: 5px 16px;
      height: 32px;
      .van-tabs__wrap {
        height: 22px;
      }
      .van-tab {
        flex-basis:auto; 
        flex-grow: 0;       
        line-height: 22px;
        margin-right: 22px;
        .van-tab__text {
          font-size: 16px;
          color: rgba(3, 7, 17, 0.3);
          font-weight: bold;
        }
        &.van-tab--active {
          color: rgba(3, 7, 17, 1);
          .van-tab__text {
            color: rgba(3, 7, 17, 1);
          }
        }
      }
      .van-tabs__line {
        display: none;
      }
      
    }
    .isFixed{
      position: fixed;
      left: 0;
      top: 44px;
      width: 100%;
      background-color: #ffffff;
      z-index: 10;
    }
  }
  .goods-list{
    padding: 10px 11px;
    background: linear-gradient(180deg, #ffffff 0%, #f5f7fb 100%);
  }
}
</style>