/** 图库9.0(智能PPT) 虚拟列表 */
import Highcharts from "highcharts/highstock"
export default {
  data(){
    return{
      allPageList:[],//包括封面封底的pageList
      loadList:[],//虚拟List
      pageNum:1,//分页
      pageNo:1,//当前在第几页
      pageSize:3,//触底时需要加载多少个dom
      domHeight:790,//单个dom的高+margin
      _scrollTop:0,//上一次滚动条距离顶部的高度
      paddingBottom:0,//容器需要padding的值
      paddingTop:0,
      scroller:null,//监听滚动事件的dom
      scrollerInner:null,//虚拟列表容器
      buffer:1,//缓冲数量
      topHiddenCount:0,//从0开始，隐藏的元素数量
      bottomHiddenCount:0,//从allPageList[lastOne]开始，隐藏的元素数量
      lastVisibleItemIndex:0
    }
  },
  methods: {
    async initVirtualScroll(){
      //将封面封底信息加入，将pageList里的index加入
      this.allPageList = this.pageList.slice(0)
      this.allPageList.forEach((i,index)=>{
        i.sourceIndex = index
        i.isLoading = false
      })
      this.allPageList.unshift(this.coverInfo)
      this.allPageList.push(this.backInfo)
      //根据pageSize算出pageNum
      this.pageNum = Math.ceil(this.allPageList.length / this.pageSize)
      //加载第一页
      this.loadList = this.allPageList.slice(0,this.pageSize)
      //加载第一页数据（除封面）
      for(let i=1;i<this.loadList.length;i++){
          await this.initPageElements(this.loadList[i],'show')
      }
    },
    loadMore(pageSize){
      this.pageNo++
      const tempArr = this.allPageList.slice((this.pageNo-1)*pageSize,this.pageNo*pageSize) 
      this.loadList = this.loadList.concat(tempArr)
    },
    handleScroll:_.throttle(function (e){
      const { clientHeight, scrollHeight, scrollTop } = e.target;
      console.log('clientHeight',clientHeight,'scrollHeight',scrollHeight,'scrollTop',scrollTop)
      //console.log(Highcharts.charts)
      Highcharts.charts = []
      //触底的情况
     /*  if (scrollHeight - (clientHeight + scrollTop) < 200) {
        console.log('should load next')
        if(this.pageNo===this.pageNum){
          console.log('已经是最后一项')
        }else{
          this.loadMore(this.pageSize)
        }
      } */
      const direction = scrollTop>this._scrollTop?1:-1
      this.toggleTopItems(direction, scrollTop)
      this.toggleBottomItems(direction, scrollTop, clientHeight)
      //记录这次滚动记录
      this._scrollTop = scrollTop
      console.log({
			direction,
			topHiddenCount: this.topHiddenCount,
			lastVisibleItemIndex: this.lastVisibleItemIndex,
		})
    },200),
    //计算容器paddingTop以及需要隐藏/加载的dom个数
    async toggleTopItems(direction,scrollTop){
      const firstVisibleItemIndex = Math.floor(scrollTop / this.domHeight)
      const firstExistingItemIndex = Math.max(0, firstVisibleItemIndex - this.buffer);
      //需要移除dom
      if (direction === 1) {
        for (let i = this.topHiddenCount; i < firstExistingItemIndex; i++) {
          if(this.loadList[0]) this.loadList.shift()
        }
      }
      //需要加载dom
      if (direction === -1) {
        for (let i = this.topHiddenCount - 1; i >= firstExistingItemIndex; i--) {
          const item = this.allPageList[i]
          this.loadList.unshift(item)
          if(i!==0){
            //此时的图标必是已经加载过的，不需要异步
            this.initPageElements(this.loadList[0],'show')
          }
            
        }
      }
      //设置容器的paddingTop
      this.topHiddenCount = firstExistingItemIndex;
      this.paddingTop = this.topHiddenCount * this.domHeight
      this.scrollerInner.style.paddingTop = this.paddingTop + "px"
    },
    //计算容器paddingBottom以及需要隐藏/加载的dom个数
    async toggleBottomItems(direction,scrollTop, clientHeight){
      const lastVisibleItemIndex = Math.floor((scrollTop + clientHeight) / this.domHeight);
      const lastExistingItemIndex = lastVisibleItemIndex + this.buffer;
      this.lastVisibleItemIndex = lastVisibleItemIndex;
      //需要移除dom
      if (direction === -1) {
        for (let i = lastExistingItemIndex + 1; i <= this.allPageList.length; i++) {
          if (this.loadList[i - this.topHiddenCount]) this.loadList.splice(i - this.topHiddenCount,1)
        }
      }
      //需要加载dom
      if (direction === 1) {
        for (let i = this.topHiddenCount + this.loadList.length; i <= lastExistingItemIndex; i++) {
          const item = this.allPageList[i];
          if (!item) break;
			    this.loadList.push(item)
          if(i!==this.allPageList.length-1){
            this.initPageElements(this.loadList[this.loadList.length-1],'show')
            /* if(this.loadList[this.loadList.length-1].isLoading){
              this.initPageElements(this.loadList[this.loadList.length-1],'show')
            }else{
              await this.initPageElements(this.loadList[this.loadList.length-1],'show')
            } */
          }
        }
      }

    }
  }
}