<template>
	<scroll-view scroll-x="true" scroll-with-animation :scroll-left="scrollLeft" class="steps-scroll-container"
		ref="scrollViewRef">
		<view class="steps-content" ref="contentRef">
			<view v-for="(item,index) in list" class="step-item" :key="index" :data-index="index" 
			:class="'step_'+index"
			ref="stepItemRefs">
				<view class="step-inner">
					<view class="index" :class="{active:index<=cur}">
						<text>{{index+1}}</text>
					</view>
					<view class="step-text color-999" :class="{'color-main':index<=cur}" @click="handleClick(index)">
						{{item}}
					</view>
				</view>
				<view class="step-arrow" v-if="index!=list.length-1">
					<up-icon name="arrow-rightward" size="16" :color="isActive(index)?'#318AFE':'#999'"></up-icon>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
	import {
		ref,
		nextTick,
		getCurrentInstance,
		watch
	} from 'vue';

	const cur = defineModel({
		default: 0
	})
	const scrollLeft = ref(0)
	const scrollViewRef = ref(null)
	const contentRef = ref(null) // 内容容器ref
	const stepItemRefs = ref([]) // 步骤项ref数组
	const instance = getCurrentInstance()

	function isActive(index) {
		return index <= cur.value
	}

	// 核心：精准居中计算（基于元素相对于内容容器的偏移）
	const calcScrollCenter = async (index) => {
		try {
			console.log('calcScrollCenter');
			const query = uni.createSelectorQuery().in(instance)

			// 1. 获取滚动容器宽度
			const [scrollViewRect] = await new Promise(resolve => {
				query.select('.steps-scroll-container').boundingClientRect(rect => resolve([
					rect
				])).exec()
			})
			const scrollViewWidth = scrollViewRect?.width || 0
			// 2. 获取当前步骤项的布局信息
			const [itemRect] = await new Promise(resolve => {
				query.select(`.step_${index}`).boundingClientRect(rect =>
					resolve([rect])).exec()
			})
			console.log('itemRect',itemRect);
			// 3. 获取内容容器的布局信息
			const [contentRect] = await new Promise(resolve => {
				query.select('.steps-content').boundingClientRect(rect => resolve([rect]))
					.exec()
			})

			if (!itemRect || !contentRect) return

			// 关键修正：元素相对于内容容器的左偏移（而非视口）
			const itemOffsetLeft = itemRect.left - contentRect.left
			// 居中公式：滚动距离 = 元素偏移 - (容器宽度/2) + (元素宽度/2)
			let targetScrollLeft = itemOffsetLeft - (scrollViewWidth / 2) + (itemRect.width / 2)

			// 4. 计算最大可滚动距离（边界限制）
			const maxScrollLeft = Math.max(0, contentRect.width - scrollViewWidth)
			// 限制滚动范围，避免超出边界
			targetScrollLeft = Math.max(0, Math.min(targetScrollLeft, maxScrollLeft))

			// 5. 设置滚动距离（强制整数，避免小数导致的偏移）
			scrollLeft.value = Math.round(targetScrollLeft)

			console.log('scrollLeft', scrollLeft.value);
		} catch (e) {
			console.error('计算居中失败：', e)
		}
	}


	const emits = defineEmits(['itemClick'])
	// 点击事件
	const handleClick = (index) => {
		if (cur.value === index) return
		if (index > cur.value) {
			emits('itemClick', index)
			return
		}
		cur.value = index
		// calcScrollCenter(index)
	}

	// 初始化居中
	nextTick(() => {
		calcScrollCenter(cur.value)
	})

	watch(() => cur.value, (newval) => {
		calcScrollCenter(newval)
	})

	// 步骤列表
	const list = ref(['基础信息', '法人信息', '营业执照信息', '门店信息', '结算信息'])
</script>

<style lang="scss" scoped>
	// 滚动容器：固定宽度，隐藏滚动条
	.steps-scroll-container {
		width: 100%;
		white-space: nowrap;
		box-sizing: border-box;
		overflow-x: auto;

		// 隐藏滚动条（三端兼容）
		::-webkit-scrollbar {
			display: none;
		}

		-ms-overflow-style: none;
		scrollbar-width: none;
	}

	// 内容容器：inline-flex，宽度自适应
	.steps-content {
		display: inline-flex;
		align-items: center;
		padding: 10rpx 0;
	}

	// 单个步骤项：统一间距和布局
	.step-item {
		display: inline-flex;
		align-items: center;
		margin: 0 10rpx; // 统一间距
		box-sizing: border-box;
	}

	// 步骤内部布局
	.step-inner {
		display: inline-flex;
		align-items: center;
	}

	// 数字索引
	.index {
		border: 1px solid #999;
		width: 40rpx;
		height: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		margin-right: 10rpx;
		color: #999;

		&.active {
			border-color: $my-main-color;
			color: $my-main-color;
		}
	}

	// 步骤文字
	.step-text {
		white-space: nowrap;
		font-size: 28rpx;
	}

	// 箭头容器
	.step-arrow {
		padding: 0 10rpx;
		margin-top: 2rpx;
	}

	// 样式补充
	.color-main {
		color: $my-main-color !important;
	}

	.color-999 {
		color: #999;
	}
</style>