<script setup lang="ts">
import { useRouter } from 'vue-router';
import { bannerInfo } from '@/views/AD/hooks/useAD';
import { fetchBanners } from '@/hooks/request/banner';
import { computed } from 'vue';

const { banners } = fetchBanners();

const router = useRouter();
// const defineBanners = defineModel('banners');
// 如果定义了 banner ， 那么 banners 就不再初始化
// defineBanners.value && updateBanners(defineBanners.value);
const borderRadius = defineModel('borderRadius');
// 是否启用平铺展示
const stack = defineModel<boolean>('stack', { default: true });
// 上级传递的 banners
const bannersList = defineModel<any[]>('banners');
// 是否存在显示显示数量
const limit = defineModel<number>('limit');

function handleBannerClick(banner: any) {
  // 把对应的信息给 AD 的 hooks
  bannerInfo.value = banner;
  router.push({ name: 'ad', params: { code: banner.code } });
}

const currentBanners = computed(() => {
  if (bannersList.value) {
    return stack.value ? bannersList.value : bannersList.value?.slice(0, limit.value);
  }
  return stack.value ? banners.value : banners.value?.slice(0, limit.value);
});
</script>

<template>
  <van-swipe :autoplay="5000" indicator-color="white" v-if="stack">
    <van-swipe-item v-for="banner in currentBanners" :key="banner.code">
      <el-image
        class="img"
        :style="{ borderRadius: borderRadius + 'px' }"
        :src="banner.banner_address"
        fit="contain"
        @click="handleBannerClick(banner)"
      />
    </van-swipe-item>
  </van-swipe>
  <div v-else>
    <el-image
      v-for="banner in currentBanners"
      :key="banner.code"
      class="img"
      :style="{ borderRadius: borderRadius + 'px' }"
      :src="banner.banner_address"
      fit="contain"
      @click="handleBannerClick(banner)"
    />
  </div>
</template>

<style lang="scss" scoped>
@use '@/assets/css/theme' as *;

.img {
  border-radius: $card-radius;
}
</style>
