<template>
	<view class="banner">
		<view class="banner-item-photo" :style="{ width: '100%', height: data.height + 'px' }">
			<swiper class="banner-item-image" :circular="circular" :autoplay="autoplay" @change="handleChange" :class="{ corner: data.chamfer_style == 2 }">
				<swiper-item class="banner-item-cover" v-for="(item, index) in data.list" :key="index">
					<image lazy-load :src="item.image" mode="aspectFill" style="width: 100%; height: 100%" @click="jump(item.link)" />
				</swiper-item>
			</swiper>
			
			<view class="pointer" :style="{ marginBottom: margin + 'rpx', padding: '0 ' + (margin / 2) + 'rpx' }">
				<view class="pointer-content" :class="{ circle: data.indicator_style == 1, strip: data.indicator_style == 2 }" :style="{ textAlign: data.indicator_align }" v-if="data.indicator_style < 3">
					<text class="pointer-item" :style="{ 'background-color': activeColor(index) }" v-for="(i, index) in data.list.length" :key="index"></text>
				</view>
				<view class="pointer-text" v-if="data.indicator_style == 3" :style="{ textAlign: data.indicator_align }">
					<text>{{ current + 1 }}/{{ data.list.length }}</text>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script setup>
	import { navigateTo } from "@/el-ui/libs/navigate";
	import { ref,computed } from "vue";
	
	const props = defineProps({
		data: {
			type: Object,
			default: function() {
				return {};
			}
		}
	});
	
	let current  = ref(0);
	let autoplay = ref(true);
	let circular = ref(true);
	
	const height = computed(()=>{
		const res = uni.getSystemInfoSync();
		let _r = 0.4;
		return res.windowWidth * _r + 'px';
	});
	
	const margin = computed(()=>{
		return props.data.chamfer_style == 1 ? 10 : 20;
	});
	
	const activeColor = (index)=>{
	  return current.value == index ? props.data.indicator_active_color : props.data.indicator_color;
	}
	
	const jump = (value)=>{
		navigateTo(value.path);
	}
	
	const handleChange = (event)=>{
		current.value = event.detail.current;
	}
	
</script>

<style lang="scss">
.banner {
	box-sizing: content-box;

	.corner {
		padding: 32rpx;

		.banner-item-cover {
			box-sizing: content-box;
			-webkit-appearance: none;
			border-radius: 16rpx;
			overflow: hidden;
		}
	}

	.banner-item-image {
		width: 100%;
		height: 100%;
	}

	.banner-item-photo {
		position: relative;
		width: 750rpx;
		box-sizing: content-box;
	}
}

.pointer {
	position: absolute;
	bottom: 0;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	width: 100%;

	.circle .pointer-item {
		display: inline-block;
		width: 12rpx;
		height: 12rpx;
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 100%;
	}

	.strip .pointer-item {
		display: inline-block;
		width: 24rpx;
		height: 4rpx;
		background-color: #c5c5c5;
	}

	.pointer-item + .pointer-item {
		margin-left: 12rpx;
	}

	.pointer-content {
		margin: 0 40rpx;
		width: 100%;
		box-sizing: border-box;
		text-align: right;

		.active {
			background-color: #f44;
			opacity: 1;
		}
	}

	.pointer-text {
		margin: 0 40rpx;
		width: 100%;
		text-align: center;

		text {
			display: inline-block;
			min-width: 32rpx;
			height: 32rpx;
			padding: 0 10rpx;
			color: #fff;
			font-size: 24rpx;
			line-height: 32rpx;
			background: #000;
			border-radius: 16rpx;
			opacity: 0.3;
		}
	}
}
</style>