<template>
	<div class="dingtalk-department-container">
		<el-card>
			<template #header>
				<div class="card-header">
					<span>钉钉部门管理</span>
					<div>
						<el-input
							v-model="searchKeyword"
							placeholder="搜索部门名称"
							clearable
							style="width: 200px; margin-right: 10px"
							@input="onSearch"
						>
							<template #prefix>
								<el-icon><Search /></el-icon>
							</template>
						</el-input>
						<el-button @click="loadDepartmentTree">刷新</el-button>
					</div>
				</div>
			</template>

			<el-row :gutter="20">
				<!-- 部门树 -->
				<el-col :span="12">
					<div class="tree-container">
						<div class="tree-title">部门树结构</div>
						<el-tree
							ref="treeRef"
							:data="departmentTree"
							:props="treeProps"
							:filter-node-method="filterNode"
							node-key="id"
							:expand-on-click-node="false"
							default-expand-all
							@node-click="handleNodeClick"
						>
							<template #default="{ node, data }">
								<span class="custom-tree-node">
									<span class="node-label">{{ node.label }}</span>
									<span class="node-meta">
										<el-tag size="small" type="info">ID: {{ data.deptId }}</el-tag>
									</span>
								</span>
							</template>
						</el-tree>
					</div>
				</el-col>

				<!-- 部门详情 -->
				<el-col :span="12">
					<div class="detail-container">
						<div class="detail-title">部门详情</div>
						<el-form
							v-if="selectedDept"
							:model="selectedDept"
							label-width="120px"
							class="detail-form"
						>
							<el-form-item label="部门ID">
								<span>{{ selectedDept.id }}</span>
							</el-form-item>
							<el-form-item label="钉钉部门ID">
								<span>{{ selectedDept.deptId }}</span>
							</el-form-item>
							<el-form-item label="部门名称">
								<span>{{ selectedDept.name }}</span>
							</el-form-item>
							<el-form-item label="父部门ID">
								<span>{{ selectedDept.parentId }}</span>
							</el-form-item>
							<el-form-item label="排序号">
								<span>{{ selectedDept.deptOrder }}</span>
							</el-form-item>
							<el-form-item label="创建时间">
								<span>{{ selectedDept.createTime }}</span>
							</el-form-item>
							<el-form-item label="更新时间">
								<span>{{ selectedDept.updateTime }}</span>
							</el-form-item>
						</el-form>

						<!-- 部门员工列表 -->
						<div v-if="selectedDept" class="dept-users">
							<el-divider />
							<div class="users-title">部门员工 ({{ deptUsers.length }}人)</div>
							<el-table
								v-if="deptUsers.length > 0"
								:data="deptUsers"
								style="width: 100%"
								max-height="300"
							>
								<el-table-column prop="nickName" label="姓名" width="120" />
								<el-table-column prop="phone" label="手机号" width="120" />
								<el-table-column prop="position" label="职位" min-width="100" />
								<el-table-column prop="jobNumber" label="工号" width="100" />
							</el-table>
							<el-empty
								v-else
								description="该部门暂无员工"
								:image-size="80"
							/>
						</div>

						<el-empty v-else description="请从左侧选择一个部门查看详情" />
					</div>
				</el-col>
			</el-row>

			<!-- 部门列表表格 -->
			<el-divider />
			<div class="table-title">部门列表</div>
			<cl-crud ref="Crud">
				<cl-row>
					<cl-refresh-btn />
					<cl-flex1 />
					<cl-search-key placeholder="搜索部门名称" />
				</cl-row>

				<cl-row>
					<cl-table ref="Table" />
				</cl-row>

				<cl-row>
					<cl-flex1 />
					<cl-pagination />
				</cl-row>
			</cl-crud>
		</el-card>
	</div>
</template>

<script lang="ts" setup>
defineOptions({
	name: 'dingtalk-department'
});

import { ref, onMounted } from 'vue';
import { useCrud, useTable } from '@cool-vue/crud';
import { useCool } from '/@/cool';
import { ElMessage } from 'element-plus';
import { Search } from '@element-plus/icons-vue';

const { service } = useCool();

// 部门树数据
const departmentTree = ref<any[]>([]);

// 搜索关键字
const searchKeyword = ref('');

// 树引用
const treeRef = ref();

// 选中的部门
const selectedDept = ref<any>(null);

// 部门员工列表
const deptUsers = ref<any[]>([]);

// 树配置
const treeProps = {
	children: 'children',
	label: 'name'
};

// 加载部门树
async function loadDepartmentTree() {
	try {
		const res = await service.dingtalk.department.getTree();
		departmentTree.value = res || [];
	} catch (err: any) {
		ElMessage.error(err.message || '加载部门树失败');
	}
}

// 搜索部门
function onSearch() {
	treeRef.value?.filter(searchKeyword.value);
}

// 过滤节点
function filterNode(value: string, data: any) {
	if (!value) return true;
	return data.name.includes(value);
}

// 点击节点
async function handleNodeClick(data: any) {
	selectedDept.value = data;
	// 加载该部门的员工
	await loadDepartmentUsers(data.deptId);
}

// 加载部门员工
async function loadDepartmentUsers(deptId: number) {
	try {
		const res = await service.dingtalk.department.getDepartmentUsers({ deptId });
		deptUsers.value = res || [];
	} catch (err: any) {
		ElMessage.error(err.message || '加载部门员工失败');
		deptUsers.value = [];
	}
}

// cl-table 表格配置
const Table = useTable({
	columns: [
		{
			label: 'ID',
			prop: 'id',
			width: 80
		},
		{
			label: '钉钉部门ID',
			prop: 'deptId',
			width: 120
		},
		{
			label: '部门名称',
			prop: 'name',
			minWidth: 200
		},
		{
			label: '父部门ID',
			prop: 'parentId',
			width: 120
		},
		{
			label: '排序号',
			prop: 'deptOrder',
			width: 100
		},
		{
			label: '创建时间',
			prop: 'createTime',
			minWidth: 160,
			sortable: 'custom'
		},
		{
			label: '更新时间',
			prop: 'updateTime',
			minWidth: 160,
			sortable: 'custom'
		}
	]
});

// cl-crud 配置
const Crud = useCrud(
	{
		service: service.dingtalk.department
	},
	(app) => {
		app.refresh();
	}
);

// 组件挂载
onMounted(() => {
	loadDepartmentTree();
});
</script>

<style lang="scss" scoped>
.dingtalk-department-container {
	padding: 20px;

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.tree-container,
	.detail-container {
		border: 1px solid #dcdfe6;
		border-radius: 4px;
		padding: 15px;
		min-height: 400px;
		max-height: 600px;
		overflow-y: auto;

		.tree-title,
		.detail-title {
			font-size: 16px;
			font-weight: bold;
			color: #303133;
			margin-bottom: 15px;
			padding-bottom: 10px;
			border-bottom: 1px solid #ebeef5;
		}
	}

	.custom-tree-node {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 14px;
		padding-right: 8px;

		.node-label {
			flex: 1;
		}

		.node-meta {
			margin-left: 10px;
		}
	}

	.detail-form {
		:deep(.el-form-item__label) {
			font-weight: bold;
			color: #606266;
		}

		:deep(.el-form-item__content) {
			color: #303133;
		}
	}

	.dept-users {
		margin-top: 20px;

		.users-title {
			font-size: 14px;
			font-weight: bold;
			color: #303133;
			margin-bottom: 10px;
		}

		:deep(.el-table) {
			font-size: 13px;
		}
	}

	.table-title {
		font-size: 16px;
		font-weight: bold;
		color: #303133;
		margin-bottom: 15px;
	}
}
</style>
