<template>
  <view :class="['zj-page-fill', zjPageFillClass]">
    <view class="zj-page-fill-absolute">
      <template v-if="scroll">
        <scroll-view
          class="zj-page-fill-scroll"
          scroll-y
          enable-flex
          v-bind="scrollAttribute"
          @scrolltoupper="
            (...p) => {
              $emit('scrolltoupper', p)
            }
          "
          @scrolltolower="
            (...p) => {
              $emit('scrolltolower', p)
            }
          "
          @scroll="
            (...p) => {
              $emit('scroll', p)
            }
          "
          @refresherpulling="
            (...p) => {
              $emit('refresherpulling', p)
            }
          "
          @refresherrefresh="
            (...p) => {
              $emit('refresherrefresh', p)
            }
          "
          @refresherrestore="
            (...p) => {
              $emit('refresherrestore', p)
            }
          "
          @refresherabort="
            (...p) => {
              $emit('refresherabort', p)
            }
          "
        >
          <slot></slot>
        </scroll-view>
      </template>
      <template v-else>
        <slot></slot>
      </template>
    </view>
  </view>
</template>

<script>
export default {
  name: 'ZjPageFill',
  props: {
    scroll: {
      type: Boolean,
      default: true
    },
    scrollAttribute: {
      type: Object,
      default: () => ({})
    },
    zjPageFillClass: {
      type: String,
      default: ''
    }
  }
}
</script>

<style lang="scss" scoped>
.zj-page-fill {
  flex: 1;
  overflow: hidden;
  position: relative;

  .zj-page-fill-absolute {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  .zj-page-fill-scroll {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
  }
}
</style>
