<template>
	<view class="viewswiper">
		<u-swiper :list="carousel" keyName="coverImg" @change="e => current = e.current" indicatorStyle="right: 20px" height='484'>
			<view slot="indicator" class="indicator">
				<view class="indicator__dot" v-for="(item, index) in carousel" :key="index"
					:class="[index === current && 'indicator__dot--active']"
					:style="[index === current && {'width':16+'px'}]">
				</view>
			</view>
		</u-swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0
			};
		},
		props: {
			carousel: {
				type: Array,
				default () {
					return []
				}
			},
			title: {
				type: String,
				default: '每日特价'
			},
			img: {
				type: String,
				default: ''
			},
		},
	};
</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>