<template>
	<div class="test-wrapper">
		<div class="test-container" :style="isTestPage ? 'padding-right: 110px' : ''">
			<!-- 1. 面包屑组件 -->
			<v-card id="section-1" class="my-3" title="1. 面包屑组件 (vtk-breadcrumb)">
			<v-card-text>
				<div class="mb-6">
					<h3 class="mb-3">基础用法</h3>
					<vtk-breadcrumb :items="breadcrumbItems1" />
				</div>

				<v-divider class="my-4" />

				<div class="mb-6">
					<h3 class="mb-3">指定返回路径</h3>
					<vtk-breadcrumb :items="breadcrumbItems2" back-to="/home" back-text="返回首页" />
				</div>

				<v-divider class="my-4" />

				<div class="mb-6">
					<h3 class="mb-3">不显示返回按钮</h3>
					<vtk-breadcrumb :items="breadcrumbItems3" :show-back="false" />
				</div>

				<v-divider class="my-4" />

				<div class="mb-6">
					<h3 class="mb-3">监听返回事件</h3>
					<vtk-breadcrumb :items="breadcrumbItems4" @back="handleBreadcrumbBack" />
				</div>
			</v-card-text>
		</v-card>

		<!-- 2. 步骤条组件 -->
		<v-card id="section-2" class="my-3" title="2. 步骤条组件 (vtk-stepper)">
			<v-card-text>
				<vtk-stepper :el="currentStep" list="基础信息,执行属性,时间属性,完成" class="mx-auto" style="max-width: 1200px">
					<template slot="1" v-if="currentStep == 1">
						<v-card flat>
							<v-card-text class="text-center py-8">
								<v-icon size="64" color="primary">mdi-information-outline</v-icon>
								<p class="text-h6 mt-4">第一步：基础信息</p>
							</v-card-text>
							<v-card-actions>
								<v-spacer />
								<v-btn color="primary" @click="currentStep = 2">下一步</v-btn>
								<v-spacer />
							</v-card-actions>
						</v-card>
					</template>
					<template slot="2" v-else-if="currentStep == 2">
						<v-card flat>
							<v-card-text class="text-center py-8">
								<v-icon size="64" color="success">mdi-cog-outline</v-icon>
								<p class="text-h6 mt-4">第二步：执行属性</p>
							</v-card-text>
							<v-card-actions>
								<v-spacer />
								<v-btn @click="currentStep = 1">上一步</v-btn>
								<v-btn color="primary" @click="currentStep = 3" class="ml-2">下一步</v-btn>
								<v-spacer />
							</v-card-actions>
						</v-card>
					</template>
					<template slot="3" v-else-if="currentStep == 3">
						<v-card flat>
							<v-card-text class="text-center py-8">
								<v-icon size="64" color="warning">mdi-clock-outline</v-icon>
								<p class="text-h6 mt-4">第三步：时间属性</p>
							</v-card-text>
							<v-card-actions>
								<v-spacer />
								<v-btn @click="currentStep = 2">上一步</v-btn>
								<v-btn color="primary" @click="currentStep = 4" class="ml-2">下一步</v-btn>
								<v-spacer />
							</v-card-actions>
						</v-card>
					</template>
					<template slot="4" v-else>
						<v-card flat>
							<v-card-text class="text-center py-8">
								<v-icon size="64" color="success">mdi-check-circle-outline</v-icon>
								<p class="text-h6 mt-4 green--text">配置完成</p>
							</v-card-text>
							<v-card-actions>
								<v-spacer />
								<v-btn @click="currentStep = 3">上一步</v-btn>
								<v-btn color="primary" @click="currentStep = 1" class="ml-2">重新开始</v-btn>
								<v-spacer />
							</v-card-actions>
						</v-card>
					</template>
				</vtk-stepper>
			</v-card-text>
		</v-card>

		<!-- 3. 表单组件集合 -->
		<v-card id="section-3" class="my-3" title="3. 表单组件 (vtk-form-item)">
			<v-card-text>
				<v-form ref="form" v-model="valid">
					<!-- 输入框 -->
					<vtk-form-item label="调度名称：" must>
						<v-text-field v-model="entity.scheduleName" placeholder="请输入调度名称" :rules="[(v) => !!v || '调度名称不能为空']" clearable density="compact" variant="outlined" />
					</vtk-form-item>

					<!-- 单选框 -->
					<vtk-form-item label="调度过期策略：" must>
						<vtk-radio v-model="entity.scheduleMisfire" color="primary" inline :mandatory="true" list="ADMIN:管理员/USER:普通用户/VIP:VIP用户" placeholder="请选择过期策略" :rules="[(v) => !!v || '过期策略不能为空']" />
					</vtk-form-item>

					<!-- 多选框 -->
					<vtk-form-item label="管理人员：" must>
						<vtk-checkbox v-model="entity.scheduleMisfireArr" inline list="ADMIN:管理员/USER:普通用户/VIP:VIP用户" placeholder="请选择管理人员" :rules="[(v) => !!v || '管理人员不能为空']" />
					</vtk-form-item>

					<!-- 下拉选择框 -->
					<vtk-form-item label="调度路由策略：" must>
						<vtk-select
							v-model="entity.scheduleRoutes"
							placeholder="请选择调度路由策略"
							list="LAST:LAST (取尾)/FIRST:FIRST (取头)/ROUND:ROUND (轮流)/RANDOM:RANDOM (随机)/FAILOVER:FAILOVER (正常优先)/BUSYOVER:BUSYOVER (空闲优先)"
							:rules="[(v) => !!v || '调度路由策略不能为空']"
							variant="outlined"
							density="compact"
						/>
					</vtk-form-item>

					<!-- 多选下拉框 -->
					<vtk-form-item label="多选路由策略：" must>
						<vtk-select
							v-model="entity.scheduleRoutesMulti"
							placeholder="请选择多个路由策略"
							list="LAST:LAST (取尾)/FIRST:FIRST (取头)/ROUND:ROUND (轮流)/RANDOM:RANDOM (随机)"
							:rules="[(v) => !!v || '路由策略不能为空']"
							variant="outlined"
							density="compact"
							:multi="true"
						/>
					</vtk-form-item>

					<!-- 日期范围选择器 -->
					<vtk-form-item label="日期范围：" must>
						<vtk-date-picker v-model="entity.dateRange" placeholder="请选择开始日期和结束日期" @change="handleChange" :rules="[(v) => !!v || '开始日期和结束日期不能为空']" />
					</vtk-form-item>

					<!-- 区域选择组件 -->
					<vtk-form-item label="所属地区：" must>
						<vtk-area v-model="entity.areaCode" :max-area="12" area-style="width: 100%" @update:modelValue="handleAreaChange" />
					</vtk-form-item>
				</v-form>
			</v-card-text>
		</v-card>

		<!-- 4. 部门选择组件 -->
		<v-card id="section-4" class="my-3" title="4. 部门选择组件 (vtk-dept)">
			<v-card-text>
				<v-row>
					<v-col cols="12" md="6">
						<div class="mb-4">
							<h3 class="mb-3">单选模式</h3>
							<v-text-field placeholder="单选模式" @click="addUser()" v-model="selectedDeptSingle"
								 readonly density="compact"
								variant="underlined"></v-text-field>
							<vtk-dept ref="deptRefSingle" :multiple="false" @selected="handleDeptSelected" />
							<div v-if="selectedDeptSingle" class="mt-3 pa-3 bg-grey-lighten-4 rounded">
								<p class="text-subtitle-2">已选择部门：</p>
								<p class="text-body-2">{{ selectedDeptSingle }}</p>
							</div>
						</div>
					</v-col>
					<v-col cols="12" md="6">
						<div class="mb-4">
							<h3 class="mb-3">多选模式</h3>
							<v-text-field placeholder="多选模式" @click="addUser()" v-model="selectedDeptMultiple"
								 readonly density="compact"
								variant="underlined"></v-text-field>
							<vtk-dept ref="deptRefMultiple" :multiple="true" @selected="handleDeptMultiSelected" />
							<div v-if="selectedDeptMultiple && selectedDeptMultiple.length > 0" class="mt-3 pa-3 bg-grey-lighten-4 rounded">
								<p class="text-subtitle-2">已选择部门：</p>
								<p class="text-body-2">{{ selectedDeptMultiple.join(', ') }}</p>
							</div>
						</div>
					</v-col>
				</v-row>
			</v-card-text>
		</v-card>

		<!-- 5. 消息提示组件 -->
		<v-card id="section-5" class="my-3" title="5. 消息提示 (proxy.$vtk.message)">
			<v-card-text>
				<v-row>
					<v-col cols="12" md="4">
						<div class="mb-4">
							<h3 class="mb-3">Toast 提示</h3>
							<v-btn color="success" @click="showToastSuccess" class="mb-2" block>成功提示</v-btn>
							<v-btn color="error" @click="showToastError" class="mb-2" block>错误提示</v-btn>
							<v-btn color="warning" @click="showToastWarning" class="mb-2" block>警告提示</v-btn>
							<v-btn color="info" @click="showToastInfo" block>信息提示</v-btn>
						</div>
					</v-col>
					<v-col cols="12" md="4">
						<div class="mb-4">
							<h3 class="mb-3">Loading 加载</h3>
							<v-btn color="primary" @click="showLoading" class="mb-2" block>显示加载中</v-btn>
						</div>
					</v-col>
					<v-col cols="12" md="4">
						<div class="mb-4">
							<h3 class="mb-3">Confirm 确认</h3>
							<v-btn color="primary" @click="showConfirmDelete" class="mb-2" block>删除确认</v-btn>
							<v-btn color="primary" @click="showConfirmSave" block>保存确认</v-btn>
						</div>
					</v-col>
				</v-row>
			</v-card-text>
		</v-card>

		<!-- 6. 搜索组件 -->
		<v-card id="section-6" class="my-3" title="6. 搜索组件 (vtk-search)">
			<v-card-text>
				<div class="d-flex justify-end">
					<vtk-search styles="width:320px">
						<vtk-select
							v-model="searchValue"
							placeholder="请选择搜索条件"
							list="NAME:按名称/ID:按ID/STATUS:按状态"
							variant="outlined"
							density="compact"
						/>
					</vtk-search>
				</div>
			</v-card-text>
		</v-card>

		<!-- 7. 数字翻牌器组件 -->
		<v-card id="section-7" class="my-3" title="7. 数字翻牌器 (vtk-count)">
			<v-card-text>
				<v-row>
					<v-col cols="12" md="3">
						<div class="text-center">
							<p class="text-subtitle-2 mb-2">基础用法</p>
							<vtk-count :start="0" :end="12345" :duration="2000" />
						</div>
					</v-col>
					<v-col cols="12" md="3">
						<div class="text-center">
							<p class="text-subtitle-2 mb-2">带颜色</p>
							<vtk-count :start="0" :end="43143" :duration="2000" color="#ff5722" />
						</div>
					</v-col>
					<v-col cols="12" md="3">
						<div class="text-center">
							<p class="text-subtitle-2 mb-2">带后缀</p>
							<vtk-count :start="0" :end="9999" :duration="2000" color="#4caf50" suffix="次" />
						</div>
					</v-col>
					<v-col cols="12" md="3">
						<div class="text-center">
							<p class="text-subtitle-2 mb-2">带前缀</p>
							<vtk-count :start="0" :end="88888" :duration="2000" color="#2196f3" prefix="¥" />
						</div>
					</v-col>
				</v-row>
			</v-card-text>
		</v-card>

		<!-- 8. 图片组件 -->
		<v-card id="section-8" class="my-3" title="8. 图片组件 (vtk-img)">
			<v-card-text>
				<v-row>
					<v-col v-for="(image, index) in imageList" :key="index" cols="12" sm="6" md="4" lg="3">
						<vtk-img :src="image.url" :title="image.title" :description="image.description" :image-list="imageList" :index="index" :aspect-ratio="16 / 9" cover class="image-item" />
					</v-col>
				</v-row>
			</v-card-text>
		</v-card>

		<!-- 9. PDF组件 -->
		<v-card id="section-9" class="my-3" title="9. PDF组件 (vtk-pdf)">
			<v-card-text>
				<v-row>
					<v-col v-for="(pdf, index) in pdfList" :key="index" cols="12" sm="6" md="4" lg="3">
						<vtk-pdf :src="pdf.url" :title="pdf.title" :description="pdf.description" :aspect-ratio="16 / 9" class="pdf-item" />
					</v-col>
				</v-row>
			</v-card-text>
		</v-card>

		<!-- 10. 数据表格与分页组件 -->
		<v-card id="section-10" class="my-3" title="10. 数据表格与分页 (vtk-page)">
			<v-card-text>
				<v-data-table :headers="headers" :items="paginatedItems" :items-per-page="pageData.limit" hide-default-footer class="elevation-0">
					<template v-slot:item.status="{ item }">
						<v-chip :color="getStatusColor(item.status)" size="small">
							{{ item.status }}
						</v-chip>
					</template>
					<template v-slot:item.actions="{ item }">
						<v-btn variant="outlined" color="primary" icon size="small" @click="viewItem(item)">
							<v-icon>mdi-eye</v-icon>
						</v-btn>
						<v-btn variant="outlined" color="primary" icon size="small" @click="editItem(item)">
							<v-icon>mdi-pencil</v-icon>
						</v-btn>
						<v-btn variant="outlined" color="primary" icon size="small" @click="deleteItem(item)">
							<v-icon>mdi-delete</v-icon>
						</v-btn>
					</template>
				</v-data-table>

				<!-- 分页组件 -->
				<div class="pagination-wrapper pt-3">
					<vtk-page :page-data="pageData" :page-sizes="[5, 10, 20]" @page-change="handlePageChange" />
				</div>
			</v-card-text>
		</v-card>

		<!-- 11. 过滤器展示 -->
		<v-card id="section-11" class="my-3" title="11. 过滤器 (proxy.$vtk.filters)">
			<v-card-text>
				<v-row>
					<v-col cols="12" md="6">
						<div class="mb-4">
							<p class="text-subtitle-2 mb-2">手机号脱敏：</p>
							<p class="text-body-1">原始: 13812345678</p>
							<p class="text-body-1 text-primary">过滤后: {{ proxy.$vtk.filters.mobile("13812345678") }}</p>
						</div>
					</v-col>
					<v-col cols="12" md="6">
						<div class="mb-4">
							<p class="text-subtitle-2 mb-2">身份证脱敏：</p>
							<p class="text-body-1">原始: 110101199001011234</p>
							<p class="text-body-1 text-primary">过滤后: {{ proxy.$vtk.filters.idcard("110101199001011234") }}</p>
						</div>
					</v-col>
				</v-row>
			</v-card-text>
		</v-card>

		<!-- 查看详情对话框 -->
		<v-dialog v-model="dialogView" max-width="600px">
			<v-card>
				<v-card-title>
					<span class="text-h5">任务详情</span>
				</v-card-title>
				<v-card-text v-if="selectedItem">
					<v-list>
						<v-list-item>
							<v-list-item-title>ID:</v-list-item-title>
							<v-list-item-subtitle>{{ selectedItem.id }}</v-list-item-subtitle>
						</v-list-item>
						<v-list-item>
							<v-list-item-title>任务名称:</v-list-item-title>
							<v-list-item-subtitle>{{ selectedItem.name }}</v-list-item-subtitle>
						</v-list-item>
						<v-list-item>
							<v-list-item-title>状态:</v-list-item-title>
							<v-list-item-subtitle>
								<v-chip :color="getStatusColor(selectedItem.status)" size="small">
									{{ selectedItem.status }}
								</v-chip>
							</v-list-item-subtitle>
						</v-list-item>
						<v-list-item>
							<v-list-item-title>负责人:</v-list-item-title>
							<v-list-item-subtitle>{{ selectedItem.assignee }}</v-list-item-subtitle>
						</v-list-item>
						<v-list-item>
							<v-list-item-title>创建时间:</v-list-item-title>
							<v-list-item-subtitle>{{ selectedItem.createTime }}</v-list-item-subtitle>
						</v-list-item>
						<v-list-item>
							<v-list-item-title>描述:</v-list-item-title>
							<v-list-item-subtitle>{{ selectedItem.description }}</v-list-item-subtitle>
						</v-list-item>
					</v-list>
				</v-card-text>
				<v-card-actions>
					<v-spacer></v-spacer>
					<v-btn color="primary" @click="dialogView = false">关闭</v-btn>
				</v-card-actions>
			</v-card>
		</v-dialog>
		</div>

		<!-- 右侧浮动锚点导航 -->
		<nav class="anchor-nav">
			<div
				v-for="section in sections"
				:key="section.id"
				class="anchor-item"
				:class="{ 'anchor-item--active': activeSection === section.id }"
				@click="scrollToSection(section.id)"
			>
				<span class="anchor-dot"></span>
				<span class="anchor-label">{{ section.label }}</span>
			</div>
		</nav>
	</div>
</template>

<script setup>
import { ref, computed, reactive, onMounted, onUnmounted, getCurrentInstance } from "vue";
import { useRoute } from 'vue-router';
const { proxy } = getCurrentInstance();
const route = useRoute();
const isTestPage = computed(() => route.path.includes('mis/template/test'));

// 锚点导航
const sections = [
	{ id: 'section-1', label: '面包屑' },
	{ id: 'section-2', label: '步骤条' },
	{ id: 'section-3', label: '表单' },
	{ id: 'section-4', label: '部门选择' },
	{ id: 'section-5', label: '消息提示' },
	{ id: 'section-6', label: '搜索' },
	{ id: 'section-7', label: '数字翻牌' },
	{ id: 'section-8', label: '图片' },
	{ id: 'section-9', label: 'PDF' },
	{ id: 'section-10', label: '表格分页' },
	{ id: 'section-11', label: '过滤器' },
]
const activeSection = ref('section-1')
let observer = null
let isManualScroll = false

const scrollToSection = (id) => {
	const el = document.getElementById(id)
	if (el) {
		isManualScroll = true
		activeSection.value = id
		el.scrollIntoView({ behavior: 'smooth', block: 'start' })
		setTimeout(() => { isManualScroll = false }, 800)
	}
}

// 控制台输出测试
console.log("request", proxy.$vtk.request);
console.log("Storage", proxy.$vtk.storage);
console.log("Validation", proxy.$vtk.Validation);
console.log("Message", proxy.$vtk.message);
console.log("filter", proxy.$vtk.filters.idcard("110101199001011234"));

// 面包屑测试数据
const breadcrumbItems1 = ref([
	{ title: "首页", to: "#" },
	{ title: "测试页面", to: "#" },
	{ title: "组件测试" },
]);

const breadcrumbItems2 = ref([
	{ title: "管理中心", to: "#" },
	{ title: "系统配置", to: "#" },
	{ title: "用户管理", to: "#" },
	{ title: "用户详情" },
]);

const breadcrumbItems3 = ref([
	{ title: "产品", to: "#" },
	{ title: "分类管理", to: "#" },
	{ title: "编辑分类" },
]);

const breadcrumbItems4 = ref([
	{ title: "文档", to: "#" },
	{ title: "API文档", to: "#" },
	{ title: "接口详情" },
]);

// 面包屑返回事件处理
const handleBreadcrumbBack = () => {
	console.log("面包屑返回按钮被点击");
	proxy.$vtk.message.toast("返回按钮被点击，将执行自定义逻辑", { color: "info" });
};

const addUser = () => {
    deptRefSingle.value?.add();
}

// 消息提示方法
// Toast 提示示例
const showToastSuccess = () => {
	proxy.$vtk.message.toast("操作成功！", { color: "success" });
};

const showToastError = () => {
	proxy.$vtk.message.toast("操作失败，请重试！", { color: "error" });
};

const showToastWarning = () => {
	proxy.$vtk.message.toast("警告：请注意检查数据！", { color: "warning" });
};

const showToastInfo = () => {
	proxy.$vtk.message.toast("这是一条信息提示", { color: "info" });
};

// Loading 加载示例
const showLoading = () => {
	proxy.$vtk.message.loading.show();
	// 模拟异步操作，3秒后关闭
	setTimeout(() => {
		proxy.$vtk.message.loading.hide()
	}, 1000);
};


// Confirm 确认对话框示例
const showConfirmDelete = () => {
	proxy.$vtk.message.confirm({
		title: "删除确认",
		message: "确定要删除这条数据吗？删除后将无法恢复。",
		onConfirm: () => {
			proxy.$vtk.message.toast("已删除", { color: "success" });
		},
		onCancel: () => {
			proxy.$vtk.message.toast("已取消删除", { color: "info" });
		}
	});
};

const showConfirmSave = () => {
	proxy.$vtk.message.confirm({
		title: "保存确认",
		message: "确定要保存当前修改吗？",
		confirmText: "保存",
		cancelText: "取消",
		onConfirm: () => {
			const loading = proxy.$vtk.message.loading("保存中...");
			// 模拟保存操作
			setTimeout(() => {
				loading.close();
				proxy.$vtk.message.toast("保存成功！", { color: "success" });
			}, 1500);
		},
		onCancel: () => {
			proxy.$vtk.message.toast("已取消保存", { color: "info" });
		}
	});
};

// 步骤条
const currentStep = ref(1);

// 表单相关
const valid = ref(false);
const form = ref(null);
const searchValue = ref("");

// 实体数据
const entity = ref({
	scheduleName: "",
	scheduleMisfire: "",
	scheduleMisfireArr: [],
	scheduleRoutes: "",
	scheduleRoutesMulti: [],
	dateRange: [],
	areaCode: "",
});

// 日期变化处理
const handleChange = (range) => {
	console.log("日期范围已更改:", range);
};

// 处理区域选择变化
const handleAreaChange = (areaCode) => {
	console.log("选择的区域代码:", areaCode);
	entity.areaCode = areaCode;
};

// 部门选择组件相关
const deptRefSingle = ref(null);
const deptRefMultiple = ref(null);
const selectedDeptSingle = ref(null);
const selectedDeptMultiple = ref([]);

// 处理单选部门选择
const handleDeptSelected = (dept) => {
	console.log("选择的部门（单选）:", dept);
	selectedDeptSingle.value = dept;
};

// 处理多选部门选择
const handleDeptMultiSelected = (depts) => {
	console.log("选择的部门（多选）:", depts);
	selectedDeptMultiple.value = depts;
};

// 图片列表数据
const imageList = ref([
	{
		url: "https://picsum.photos/800/600?random=1",
		title: "项目概览图",
		description: "展示项目整体架构",
	},
	{
		url: "https://picsum.photos/800/600?random=2",
		title: "流程图",
		description: "业务流程示意图",
	},
	{
		url: "https://picsum.photos/800/600?random=3",
		title: "数据分析",
		description: "关键指标趋势分析",
	},
	{
		url: "https://picsum.photos/800/600?random=4",
		title: "系统拓扑图",
		description: "系统架构示意图",
	},
	{
		url: "https://picsum.photos/800/600?random=5",
		title: "用户界面",
		description: "前端界面设计稿",
	},
	{
		url: "https://picsum.photos/800/600?random=6",
		title: "测试截图",
		description: "功能测试截图",
	},
	{
		url: "https://picsum.photos/800/600?random=7",
		title: "API文档",
		description: "接口规范说明",
	},
	{
		url: "https://picsum.photos/800/600?random=8",
		title: "测试报告",
		description: "自动化测试结果",
	},
]);

// PDF列表数据
const pdfList = ref([
	{
		url: "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf",
		title: "项目需求文档",
		description: "详细的需求规格说明书",
	},
	{
		url: "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf",
		title: "技术设计文档",
		description: "系统架构和技术选型说明",
	},
	{
		url: "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf",
		title: "测试报告",
		description: "功能测试和性能测试结果",
	},
	{
		url: "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf",
		title: "用户手册",
		description: "系统使用指南和操作说明",
	},
	{
		url: "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf",
		title: "部署文档",
		description: "系统部署和维护指南",
	},
	{
		url: "https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf",
		title: "API文档",
		description: "接口文档和调用示例",
	},
]);

// 表格相关数据
const search = ref("");
const dialogView = ref(false);
const selectedItem = ref(null);
const tableItems = ref([]);
const pageData = ref({
	pageno: 1,
	pageCount: 1,
	rowCount: 0,
	limit: 10,
});

// 表格列定义
const headers = [
	{ title: "ID", key: "id" },
	{ title: "任务名称", key: "name" },
	{ title: "状态", key: "status" },
	{ title: "负责人", key: "assignee" },
	{ title: "创建时间", key: "createTime" },
	{ title: "操作", key: "actions", sortable: false },
];

// 分页数据计算
const paginatedItems = computed(() => {
	const start = (pageData.value.pageno - 1) * pageData.value.limit;
	const end = start + pageData.value.limit;
	return tableItems.value.slice(start, end);
});

// 初始化表格数据
const initializeTableData = () => {
	const mockData = [];
	const statuses = ["运行中", "已完成", "待处理", "已暂停", "错误"];
	const assignees = ["张三", "李四", "王五", "赵六", "钱七"];

	for (let i = 1; i <= 47; i++) {
		mockData.push({
			id: i,
			name: `任务-${i.toString().padStart(3, "0")}`,
			status: statuses[Math.floor(Math.random() * statuses.length)],
			assignee: assignees[Math.floor(Math.random() * assignees.length)],
			createTime: `2023-${String(Math.floor(Math.random() * 12) + 1).padStart(2, "0")}-${String(Math.floor(Math.random() * 28) + 1).padStart(2, "0")} ${String(Math.floor(Math.random() * 24)).padStart(2, "0")}:${String(Math.floor(Math.random() * 60)).padStart(
				2,
				"0"
			)}:${String(Math.floor(Math.random() * 60)).padStart(2, "0")}`,
			description: `这是任务-${i.toString().padStart(3, "0")}的详细描述信息`,
		});
	}

	tableItems.value = mockData;
	pageData.value.rowCount = mockData.length;
	pageData.value.pageCount = Math.ceil(mockData.length / pageData.value.limit);
};

// 状态颜色映射
const getStatusColor = (status) => {
	const colorMap = {
		运行中: "success",
		已完成: "primary",
		待处理: "warning",
		已暂停: "info",
		错误: "error",
	};
	return colorMap[status] || "default";
};

// 表格操作方法
const viewItem = (item) => {
	selectedItem.value = item;
	dialogView.value = true;
};

const editItem = (item) => {
	console.log("编辑项目:", item);
	proxy.$vtk.message.toast("编辑功能待实现", { color: "info" });
};

const deleteItem = (item) => {
	console.log("删除项目:", item);
	proxy.$vtk.message.toast("删除功能待实现", { color: "warning" });
};

// 分页处理
const handlePageChange = (page) => {
	pageData.value.pageno = page.pageno;
	pageData.value.limit = page.limit;
};

onMounted(() => {
	initializeTableData();

	observer = new IntersectionObserver(
		(entries) => {
			if (isManualScroll) return
			for (const entry of entries) {
				if (entry.isIntersecting) {
					activeSection.value = entry.target.id
					break
				}
			}
		},
		{ threshold: 0.2, rootMargin: '-80px 0px 0px 0px' }
	)
	sections.forEach(({ id }) => {
		const el = document.getElementById(id)
		if (el) observer.observe(el)
	})
})

onUnmounted(() => {
	observer?.disconnect()
})
</script>

<style scoped>
.test-wrapper {
	position: relative;
	display: flex;
}

.test-container {
	flex: 1;
	min-width: 0;
	margin: 0 auto;
	width: 100%;
}

/* 锚点导航 */
.anchor-nav {
	position: fixed;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 100;
}

.anchor-item {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	padding: 4px 0;
	direction: rtl;
}

.anchor-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #bbb;
	flex-shrink: 0;
	transition: all 0.2s ease;
}

.anchor-label {
	font-size: 0.75rem;
	color: #999;
	white-space: nowrap;
	transition: color 0.2s ease;
}

.anchor-item:hover .anchor-label,
.anchor-item--active .anchor-label {
	opacity: 1;
	transform: translateX(0);
}

.anchor-item:hover .anchor-dot {
	background: rgb(var(--v-theme-primary));
}

.anchor-item:hover .anchor-label {
	color: rgb(var(--v-theme-primary));
}

.anchor-item--active .anchor-dot {
	width: 8px;
	height: 8px;
	background: rgb(var(--v-theme-primary));
}

.anchor-item--active .anchor-label {
	color: rgb(var(--v-theme-primary));
	font-weight: 600;
}

.search-field {
	max-width: 300px;
}

.pagination-wrapper {
	display: flex;
	justify-content: center;
}

.image-item {
	height: 220px;
	cursor: pointer;
	transition: transform 0.2s ease-in-out;
}

.image-item:hover {
	transform: translateY(-5px);
}

.pdf-item {
	height: 220px;
	cursor: pointer;
	transition: transform 0.2s ease-in-out;
}

.pdf-item:hover {
	transform: translateY(-5px);
}
</style>
