<template>
	<fs-page>
		<el-row class="account-el-row">
			<el-col :span="4">
				<div class="account-box account-left">
					<el-input v-model="filterVal" :prefix-icon="Search" placeholder="请输入企业名称" />
					<div class="company-tree-com">
						<!-- <div class="tc-head">
							<el-icon size="16" color="#606266" class="tc-head-icon">
								<HomeFilled />
							</el-icon>
							<span class="tc-head-txt">企业架构</span>
						</div> -->
						<el-tree
						style="margin-top: 10px;"
							ref="treeRef"
							:data="companyTreeData"
							:props="defaultTreeProps"
							:filter-node-method="handleFilterTreeNode"
							highlight-current
							@node-click="handleNodeClick"
						>
							<template #default="{ node, data }">
								<span>{{ node.label }}</span>
							</template>
						</el-tree>
					</div>
				</div>
			</el-col>
			<el-col :span="20">
				<div class="account-box account-table">
					<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
				</div>
			</el-col>
		</el-row>
	</fs-page>
</template>

<script lang="ts" setup name="account">
import { onMounted, ref, watch } from 'vue';
import { useFs } from '@fast-crud/fast-crud';
import { createCrudOptions } from './crud';
import { GetList } from './api';
import { handleColumnPermission } from '/@/utils/columnPermission';
import XEUtils from 'xe-utils';
import { GetList as companyGetList } from '../company/api';
import { Search, HomeFilled } from '@element-plus/icons-vue';

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

// Company tree related
interface CompanyTreeItem {
	id: number;
	name: string;
	children?: CompanyTreeItem[];
}
const companyTreeData = ref<CompanyTreeItem[]>([]);
const filterVal = ref('');
const treeRef = ref();
const defaultTreeProps = {
	children: 'children',
	label: 'name'
};

const getCompanyData = async () => {
	const res = await companyGetList({});
	console.log(res)
	if (res?.code === 2000 && Array.isArray(res.data)) {
		companyTreeData.value = XEUtils.toArrayTree(res.data, {
			parentKey: 'parent',
			children: 'children',
			strict: true
		});
	}
};

const handleFilterTreeNode = (value: string, data: any) => {
	if (!value) return true;
	return data.name?.indexOf(value) !== -1;
};

const handleNodeClick = (data: any) => {
	console.log(data)
	crudExpose.doSearch({form: {tenant_id: data.id}});
};

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

// Single onMounted
onMounted(async () => {
	// Fetch company data
	await getCompanyData();
	
	// Set column permissions
	const newOptions = await handleColumnPermission(GetList, crudOptions);
	// Reset crudBinding
	resetCrudOptions(newOptions);
	// Refresh
	crudExpose.doRefresh();
});
</script>

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

	.el-col {
		height: 100%;
		padding: 10px 0;
		box-sizing: border-box;
	}
}

.account-box {
	height: 100%;
	position: relative;
	box-sizing: border-box;
}

.account-left {
	background-color: var(--el-fill-color-blank);
	border-radius: 0 8px 8px 0;
	padding: 10px;
}

.account-table {
	margin-left: 10px;
	padding-bottom: 10px;
}

.tc-head {
	display: flex;
	align-items: center;
	margin-bottom: 10px;
}

.tc-head-icon {
	margin-right: 5px;
}

.tc-head-txt {
	flex: 1;
}
.company-tree-com{
	margin-bottom: 20px;
}
</style> 