<!--
 * @description:
 * @fileName: yasTest.vue
 * @author: huzhiming
 * @date: 2019-11-28 10:09:21
 * @后台人员:
 * @version: v1.0.0
 * @path: 页面访问路径及参数说明
!-->
<template>
<div class="yasTest-wrap">
  <div class="top">height:1000px</div>
  <div v-expose:foo.a.b="true" ref="exposeRef" :id="`box${item.id}`" class="box" v-for="(item, index) in yasList" :key="index">
    <pre>
      height:100px
      id: {{item.id}}
    </pre>
  </div>
  <div class="down">height:1000px</div>
</div>
</template>

<script>
// horizontal vertical

// initHorizontalExposure
import { debounce, throttle } from 'lodash';

const mixins = {
  data() {
    return {
      yasList: [...Array(20).keys()].map((item,index)=>({id: index, offset:null}))
    }
  },
  created() {},
  mounted() {
    console.log(this);

    setTimeout(() => {
      window.addEventListener('scroll', debounce(throttle(this.handleScroll,500),200));
    }, 0);


    // window.addEventListener('scroll', throttle(this.handleScroll,500));
  },
  activated() {},
  deactivated() {},
  // beforeRouteEnter (to, from, next) {},
  // beforeRouteUpdate(to, from, next) {},
  // beforeRouteLeave(to, from, next) {},
  destroyed() {
    window.removeEventListener('scroll', null);
  },
  methods: {
    handleScroll(e) {
      const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight

      let isInViewPortArr = this.$refs['exposeRef'].map(el => {
        const Rect = el.getBoundingClientRect();
        const top = el.getBoundingClientRect().top;
        const elHeight = Rect.height;
        console.log(`窗口宽度：${viewPortHeight},元素距离可视基准线top值:${top},是否在可视区域内：${top+ elHeight<0?false:top <= viewPortHeight}`);
        return (top > 0 || top + elHeight > 0) ? top <= viewPortHeight : false;
      });

      console.log('isInViewPortArr', isInViewPortArr);


      isInViewPortArr.filter((isInViewPort,index)=>{
        if (isInViewPort===true) {
          console.log(`此处进行曝光事件上报,需要曝光索引为`, index, isInViewPort);
        }
      });
    }
  },
  computed: {},
  watch: {},
  components: {},
  directives: {
    expose: {
      // 指令的定义
      inserted: function (el,binding,vnode,oldVnode) {
        console.log('inserted', el.getBoundingClientRect());
      },
      bind: function (el,binding,vnode,oldVnode) {
        console.log('bind', el);
        // var s = JSON.stringify
        // el.innerHTML =
        // 'name: '       + s(binding.name) + '<br>' +
        // 'value: '      + s(binding.value) + '<br>' +
        // 'expression: ' + s(binding.expression) + '<br>' +
        // 'argument: '   + s(binding.arg) + '<br>' +
        // 'modifiers: '  + s(binding.modifiers) + '<br>' +
        // 'vnode keys: ' + Object.keys(vnode).join(', ')
      },
      update: function (el,binding,vnode,oldVnode) {
        console.log('update', el);
      },
      componentUpdated: function (el,binding,vnode,oldVnode) {
        console.log('componentUpdated', el);
      },
      unbind: function (el,binding,vnode,oldVnode) {
        console.log('unbind', el);
      },

    }
  }
}

export default {
  name: 'yasTest',
  mixins: [mixins],
  props: {},
  data() {
    return {}
  },
  created() {},
  mounted() {},
  activated() {},
  deactivated() {},
  // beforeRouteEnter (to, from, next) {},
  // beforeRouteUpdate(to, from, next) {},
  // beforeRouteLeave(to, from, next) {},
  destroyed() {},
  methods: {},
  computed: {},
  watch: {},
  components: {}
};
</script>

<style rel='stylesheet/scss' lang='scss' scoped>
.yasTest-wrap {
  background: #f5f5f5;
  .box {
    width: 100vw;
    height: 200px;
    &:nth-child(2n) {
      background: red;
    }
    &:nth-child(2n+1) {
      background: green;
    }
  }
  .top,.down {
    height: 2000px;
  }
}
//@import "./style.scss";
</style>