<template>
  <div class="container">
    <swiper class="swiper" 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="swiper-item" @click="handleClick()">
          <img class="swiper-img" :src="item.activityCover">
          <div class="corner-btn">{{ commandModel.title }}</div>
        </div>
      </swiper-item>
    </swiper>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { SEND_MESSAGE_COMMAND_TYPE } from "@/constants/constant";

const commandModel = ref({
  icon: "",
  title: "快速预定",
  type: Command.quickBooking,
});

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

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

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

<style scoped lang="scss">
@import "./styles/index.scss";
</style>
