<template>
  <div v-resize="resize" ref="scrollBox" class="scroll-box" :style="boxStyle">
    <slot />
  </div>
</template>

<script>
  import Vue from 'vue'

  Vue.directive('resize', {
    inserted: (el, binding) => {
      let f = evt => {
        if (binding.value(evt, el)) {
          window.removeEventListener('resize', f)
        }
      }
      window.addEventListener('resize', f)
    }
  })

  export default {
    name: 'ScrollBox',
    props: {
      offsetBottom: {
        type: String,
        default: '0px'
      }
    },
    data() {
      return {
        boxStyle: {}
      }
    },
    mounted() {
      this.resize()
    },
    methods: {
      resize() {
        this.$nextTick(() => {
          this.boxStyle = {
            height: `calc(100vh - ${this.offsetTop(this.$refs['scrollBox'])}px - ${this.offsetBottom})`
          }
        })
      },
      offsetTop(dom, total = 0) {
        console.log(dom)
        if (dom?.offsetParent) {
          total += dom?.offsetTop || 0
          return this.offsetTop(dom.offsetParent, total)
        } else {
          return total
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .scroll-box {
    overflow-y: auto;
    box-sizing: border-box;
  }
  // env 需要在 meta 标签设置 viewport-fit=cover
  // <meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
  @supports (bottom: constant(safe-area-inset-top)) or (bottom: env(safe-area-inset-top)) {
    @safe_bottom: constant(safe-area-inset-bottom); // < ios 11.2
    @safe_bottom: env(safe-area-inset-bottom); // > ios 11.2
    .scroll-box {
      padding-bottom: @safe_bottom;
    }
  }
</style>