<template>
	<view class="el-scroll-view" ref="el-scroll-view">
		<scroll-view class="el-scroll-view-warp" scroll-x @scroll="scrollHandler" @scrolltoupper="scrolltoupperHandler" @scrolltolower="scrolltolowerHandler" :show-scrollbar="false" :upper-threshold="0" :lower-threshold="0">
			<view class="el-scroll-view-content">
				<slot />
			</view>
		</scroll-view>
		
		<view class="el-scroll-view-indicator" v-if="indicator" :style="[addStyle(indicatorStyle)]">
			<view class="el-scroll-view-indicator-line" :style="[lineStyle]">
				<view class="el-scroll-view-indicator-bar" :style="[barStyle]" ref="el-scroll-view-indicator-bar"></view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { computed,watch,ref,onMounted,nextTick } from "vue";
	import { getClientRect,addStyle } from "../../libs/style.js";
	import { sleep } from "../../libs/utils.js";
	
	const props = defineProps({
		// 指示器的整体宽度
		indicatorWidth: {
		    type: [String, Number],
		    default: 50
		},
		// 滑块的宽度
		indicatorBarWidth: {
		    type: [String, Number],
		    default: 20
		},
		// 是否显示面板指示器
		indicator: {
		    type: Boolean,
		    default: true
		},
		// 指示器非激活颜色
		indicatorColor: {
		    type: String,
		    default: '#f2f2f2'
		},
		// 指示器的激活颜色
		indicatorActiveColor: {
		    type: String,
		    default: '#3c9cff'
		},
		// 指示器样式，可通过bottom，left，right进行定位
		indicatorStyle: {
		    type: [String, Object],
		    default: ''
		}
	});
	
	const emits   = defineEmits(["left","right"]);
	
	let scrollInfo = ref({
		scrollLeft: 0,
		scrollWidth: 0
	});
	
	let scrollWidth = ref(0);
	
	const lineStyle = computed(()=>{
		const style 		  = {};
		style.width 		  = props.indicatorWidth + 'px';
		style.backgroundColor = props.indicatorColor;
		return style;
	})
	
	const barStyle = computed(()=>{
		const style 			= {};
		const left 				= scrollInfo.value.scrollLeft;
		const width 			= scrollInfo.value.scrollWidth;
		const barAllMoveWidth 	= props.indicatorWidth - props.indicatorBarWidth;
		const x 				= left / (width - scrollWidth.value) * barAllMoveWidth;
		const num 				= isNaN(x) ? 0 : x;
		style.transform 		= `translateX(${ num }px)`;
		style.width 			= props.indicatorBarWidth + 'px';
		style.backgroundColor 	= props.indicatorActiveColor;
		return style;
	})
	
	const scrollHandler = (e)=>{
		scrollInfo.value = e.detail;
	}
	
	const scrolltoupperHandler = ()=>{
		emits('left');
		scrollInfo.value.scrollLeft = 0;
	}
	
	const scrolltolowerHandler = ()=>{
		emits('right');
		// scrollInfo.value.scrollLeft = props.indicatorWidth - props.indicatorBarWidth;
	}
	
	const getComponentWidth = async()=>{
		await sleep(30);
		getClientRect(".el-scroll-view").then(size => {
			scrollWidth.value = size.width
		})
	}
	
	onMounted(()=>{
		getComponentWidth();
	});
	
</script>

<style lang="scss" scoped>
	.el-scroll-view {
		padding-bottom: 10px;
		.el-scroll-view-warp {
			display: flex;
			flex-direction: row;
			.el-scroll-view-content {
				display: flex;
				flex-direction: row;
			}
		}
	}
	
	.el-scroll-view-indicator {
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 15px;
		.el-scroll-view-indicator-line {
			width: 60px;
			height: 4px;
			border-radius: 100px;
			overflow: hidden;
			.el-scroll-view-indicator-bar {
				width: 20px;
				height: 4px;
				border-radius: 100px;
			}
		}
	}
</style>