<template>
  <div class="wrapper">
    <slot :height="tableHeight" />
  </div>
</template>

<script>
// 防抖
function debounce(func, delay) {
  let timerId
  return function(...args) {
    clearTimeout(timerId)
    timerId = setTimeout(() => {
      func.apply(this, args)
    }, delay)
  }
}

export default {
  props: {
    // 已知的高度
    givenHeight: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      tableHeight: 0
    }
  },
  created() {
    this.$nextTick(() => {
      this.calcSize()
    })
  },
  mounted() {
    const __this = this
    window.addEventListener('resize', function() {
      debounce(__this.calcSize(), 300)
    })
  },
  methods: {
    calcSize() {
      const viewportHeight = window.innerHeight || document.documentElement.clientHeight
      this.tableHeight = Number.parseInt(viewportHeight - this.getHeaderHeight() - this.givenHeight)
      this.$emit('resize')
    },
    // 获取header的高度
    getHeaderHeight() {
      const headerBar = document.querySelector('.main-container__wrapper')
      return headerBar.offsetHeight
    }
    // 获取toolbar的高度和是否隐藏
    // getToolHeight() {

    // }
  }
}
</script>

<style>

</style>
