<template>
    <div class="app-banner" :style="`min-height: ${swipeHeight};`">
        <Swipe :autoplay="5000" indicator-color="white" lazy-render>
            <SwipeItem v-for="(image, index) in images" :key="index" :style="`height: ${swipeHeight};`">
                <slot :value="image">
                    <img :src="image" @click="onClick(index)" />
                </slot>
            </SwipeItem>
        </Swipe>
    </div>
</template>

<script lang="ts" setup>
import { PropType, computed } from 'vue'
import { Swipe, SwipeItem } from 'vant'

const props = defineProps({
    images: {
        type: Array as PropType<string[]>,
        default: () => ([])
    },
    height: {
        type: [Number, String],
        default: 180,
    }
})

const emit = defineEmits(['click'])

const swipeHeight = computed(() => {
    if (typeof props.height === 'number') {
        return props.height + 'px'
    }
    return props.height
})

const onClick = (index: number) => {
    emit('click', index)
}
</script>

<style lang="less">
@import './index.less';
</style>