<template>
	<div class="table-tree">
		<div class="table-tree__header">
			<div>数据表列表</div>
			<ul class="table-tree__op">
				<li @click="refresh()">
					<el-tooltip content="刷新">
						<el-icon>
							<refresh-icon />
						</el-icon>
					</el-tooltip>
				</li>
			</ul>
		</div>

		<div class="table-tree__container">
			<el-scrollbar>
				<el-tree
					v-loading="loading"
					node-key="id"
					default-expand-all
					:data="list"
					:props="{
						label: 'name'
					}"
					:expand-on-click-node="false"
				>
					<template #default="{ node, data }">
						<div class="table-tree__node">
							<span
								class="table-tree__node-label"
								:class="{
									'is-active': data.id == ViewGroup?.selected?.id
								}"
								@click="rowClick(data)"
								>{{ node.label }}</span
							>
						</div>
					</template>
				</el-tree>
			</el-scrollbar>
		</div>

		<cl-form ref="Form" />
	</div>
</template>

<script lang="ts" name="table-list" setup>
import { nextTick, onMounted, ref } from "vue";
import { useCool } from "/@/cool";
import { deepTree, revDeepTree } from "/@/cool/utils";
import { useForm } from "@cool-vue/crud";
import { Refresh as RefreshIcon } from "@element-plus/icons-vue";
import { useViewGroup } from "/$/base";

const emit = defineEmits(["refresh"]);
const Form = useForm();
const { service } = useCool();
const { ViewGroup } = useViewGroup();

// 树形列表
const list = ref<Eps.DataTableEntity[]>([]);

// 加载中
const loading = ref(false);

// 刷新
async function refresh() {
	loading.value = true;

	await service.base.sys.datatable.list().then((res) => {
		list.value = deepTree(res);

		if (!ViewGroup.value?.selected) {
			rowClick();
		}
	});

	loading.value = false;
}

// 获取 ids
function rowClick(item?: Eps.DataTableEntity) {
	if (!item) {
		item = list.value[0];
	}

	if (item) {
		const ids = item.children ? revDeepTree(item.children).map((e) => e.id) : [];
		ids.unshift(item.id);
		// 选择
		ViewGroup.value?.select(item);

		const name = item.name;

		nextTick(() => {
			// 刷新列表
			emit("refresh", { page: 1, tableIds: ids, name: name });
		});
	}
}

onMounted(function () {
	refresh();
});
</script>

<style lang="scss" scoped>
.table-tree {
	height: 100%;
	width: 100%;

	:deep(.el-tree-node__label) {
		display: block;
		height: 100%;
		width: 100%;
	}

	&__header {
		display: flex;
		align-items: center;
		height: 40px;
		padding: 0 10px;
		letter-spacing: 1px;
		position: relative;

		div {
			font-size: 14px;
			flex: 1;
			white-space: nowrap;
		}

		i {
			font-size: 18px;
			cursor: pointer;
		}
	}

	&__op {
		display: flex;

		li {
			display: flex;
			justify-content: center;
			align-items: center;
			list-style: none;
			margin-left: 5px;
			padding: 5px;
			cursor: pointer;

			&:not(.no):hover {
				background-color: var(--el-fill-color-lighter);
			}
		}
	}

	&__container {
		height: calc(100% - 40px);

		:deep(.el-tree-node__content) {
			height: 36px;
			margin: 0 5px;
		}
	}

	&__node {
		display: flex;
		align-items: center;
		height: 100%;
		width: 100%;
		box-sizing: border-box;

		&-label {
			display: flex;
			align-items: center;
			flex: 1;
			height: 100%;
			font-size: 14px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;

			&.is-active {
				color: var(--color-primary);
				font-weight: bold;
			}
		}

		&-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #eee;
			height: 26px;
			width: 26px;
			text-align: center;
			margin-right: 5px;
			border-radius: 5px;
		}
	}
}
</style>
