<template>
  <section class="mx-4 mt-6 mb-2 bg-[#3C3C4314] rounded-3xl flex items-center  h-8 ">
    <SvgIcon name="volume" class="ml-4 w-6 h-6" />
    <div>
      <Swiper class="swiper-warp overflow-hidden h-8 flex items-center text-ss" ref="swipeRef" direction="vertical" :allowTouchMove="false">
        <swiper-slide v-for="item in list">{{ t('home.notice.c_t') }} {{ item.username }} {{ t('home.notice.f_e') }} {{ item.amount }}</swiper-slide>
      </Swiper>
    </div>
  </section>
</template>

<script setup lang="ts">
import SwiperCore from 'swiper'
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Pagination } from 'swiper/modules';
import 'swiper/css';
import 'swiper/css/autoplay';
import { onMounted, ref } from 'vue';
import { onUnmounted } from 'vue';
import SvgIcon from '@/components/SvgIcon.vue';
import {listMessage} from '@/api/home'

import { useI18n } from 'vue-i18n'
const { t } = useI18n()
const modules = [Pagination]
const swipeRef = ref()
const slideNext = () => {
  swipeRef.value.slideNext()
}

const list = ref([])
const interval = setInterval(slideNext, 3000)
onMounted(async () => {
  await initListMessage()
  swipeRef.value = new SwiperCore('.swiper-warp', {
    autoplay: false,
    direction: 'vertical',
    loop: true,
    allowTouchMove: false,
    modules: modules,
  })
})

const initListMessage = async () => {
   const res = await listMessage()
   list.value = res
}


onUnmounted(() => {
  
  clearInterval(interval)
})
</script>

<style scoped >
.swiper-warp {
  @apply ml-3 w-72;
  
}

.swiper-slide {
  text-align: left;
  display: flex;
  align-items: center;
}
</style>