<template>
  <div class="w-full mb-[6px]">
    <swiper class="w-full h-[120px] rounded-[8px]" circular :indicator-dots="activityList.length > 1"
      indicator-color="#FFFFFF" indicator-active-color="#00A6FF" :autoplay="autoplay" :interval="interval"
      :duration="duration">
      <swiper-item v-for="item in activityList" :key="item.id">
        <div class="relative block h-[120px] leading-[120px] text-center" @click="handleClick()">
          <img class="w-full h-full rounded-[8px] block" :src="item.activityCover">
          <div
            class="absolute right-3 bottom-3 bg-[#ffeb00] text-[#333] text-[14px] font-medium py-1 px-3 rounded-[20px] leading-[1.5]">
            {{ commandModel.title }}
          </div>
        </div>
      </swiper-item>
    </swiper>
  </div>
</template>

<script setup>
import { computed, ref, defineProps } from "vue";
import { useI18n } from "vue-i18n";
import { emitter } from '@/utils/events'
import { SEND_MESSAGE_COMMAND_TYPE } from "@/constants/constant";
import { Command } from "@/constants/ChatModel";

const { t } = useI18n();
const commandModel = computed(() => ({
  icon: "",
  title: t("home.activity.quickBooking"),
  type: Command.quickBooking,
}));

const autoplay = ref(true);
const interval = ref(3000);
const duration = ref(500);

const props = defineProps({
  activityList: {
    type: Array,
    default: [],
  },
});

const handleClick = () => {
  emitter.emit(SEND_MESSAGE_COMMAND_TYPE, commandModel.value);
};
</script>
