<template>
  <div class="viewport" ref="viewport">
    <div class="scroll-bar" ref="scrollBar"></div>
    <div class="scroll-list" :style="{transform: `translate3d(0,${offset}px,0`}">
      <ListCard
        v-for="item in topData"
        :key="item.ID"
        :itemData="item"
      ></ListCard>
      <FreeReading :freeData="freeData" v-if="freeData.length > 0"/>
      <ListCard
        v-for="item in visibleData"
        :key="item.ID"
        :itemData="item"
      ></ListCard>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import ListCard from '@/components/home/ListCard.vue'
import FreeReading from '@/components/home/FreeReading.vue'

export default {
  name: 'VirtualList',
  components: {
    ListCard,
    FreeReading
  },
  props: {
    size: Number,
    remain: Number,
  },
  data() {
    return {
      start: 0,
      end: this.remain,
      offset: 0, // 可视区域定位偏移量
      freeData: [],
			topData: [],
      chargeData: [],
      dataList: [],
      isload: false,
			pageNum: 1
    }
  },
  computed: {
    visibleData() {
      return this.chargeData.slice(this.start, this.end)
    },
    ...mapState({
      purchaseColumn: 'purchaseColumn',
      purchaseList: 'purchaseList',      
    })
  },
  activated() { // 使用了keepalive时页面激活生命周期
    let position = sessionStorage.getItem('position') || 0;
		this.$refs.viewport.scrollTop = position;
	},
  mounted() {
    this.init();
    sessionStorage.setItem('position', 0);
    if(typeof(sensorTrack) == 'function'){
      sensor_newsView('风口研报-资讯列表页', '风口研报');
    }    
  },
  watch: {
    purchaseList () {
      this.getPurchaseState()
    },
    purchaseColumn () {
      this.getPurchaseState()
    },
  },
  methods: {
    calcHeight() {
      // this.$refs.viewport.style.height = this.size * this.remain + 'px';
      this.$refs.scrollBar.style.height = this.chargeData.length * this.size + 'px';
    },
    init() {
      this.getDataList();
			let target = this.$refs.viewport;
			let beforeScroll = 0;
			let timer;
			target.addEventListener('scroll', (e)=>{
        if (target.scrollHeight-target.scrollTop < 1000 && target.scrollTop-beforeScroll>0 && !this.isload) {
          this.isload = true;
          this.pageNum++
          this.getDataList();
        }
        beforeScroll = target.scrollTop;

        this.handleScroll(); // 虚拟列表计算

				if(timer)	clearTimeout(timer);
				timer = setTimeout(()=>{
					// 存放scrollTop
					sessionStorage.setItem('position', target.scrollTop);
				}, 50)
      })
    },
    handleScroll() {
      let scrollTop = this.$refs.viewport.scrollTop-(this.size*4);
      if(scrollTop<0){
        this.offset = 0;
        return
      }
      this.start = Math.floor(scrollTop / this.size);
      this.end = this.start + this.remain;
      // 定位到当前的可视区域
      this.offset = this.start * this.size;
    },
    getPurchaseState () {
      if(this.purchaseColumn == false){
        for(let i=0; i<this.dataList.length; i++){
          this.$set(this.dataList[i], 'purchase', false)
          let index = this.purchaseList.indexOf(this.dataList[i].ID)
          if(index != -1){
            this.$set(this.dataList[i], 'purchase', true)
          }
        }
      }else{
        for(let i=0; i<this.dataList.length; i++){
          this.$set(this.dataList[i], 'purchase', true)
        }
      }
      if(this.pageNum != 1) {
        this.chargeData = this.chargeData.concat(this.dataList);
      } else {
        this.topData = this.dataList.slice(0,3);
        this.chargeData = this.dataList.slice(3);
      }
      this.isload = false;
      this.calcHeight();           
    },
    getDataList() {
      let _this = this;
			$.ajax({
				url: 'https://apicdn.app.gtja.com/gtdynamiccdn/xuangubao/query/news/feecolumn/list',
        // url: 'http://114.141.165.129/gtdynamiccdn/xuangubao/query/news/feecolumn/list',
				data: {
					TYP_CODE: '226273',
					PAGE_NO: this.pageNum,
					PAGE_SIZE: 20
				},
				success: (res)=>{
					res = JSON.parse(res);
          _this.dataList = res.data;
          if(_this.pageNum == 1) {
            _this.freeData = res.free_data;
          }
          _this.getPurchaseState();
				}
			})
    },
  },
}
</script>

<style scope>
.viewport {
  width: 855px;
  height: calc(100vh - 31px);
  min-height: 669px;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 0 30px 35px;
  margin-right: 1px;
  background-color: #15171e;
  position: relative;
}
.scroll-list {
  position: absolute;
  top: 0;
  width: 795px;
}
</style>