<!--
 * @Author: 王翠碧 1254597151@qq.com
 * @Date: 2023-05-22 22:41:29
 * @LastEditors: micky 1254597151@qq.com
 * @LastEditTime: 2023-12-22 15:38:18
 * @FilePath: \uniapp\src\components\widgets\banner\banner.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <view class="banner h-[400rpx] translate-y-0" v-if="content.data.length && content.enabled">
        <swiper @change="swiperChange" class="swiper h-full" :autoplay="true" circular>
            <swiper-item
                v-for="(item, index) in content.data"
                :key="index"
                @click="handleClick(item.link)"
            >
                <image
                    :src="getImageUrl(item.image)"
                    class="w-[100%] h-[100%]"
                    mode="scaleToFill"
                ></image>
            </swiper-item>
        </swiper>
        <view class="rowDot">
            <view v-for="(item, index) in content.data" :key="index" class="dots">
                <view :class="['dot', index === swiperCurrent ? 'active' : '']"></view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { useAppStore } from '@/stores/app'
import { navigateTo } from '@/utils/util'
import { ref, onMounted } from 'vue'

const props = defineProps({
    content: {
        type: Object,
        default: () => ({})
    },
    styles: {
        type: Object,
        default: () => ({})
    }
})
const { getImageUrl } = useAppStore()
const handleClick = (link: any) => {
    navigateTo(link)
}
const swiperCurrent = ref(0)
const swiperChange = (e: any) => {
    swiperCurrent.value = e.detail.current
}
onMounted(() => {
    console.log(props.content, 'content')
})
</script>

<style lang="scss">
.banner {
    position: relative;
    .rowDot {
        display: flex;
        position: absolute;
        bottom: 20rpx;
        left: calc((100% - 144rpx) / 2);
        .dots {
            flex-direction: row;
            justify-content: center;
            align-items: center;
            align-content: center;
            .dot {
                margin-right: 8rpx;
                width: 20rpx;
                height: 8rpx;
                opacity: 1;
                border-radius: 6rpx;
                background: #fff5f9;
            }
            .dot.active {
                width: 30rpx;
                background: $blue5;
            }
        }
    }
}
</style>
