<template>
	<div>
		<Carousel v-model="value" loop v-if="data.length>carouselSize">
	        <CarouselItem  v-for="page in Math.ceil(data.length/carouselSize)" :key="page">
					<slot v-for="(item,index) in data.slice((page-1)*carouselSize,page*carouselSize)"   :obj="item"  name="form"></slot>
					<div class="empty-div" v-for="c in (carouselSize-data.length%carouselSize)" v-if="data.length%carouselSize!=0&&page==Math.ceil(data.length/carouselSize)"></div>
	        </CarouselItem>
	    </Carousel>
	    <div v-if="data.length<=carouselSize">
	    	<div  v-for="page in Math.ceil(data.length/carouselSize)" class="ivu-carousel-item wd100">
	    		<slot v-for="(item,index) in data.slice((page-1)*carouselSize,page*carouselSize)"   :obj="item"  name="form"></slot>
	            <div class="empty-div" v-for="c in (carouselSize-data.length%carouselSize)" v-if="data.length%carouselSize!=0&&page==Math.ceil(data.length/carouselSize)"></div>
	    	</div>
	    </div>
	</div>
	 
</template>

<script lang="ts">
import { Component, Prop, Vue, Emit } from "vue-property-decorator";

@Component
export default class CsCarousel extends Vue {
  value : number = 0;
  @Prop() data ! : any;
  @Prop(Number) carouselSize ! : number;
}
</script>