<template>
	<div class="w-1200px">
		<el-row>
			<el-col :span="4">
				<el-anchor
					:container="containerRef"
					direction="vertical"
					type="default"
					:offset="30"
					@click="handleClick"
				>
					<el-anchor-link href="#part1" title="part1">
						<template #title>
							<el-text tag="b">part1</el-text>
							<!-- <span style="color: red; font-size: 16px;">part1</span> -->
						</template>
					</el-anchor-link>
					<el-anchor-link href="#part2" title="part2" />
					<el-anchor-link href="#part3" title="part3" />
				</el-anchor>
			</el-col>
			<el-col :span="20">
				<div ref="containerRef" style="height: 300px; overflow-y: auto">
					<div
						id="part1"
						style="
							height: 300px;
							background: rgba(255, 0, 0, 0.02);
						"
					>
						part1
					</div>
					<div
						id="part2"
						style="
							height: 300px;
							background: rgba(0, 255, 0, 0.02);
						"
					>
						part2
					</div>
					<div
						id="part3"
						style="
							height: 300px;
							background: rgba(0, 0, 255, 0.02);
						"
					>
						part3
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const containerRef = ref<HTMLElement | null>(null)
const handleSelect = (link) => {
	ElMessage({
		message: `选择了锚点：${link}`,
		type: 'success'
	})
}

const handleClick = (e,link) => {
	e.preventDefault();
	const el = document.getElementById(link.split("#")[1]);
	if (el) {
		el.scrollIntoView({ behavior: "smooth" });
	}
};

</script>
 
<!-- <template>
	<div>
		<h2>Anchor 示例</h2>

		<el-anchor
			:offset="100"
			:container="containerRef"
			direction="vertical"
			type="default"
		>
			<el-anchor-link href="#section1" title="部分一"/>
			<el-anchor-link href="#section2" title="部分二"/>
			<el-anchor-link href="#section3" title="部分三"/>
		</el-anchor>

		<el-anchor :offset="100" :scroll-duration="800" :container="containerRef">
			<el-anchor-link href="#section4" title="部分四"></el-anchor-link>
			<el-anchor-link href="#section5" title="部分五"></el-anchor-link>
		</el-anchor>

		<div id="custom-container" style="height: 1000px; overflow-y: auto;" :container="containerRef">
			<el-anchor :container="'#custom-container'" :offset="50">
				<el-anchor-link href="#section6" title="部分六"></el-anchor-link>
				<el-anchor-link href="#section7" title="部分七"></el-anchor-link>
			</el-anchor>
		</div>

		<el-anchor :offset="100" @select="handleSelect" :container="containerRef">
			<el-anchor-link href="#section8" title="部分八"></el-anchor-link>
			<el-anchor-link href="#section9" title="部分九"></el-anchor-link>
		</el-anchor>

		<div ref="containerRef" style="height: 900px; overflow-y: auto">
			<div id="section1">部分一的内容</div>
			<div id="section2">部分二的内容</div>
			<div id="section3">部分三的内容</div>
			<div id="section4">部分四的内容</div>
			<div id="section5">部分五的内容</div>
			<div id="section6">部分六的内容</div>
			<div id="section7">部分七的内容</div>
			<div id="section8">部分八的内容</div>
			<div id="section9">部分九的内容</div>
		</div>
	</div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const containerRef = ref(null)

const handleSelect = (link) => {
	ElMessage({
		message: `选择了锚点：${link}`,
		type: 'success'
	})
}
const handleClick = (e) => {
	e.preventDefault()
}

</script> -->