import _ from 'lodash'
interface ElType extends HTMLElement {
  timer: number | null
  isScroll: boolean
  curTableTopValue: number
}
export default {
  created(el: ElType) {
    el.timer = null
    el.isScroll = true
    el.curTableTopValue = 0
  },
  mounted(el: ElType, binding: { value?: { delay?: number } }) {
    const { delay = 15 } = binding.value || {}
    const tableDom = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
    const viewDom = el.getElementsByClassName('el-scrollbar__view')[0] as HTMLElement
    const onMouseOver = () => (el.isScroll = false)
    const onMouseOut = () => {
      el.curTableTopValue = tableDom.scrollTop
      el.isScroll = true
    }
    // table-container
    const container =  document.getElementsByClassName('table-container')[0] as HTMLElement || document.getElementsByClassName('list-container')[0] as HTMLElement
    // console.log(container, 'container')
    container.addEventListener('mouseover', onMouseOver)
    container.addEventListener('mouseout', onMouseOut)

    el.timer = window.setInterval(() => {
      const viewDomClientHeight = viewDom.scrollHeight
      const tableDomClientHeight = el.clientHeight

      if (el.isScroll && viewDomClientHeight > tableDomClientHeight) {
        const curScrollPosition = tableDom.clientHeight + el.curTableTopValue
        el.curTableTopValue =
          curScrollPosition === tableDom.scrollHeight
            ? 0
            : el.curTableTopValue + 1
        tableDom.scrollTop = el.curTableTopValue
      }
    }, delay)

    // 监测是否快要滚动到底部
    let flag = true
    const selectWrap = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
    selectWrap?.addEventListener('scroll', function () {
      let sign = 50
      const scrollDistance = this.scrollHeight - this.scrollTop - this.clientHeight
      if (scrollDistance < sign) {
        if(!el.isScroll) { return }
        const { loadmore = () => { console.log('执行加在到底函数111')} } = binding.value || {}
        if(flag) {
          flag = false
          loadmore()
          // console.log('执行加在到底函数')
          setTimeout(() => {
            flag = true
          }, 1000);
        }
      }
    })
  },
  unmounted(el: ElType) {
    if (el.timer !== null) {
      clearInterval(el.timer)
    }
    el.timer = null

    const tableDom = el.getElementsByClassName('el-scrollbar__wrap')[0] as HTMLElement
    const container =  document.getElementsByClassName('table-container')[0] as HTMLElement || document.getElementsByClassName('list-container')[0] as HTMLElement
    container?.removeEventListener('mouseover', () => (el.isScroll = false))
    container?.removeEventListener('mouseout', () => {
      el.curTableTopValue = tableDom.scrollTop
      el.isScroll = true
    })
  },
}