<template>
  <div class="bottom-fixed" :style="boxStyle">
    <div class="bottom-fixed-container" ref="fixed_container">
      <slot />
    </div>
  </div>
</template>

<script>
  export default {
    name: 'BottomFixed',
    data() {
      return {
        boxStyle: {}
      }
    },
    mounted() {
      this.setStyle()
    },
    methods: {
      setStyle() {
        const containerH = this.$refs['fixed_container']?.offsetHeight || 0
        if (containerH) {
          this.boxStyle = {
            '--container_height': `${containerH}px`
          }
        } else {
          this.boxStyle = {}
        }
      }
    }
  }
</script>

<style lang="less" scoped>
  .bottom-fixed {
    --container_height: 0;
    padding-bottom: var(--container_height);
    &-container {
      position: fixed;
      bottom: 0;
      width: 100%;
      z-index: 10;
    }
  }
  // 需要在 meta 标签设置 viewport=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
    .bottom-fixed {
      padding-bottom: calc(var(--container_height) + @safe_bottom);
      &-container {
        padding-bottom: @safe_bottom;
      }
    }
  }
</style>