<template>
	<fs-page>
		<div class="job-competency-container">
			<div class="sidebar">
				<div class="tree-container">
					<JobIndex
						:tree-data="documentTreeData"
						@tree-click="handleTreeClick"
					/>
				</div>
			</div>
			<div class="content">
				<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
			</div>
		</div>
	</fs-page>
</template>

<script lang="ts" setup name="areas">
import { onMounted, ref } from 'vue';
import { useFs } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud';
import { GetPermission, GetJobList } from './api';
import { handleColumnPermission } from '/@/utils/columnPermission';
import JobIndex from './jobIndex.vue';

const { crudBinding, crudRef, crudExpose, crudOptions, resetCrudOptions } = useFs({ createCrudOptions });

// 文档树数据
const documentTreeData = ref([]);
// 当前选中的职位ID
const selectedJobId = ref('');

// 获取职位树数据
const getTreeData = () => {
	GetJobList({}).then((ret: any) => {
		documentTreeData.value = ret.data;
	});
};

// 处理树节点点击
const handleTreeClick = (record: any) => {
	selectedJobId.value = record?.id || '';
	
	// 构建搜索参数
	const searchParams = {
		form: {
			position_id: selectedJobId.value
		}
	};
	
	// 执行搜索
	crudExpose.doSearch(searchParams);
};

// 页面打开后获取列表数据
onMounted(async () => {
	try {
		// 获取职位树数据
		getTreeData();
		
		// 设置列权限
		const newOptions = await handleColumnPermission(GetPermission, crudOptions);
		// 重置crudBinding
		resetCrudOptions(newOptions);
		// 刷新
		crudExpose.doRefresh();
	} catch (error) {
		console.error('Failed to get permissions:', error);
		// 即使权限获取失败，也允许页面加载
		crudExpose.doRefresh();
	}
});
</script>

<style scoped>
.job-competency-container {
	display: flex;
	height: 100%;
}

.sidebar {
	margin-top: 10px;
	width: 200px;
	margin-right: 5px;
	flex-shrink: 0;
	background-color: #fff;
	border-right: 1px solid #ebeef5;
	border-radius: 10px;
}

.tree-container {
	padding: 8px 0;
}

.content {
	flex: 1;
	overflow: hidden;
}
</style>
