import type {ButtonGroupColors, ButtonConfig} from '../components/button-group/index.type';
import {Toolbar} from '../components/button-group/toolbar';
import {BimComponent} from '../core/component';
import type {BimEngine} from '../bim-engine';
import {BimButtonGroup} from "../components/button-group";
import {BimTree} from "../components/tree";
import {TreeNodeConfig} from "../components/tree/types.ts";
import {BimDialog} from "../components/dialog";
import {BimTab} from "../components/tab";
const MOCK_STRUCT_DATA: TreeNodeConfig[] =[
{
id: 'root',
label: '全部构件',
expanded: true,
clickAction: 'expand',
children: [
{
id: 'level-1',
label: '一层',
expanded: false,
icon:'',
clickAction: 'expand',
children: [
{ id: 'l1-wall', label: '墙体（128）'},
{ id: 'l1-column', label: '柱（46）' },
{ id: 'l1-beam', label: '梁（82）' },
{ id: 'l1-slab', label: '楼板（12）' },
{ id: 'l1-door', label: '门（24）' },
{ id: 'l1-window', label: '窗（36）' }
]
},
{
id: 'level-2',
label: '二层',
expanded: false,
clickAction: 'expand',
children: [
{ id: 'l2-wall', label: '墙体（141）' },
{ id: 'l2-column', label: '柱（52）' },
{ id: 'l2-beam', label: '梁（90）' },
{ id: 'l2-slab', label: '楼板（12）' },
{ id: 'l2-door', label: '门（18）' },
{ id: 'l2-window', label: '窗（40）' }
]
},
{
id: 'level-3',
label: '三层',
expanded: false,
clickAction: 'expand',
children: [
{ id: 'l3-wall', label: '墙体（136）' },
{ id: 'l3-column', label: '柱（48）' },
{ id: 'l3-beam', label: '梁（88）' },
{ id: 'l3-slab', label: '楼板（12）' },
{ id: 'l3-door', label: '门（16）' },
{ id: 'l3-window', label: '窗（38）' }
]
},
{
id: 'level-roof',
label: '屋面层',
expanded: false,
clickAction: 'expand',
children: [
{ id: 'rf-slab', label: '屋面板（6）' },
{ id: 'rf-beam', label: '屋面梁（24）' },
{ id: 'rf-parapet', label: '女儿墙（18）' }
]
}
]
}
];
/**
* 底部工具栏管理器 (ToolbarManager)
* 仅负责管理底部工具栏实例。
*/
export class ConstructTreeManagerBtn extends BimComponent {
private toolbar: Toolbar | null = null;
private toolbarContainer: HTMLElement | null = null;
private container: HTMLElement;
private dialog: BimDialog | null = null;
constructor(engine: BimEngine, container: HTMLElement) {
super(engine);
this.container = container;
this.init();
}
private init() {
// 创建底部工具栏专用容器
this.toolbarContainer = document.createElement('div');
this.toolbarContainer.id = 'bim-construct-tree';
this.container.appendChild(this.toolbarContainer);
this.toolbar = new BimButtonGroup({
container: this.toolbarContainer,
showLabel: false,
direction: 'column',
position: 'top-left', // 底部居中
align: 'vertical', // 图标在上
expand: 'up' // 向上展开
});
this.toolbar.init();
this.toolbar.setEngine(this.engine);
this.toolbar.addGroup('construct-tree');
this.toolbar.addButton({
id: 'construct-tree-btn',
groupId: 'construct-tree',
type: 'button',
label: 'construct-tree',
icon: '',
onClick: () => {
this.openConstructTreeDialog()
}
});
this.toolbar.render();
}
public openConstructTreeDialog() {
this.setVisible(false);
// 构件树实例（放在“构件”标签内）
const tree = new BimTree({
data: MOCK_STRUCT_DATA,
checkable: true,
indent: 0,
enableSearch: true,
checkStrictly: true,
defaultExpandAll: true,
renderActions: (_node) => {
return '';
},
onNodeCheck: (node) => {
console.log('onNodeCheck', node);
},
onNodeSelect: (node) => {
console.log('onNodeSelect', node);
},
onNodeExpand: (node) => {
console.log('onNodeExpand', node);
this.dialog?.fitWidth();
},
});
tree.init();
// 系统/空间暂留空占位，可后续填充业务内容
const systemPlaceholder = document.createElement('div');
systemPlaceholder.className = 'construct-tab__panel-content';
const spacePlaceholder = document.createElement('div');
spacePlaceholder.className = 'construct-tab__panel-content';
// 构件面板容器，确保内部树区域可滚动
const componentPanel = document.createElement('div');
componentPanel.className = 'construct-tab__panel-content';
componentPanel.appendChild(tree.element);
// 创建 Tab 容器（仅在本弹窗内使用，不额外挂 Manager）
const tabMount = document.createElement('div');
tabMount.className = 'construct-tab__container';
tabMount.style.height = '100%';
tabMount.style.overflow = 'hidden';
const tab = new BimTab({
container: tabMount,
tabs: [
{id: 'component', title: 'tab.component', content: componentPanel},
{id: 'system', title: 'tab.system', content: systemPlaceholder},
{id: 'space', title: 'tab.space', content: spacePlaceholder},
],
activeId: 'component',
onChange: () => {
// 切换后根据内容宽度刷新弹窗
this.dialog?.fitWidth();
}
});
tab.init();
this.dialog = this.engine.dialog!.create({
title: 'constructTree.title',
minWidth: 320,
height: 420,
content: tabMount,
position: {x: 20, y: 20},
resizable: false,
onClose: () => {
tab.destroy();
tree.destroy();
this.setVisible(true);
}
});
this.dialog?.fitWidth();
}
public refresh() {
this.toolbar?.render();
}
public destroy() {
this.toolbar?.destroy();
this.toolbar = null;
}
// --- 转发 API ---
public addGroup(groupId: string, beforeGroupId?: string) {
this.toolbar?.addGroup(groupId, beforeGroupId);
this.toolbar?.render();
}
public addButton(config: ButtonConfig) {
this.toolbar?.addButton(config);
this.toolbar?.render();
}
public setButtonVisibility(id: string, v: boolean) {
this.toolbar?.updateButtonVisibility(id, v);
}
public setShowLabel(show: boolean) {
this.toolbar?.setShowLabel(show);
}
public setVisible(visible: boolean) {
if (this.toolbarContainer) {
this.toolbarContainer.style.visibility = visible ? 'visible' : 'hidden';
}
}
public setBackgroundColor(color: string) {
this.toolbar?.setBackgroundColor(color);
}
public setColors(colors: ButtonGroupColors) {
this.toolbar?.setColors(colors);
}
}