<template>
	<view class="viewswiper" v-if="carousel">
		<up-swiper :list="carousel" keyName="coverImg" @change="e => current = e.current" indicatorStyle="right: 20px" height='242'>
			<template #indicator>
				<view class="indicator">
					<view class="indicator__dot" v-for="(item, index) in carousel" :key="index"
						:class="[index === current && 'indicator__dot--active']">
					</view>
				</view>
			</template>
		</up-swiper>
	</view>
</template>

<script setup>
	import { ref,defineProps } from 'vue';
	const props = defineProps({
	  carousel: Array
	});
	const current = ref(0)
</script>

<style scoped lang="scss">
	.viewswiper {
		.indicator {
			margin-bottom: 46rpx;
			@include flex(row);
			justify-content: center;

			&__dot {
				height: 6px;
				width: 6px;
				border-radius: 100px;
				background-color: rgba(255, 255, 255, 0.35);
				margin: 0 5px;
				transition: background-color 0.3s;

				&--active {
					background-color: #ffffff;
				}
			}
		}

		.indicator-num {
			padding: 2px 0;
			background-color: rgba(0, 0, 0, 0.35);
			border-radius: 100px;
			width: 35px;
			@include flex;
			justify-content: center;

			&__text {
				color: #FFFFFF;
				font-size: 12px;
			}
		}
	}
</style>