import { Image, Loading, Swipe, SwipeItem } from "vant";
import { defineComponent, onMounted, ref } from "vue";
import styles from "./index.module.less";
import request from "@/helpers/request";
import { BannerItem } from "@/views/home/type";
import TheImage from "@/components/TheImage";

export default defineComponent({
  name: "banner",
  setup() {
    //轮播
    const bannerList = ref<BannerItem[]>([]);
    const getBannerList = async () => {
      try {
        const { data } = await request.get("/api-website/open/banner/list");
        if (data && Array.isArray(data)) {
          bannerList.value = data;
        }
      } catch (error) {}
    };
    onMounted(() => {
      getBannerList();
    });

    return () => (
      <Swipe class={styles.swiper} autoplay={3000}>
        {bannerList.value.map((n: BannerItem) => (
          <SwipeItem>
            <TheImage src={n.coverImage} objectFit="cover" />
          </SwipeItem>
        ))}
      </Swipe>
    );
  },
});
