<template>
    <div :class="prefixCls" :style="styles"><slot></slot></div>
</template>
<script>
const prefixCls = 'ivu-carousel-item';

export default {
    componentName: 'carousel-item',
    name: 'CarouselItem',
    data() {
        return {
            prefixCls: prefixCls,
            width: 0,
            height: 'auto',
            left: 0
        };
    },
    computed: {
        styles() {
            return {
                width: `${this.width}px`,
                height: `${this.height}`,
                left: `${this.left}px`
            };
        }
    },
    mounted() {
        this.$parent.slotChange();
    },
    watch: {
        width(val) {
            if (val && this.$parent.loop) {
                this.$nextTick(() => {
                    this.$parent.initCopyTrackDom();
                });
            }
        },
        height(val) {
            if (val && this.$parent.loop) {
                this.$nextTick(() => {
                    this.$parent.initCopyTrackDom();
                });
            }
        }
    },
    beforeDestroy() {
        this.$parent.slotChange();
    }
};
</script>
