<template>
  <div
    ref="scrollerPage"
    class="scroller-page"
  >
    <!-- 头部 -->
    <div ref="header">
      <slot name="header" />
    </div>

    <!-- 滚动区域 -->
    <div :style="{ height: scrollerHeight }">
      <slot />
    </div>

    <!-- 底部 -->
    <div ref="footer">
      <slot name="footer" />
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      scrollerHeight: ''
    }
  },
  mounted () {
    this.computeHeight()
  },
  methods: {
    /**
       * 计算滚动区域高度
       * 如需动态重新计算，调用者可以手动调用该方法 this.$refs.scrollerRef.computedHeight
       */
    computeHeight () {
      const pageHeight = this.$refs.scrollerPage.offsetHeight
      const headerHeight = this.$refs.header.offsetHeight
      const footerHeight = this.$refs.footer.offsetHeight
      this.scrollerHeight = `${pageHeight - headerHeight - footerHeight}px`
    }
  }
}
</script>
