<!--
 * @Author: micky 1254597151@qq.com
 * @Date: 2023-08-14 15:38:40
 * @LastEditors: micky 1254597151@qq.com
 * @LastEditTime: 2023-11-24 14:36:17
 * @FilePath: \housekeeping-uniapp\src\components\la-swiper\la-swiper.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <view class="banner h-[560rpx] bg-white translate-y-0">
        <swiper
            class="swiper h-full"
            :indicator-dots="content.length && content.length > 1"
            indicator-active-color="#2468f2"
            :autoplay="true"
            v-if="content.length"
        >
            <swiper-item v-for="(item, index) in content" :key="index">
                <u-image
                    mode="scaleToFill"
                    width="100%"
                    height="100%"
                    :src="item"
                    :lazy-load="true"
                    @click="handlePreviewImage(index)"
                />
            </swiper-item>
        </swiper>
        <u-empty v-else></u-empty>
    </view>
</template>

<script setup lang="ts">
const props = defineProps({
    content: {
        type: Array,
        default: () => []
    },
    styles: {
        type: Object,
        default: () => ({})
    }
})
const handlePreviewImage = (index: number) => {
    if (!props.content.length) return
    uni.previewImage({
        urls: props.content as string[],
        current: index
    })
}
</script>
