<template>
  <swiper class="banner-swiper" :indicator-dots="true" :autoplay="false" circular>
    <swiper-item v-for="(v, idx) in videos" :key="'v' + idx">
      <video class="banner-swiper__video" :src="fullUrl(v)" controls />
    </swiper-item>
    <swiper-item v-for="(img, idx) in images" :key="'i' + idx">
      <image class="banner-swiper__image" :src="fullUrl(img)" mode="aspectFill" />
    </swiper-item>
  </swiper>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { BASE_URL } from '../utils/request'

const props = defineProps<{
  images: string[]
  video?: string | string[]
}>()

const videos = computed(() => {
  if (!props.video) return []
  if (Array.isArray(props.video)) return props.video
  return [props.video]
})

function fullUrl(path: string): string {
  if (!path) return ''
  if (path.startsWith('http')) return path
  return BASE_URL + path
}
</script>

<style scoped>
.banner-swiper { width: 100%; height: 600rpx; }
.banner-swiper__image { width: 100%; height: 600rpx; }
.banner-swiper__video { width: 100%; height: 600rpx; }
</style>
