<template>
  <div class="vue-waterfall-slot" v-show="isShow">
    <slot></slot>
  </div>
</template>

<style>
.vue-waterfall-slot {
  position: absolute;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
</style>

<script>

export default {
  data: () => ({
    isShow: false
  }),
  props: {
    width: {
      required: true,
      validator: (val) => val >= 0
    },
    height: {
      required: true,
      validator: (val) => val >= 0
    },
    order: {
      default: 0
    },
    moveClass: {
      default: ''
    }
  },
  methods: {
    notify () {
      this.$parent.$emit('reflow', this)
    },
    getMeta () {
      return {
        vm: this,
        node: this.$el,
        order: this.order,
        width: this.width,
        height: this.height,
        moveClass: this.moveClass
      }
    }
  },
  created () {
    this.rect = {
      top: 0,
      left: 0,
      width: 0,
      height: 0
    }
    this.$watch(() => (
      this.width,
      this.height
    ), this.notify)
  },
  mounted () {
    this.$parent.$once('reflowed', () => {
      this.isShow = true
    })
    this.notify()
  },
  destroyed () {
    this.notify()
  }
}

</script>
