<template>
	<view class="indicator">
		<view class="indicator-box" v-if="indicatorMode === 'line'" :class="[`indicator-${indicatorMode}`]" :style="{ width: (lineWidth * length) + 'px', backgroundColor: indicatorInactiveColor }">
			<view class="indicator-line-bar" :style="[lineStyle]"></view>
		</view>
		<view class="indicator-box" v-if="indicatorMode === 'dot'">
			<view class="indicator-dot" v-for="(item, index) in length" :key="index" :class="[index === current && 'active']" :style="[dotStyle(index)]"></view>
		</view>
	</view>
</template>

<script setup>
	import { computed,watch,ref,onMounted,nextTick } from "vue";
	import { unit } from "../../libs/utils.js";
	
	const props = defineProps({
		// 轮播的长度
		length: {
		    type: [String, Number],
		    default: 0
		},
		// 当前处于活动状态的轮播的索引
		current: {
		    type: [String, Number],
		    default: 0
		},
		// 指示器非激活颜色
		indicatorActiveColor: {
		    type: String,
		    default: ''
		},
		// 指示器的激活颜色
		indicatorInactiveColor: {
		    type: String,
		    default: ''
		},
		// 指示器模式，line-线型，dot-点型
		indicatorMode: {
		    type: String,
		    default: 'line'
		}
	});
	
	const emits   = defineEmits(["fixed"]);
	
	let lineWidth = ref(22);
	
	const lineStyle = computed(()=>{
		let style 				= {};
		style.width 			= unit(lineWidth.value,'px');
		style.transform 		= `translateX(${ unit((props.current * lineWidth.value),'px') })`;
		style.backgroundColor 	= props.indicatorActiveColor;
		return style;
	});
	
	const dotStyle = computed(()=>{
		return index => {
			let style = {};
			style.backgroundColor = index === props.current ? props.indicatorActiveColor : props.indicatorInactiveColor;
			return style;
		}
	});
	
</script>

<style lang="scss" scoped>
	.indicator {
		.indicator-box {
			display: flex;
			flex-direction: row;
			&.indicator-line {
				border-radius: 100px;
				height: 4px;
				.indicator-line-bar {
					width: 22px;
					height: 4px;
					border-radius: 100px;
					background-color: #FFFFFF;
					transition: transform 0.3s;
				}
			}
			.indicator-dot {
				width: 5px;
				height: 5px;
				border-radius: 100px;
				margin: 0 4px;
				.active {
					width: 12px;
				}
			}
		}
	}
</style>