<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  name: "SpectrumDiagramChatCarouse",
});
</script>

<script setup lang="ts">
import { Swiper, SwiperSlide } from "swiper/vue";
import { Pagination, Navigation, Autoplay } from "swiper/modules";
import { Carousel } from "ant-design-vue";

interface PropsType {
  imgs: string[];
}

const props = withDefaults(defineProps<PropsType>(), {
  imgs: () => [],
});

const modules = [Pagination, Navigation, Autoplay];
const prefix = "spectrum-diagram-chat";
</script>

<template>
  <div
    :class="prefix"
    :style="{
      '--swiper-navigation-size': '24px',
    }"
  >
    <swiper
      :modules="modules"
      :slides-per-view="1"
      :space-between="30"
      :pagination="{ clickable: true }"
      :navigation="true"
      class="chat-img-swiper"
    >
      <swiper-slide v-for="(img, index) in props.imgs" :key="index">
        <div class="slide-content">
          <img :src="img" />
        </div>
      </swiper-slide>
    </swiper>
  </div>
</template>

<style lang="scss" scoped>
$prefix: "spectrum-diagram-chat";

.#{$prefix} {
  width: 100%;
  height: 100%;
  /* For demo */
  .slide-content {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: auto;
      height: 100%;
    }
  }
  .chat-img-swiper {
    width: 100%;
    height: 100%;
  }
}
</style>
