<template>
    <transition :name="transition">
        <div
            :class="bem({active: loaded})"
            v-show="show"
            :style="loaded ? null :{visibility: 'hidden'}"
        >
            <slot />
        </div>
    </transition>
</template>

<script>

import { componentMixin, createComponentName } from '../_utils/component.js';
export default {
    inject: ['waterfail'],
    name: createComponentName('waterfall-item'),
    mixins: [componentMixin],
    props: {
        transition: {
            type: String,
            default: 'waterfall-fade'
        },
    },
    data() {
        return {
            show: true,
            loaded: false,
        };
    },
    mounted() {
        this.update();
    },
    beforeDestroy() {
        this.show = false;
    },
    destroyed() {
        this.waterfail.update();
    },
    methods: {
        async update() {
            await this.waterfail.update();
                this.show = true;
                this.loaded = true;
            // setTimeout(() => {
            //     this.show = true;
            //     this.loaded = true;
            // }, Math.random() * 100);
        }
    }
};
</script>

<style lang="less">
@import "../_styles/base.less";
@b: ~"@{prefix}-waterfall-item";


.@{b} {
    top: 0;
    left: 0;
    position: absolute;

    &--active {
        transition: all .15s;
    }
}


</style>
