<script setup lang="ts">
import { ElCarousel, ElCarouselItem } from "element-plus";
import { CaretBottom, CaretRight } from "@element-plus/icons-vue";

const props = defineProps({
  carouselInfo: {
    type: Object,
    default: () => { },
  },
});

const emits = defineEmits(["carouselChange"]);

const carouselChange = (current: number, prev: number) => {
  emits("carouselChange", current);
};

</script>

<template>
  <el-carousel :height="carouselInfo.height ?? '150px'" :indicator-position="carouselInfo.indicatorPosition ?? 'none'"
    :arrow="carouselInfo.arrow ?? 'hover'" :trigger="carouselInfo.trigger ?? 'hover'" :loop="carouselInfo.loop ?? true"
    :autoplay="carouselInfo.autoplay ?? true" :initial-index="carouselInfo.initialIndex ?? 0" @change="carouselChange">
    <el-carousel-item class="carousel-item" :class="[carouselInfo.itemClass]" v-for="(item, i) in carouselInfo.list" :key="'carousel' + i">
      <slot :carousel="item"></slot>
    </el-carousel-item>
  </el-carousel>
</template>

<style lang="scss" scoped></style>