<template>
	<fs-page>
		<el-row class="mx-2">
			<el-col :span="4" class="p-1">
				<el-card :body-style="{ height: '100%' }">
					<p class="font-mono font-black text-center text-xl pb-5">
						用户列表
						<el-tooltip effect="dark" :content="content" placement="right">
							<el-icon> <QuestionFilled /> </el-icon>
						</el-tooltip>
					</p>
					<el-input v-model="filterText" :placeholder="placeholder" />
					<el-tree
						ref="treeRef"
						class="font-mono font-bold leading-6 text-7xl"
						:data="data"
						:props="treeProps"
						:filter-node-method="filterNode"
						:load="loadNode"
						lazy
						icon="ArrowRightBold"
						:indent="12"
					>
						<template #default="{ node, data }">
							<span class="text-center font-black text-xl">{{ node.label }}</span>
						</template>
					</el-tree>
				</el-card>
			</el-col>
			<el-col :span="20" class="p-1">
				<el-card :body-style="{ height: '100%' }">
					<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
				</el-card>
			</el-col>
		</el-row>
	</fs-page>
</template>

<script lang="ts" setup>
import { useExpose, useCrud } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud';
import * as api from './api';
import { ElTree } from 'element-plus';
import { ref, onMounted, watch, toRaw, defineAsyncComponent } from 'vue';
import XEUtils from 'xe-utils';
import { errorMessage, successMessage } from '../../../utils/message';

interface Tree {
	id: number;
	name: string;
	status: boolean;
	children?: Tree[];
}

interface APIResponseData {
	code?: number;
	data: [];
	msg?: string;
}

// 引入组件
const placeholder = ref('请输入用户名称');
const filterText = ref('');
const treeRef = ref<InstanceType<typeof ElTree>>();

const treeProps = {
	children: 'children',
	label: 'name',
	icon: 'icon',
	isLeaf: (data: Tree[], node: Node) => {
		// @ts-ignore
		if (node.data.hasChild) {
			return false;
		} else {
			return true;
		}
	},
};

watch(filterText, (val) => {
	treeRef.value!.filter(val);
});

const filterNode = (value: string, data: Tree) => {
	if (!value) return true;
	return toRaw(data).name.indexOf(value) !== -1;
};

// 懒加载
const loadNode = (node: Node, resolve: (data: Tree[]) => void) => {
	// @ts-ignore
	if (node.level !== 0) {
		// @ts-ignore
		api.GetList({ parent: node.data.id }).then((res: APIResponseData) => {
			resolve(res.data);
			console.log(res.data);
		});
	}
};

let data = ref([]);

const content = `
1.用户数据支持懒加载;
`;

const getData = () => {
	api.GetList({}).then((ret: APIResponseData) => {
		const responseData = ret.data;
		const result = XEUtils.toArrayTree(responseData, {
			parentKey: 'parent',
			children: 'children',
			strict: true,
		});
		data.value = result;
	});
};

// 页面打开后获取列表数据
onMounted(() => {
	getData();
});

// crud组件的ref
const crudRef = ref();
// crud 配置的ref
const crudBinding = ref();
// 暴露的方法
const { crudExpose } = useExpose({ crudRef, crudBinding });
// 你的crud配置
const { crudOptions } = createCrudOptions({ crudExpose });
// 初始化crud配置
const { resetCrudOptions } = useCrud({ crudExpose, crudOptions });

// 页面打开后获取列表数据
onMounted(() => {
	crudExpose.doRefresh();
});
</script>

<style lang="scss" scoped>
.el-row {
	height: 100%;

	.el-col {
		height: 100%;
	}
}

.el-card {
	height: 100%;
}
</style>
