import {
  addResizeListener,
  removeResizeListener
} from 'element-ui/src/utils/resize-event'

const doResize = async (el, binding, vnode) => {
  const { componentInstance: $table } = await vnode

  const { value } = binding

  if (!$table.height) {
    throw new Error("el-$table must set the height. Such as height='100px'")
  }
  const bottomOffset = (value && value.bottomOffset) || 30

  if (!$table) return

  let height =
    window.innerHeight - el.getBoundingClientRect().top - bottomOffset
  if (value && value.fixedHeight) {
    height = value.fixedHeight
  }
  $table.layout.setHeight(height)
  $table.doLayout()
}

export default {
  bind(el, binding, vnode) {
    el.resizeListener = async () => {
      await doResize(el, binding, vnode)
    }
    addResizeListener(el, el.resizeListener)
    addResizeListener(window.document.body, el.resizeListener)
  },
  async inserted(el, binding, vnode) {
    await doResize(el, binding, vnode)
  },
  unbind(el) {
    removeResizeListener(el, el.resizeListener)
  }
}