import { Util, throttle } from '@ibizstudio/runtime';
import { TreeControlBase } from '../../../widgets';
/**
 * 树视图部件基类
 *
 * @export
 * @class AppTreeViewBase
 * @extends {TreeControlBase}
 */
export class AppTreeViewBase extends TreeControlBase {
    /**
     * 绘制右击菜单
     *
     * @param {*} node
     * @returns
     * @memberof AppTreeViewBase
     */
    renderContextMenu(node) {
        if (node && node.data) {
            const data = JSON.parse(JSON.stringify(node.data));
            this.currentselectedNode = Object.assign({}, data);
            const tags = data.id.split(';');
            let treeNodes = this.controlInstance.getPSDETreeNodes() || [];
            let treeNode = treeNodes.find((node) => tags[0] == node.nodeType);
            let contextMenu = treeNode.getPSDEContextMenu();
            if (contextMenu && contextMenu.controlType == 'CONTEXTMENU') {
                let { targetCtrlName, targetCtrlParam, targetCtrlEvent } = this.computeTargetCtrlData(contextMenu);
                targetCtrlParam.dynamicProps.contextMenuActionModel = this.copyActionModel;
                Object.assign(targetCtrlEvent, {
                    'ctrl-event': ({ controlname, action, data }) => {
                        this.onCtrlEvent(controlname, action, data, Util.deepCopy(this.currentselectedNode));
                    },
                });
                return this.$createElement(targetCtrlName, { props: targetCtrlParam, ref: contextMenu.name, on: targetCtrlEvent });
            }
        }
        return null;
    }
    /**
     * 绘制内容
     *
     * @returns
     * @memberof AppTreeViewBase
     */
    renderNode({ node, data }) {
        var _a, _b, _c, _d, _e, _f, _g;
        // 绘制图标
        let iconElement = null;
        if (data.iconCustomCode) {
            let icon = '';
            if (data.iconScriptCode.indexOf('return') !== -1) {
                data.iconScriptCode = data.iconScriptCode.replace(new RegExp('return', 'g'), `icon =`);
            }
            eval(data.iconScriptCode);
            iconElement = <span domPropsInnerHTML={icon}></span>;
        }
        else if (data.iconcls) {
            iconElement = <i class={data.iconcls}></i>;
        }
        else if (data.icon) {
            iconElement = <ion-icon style='transform:translateY(1px);' src={data.icon}/>;
        }
        else if (this.controlInstance.outputIconDefault) {
            iconElement = <i class='ivu-icon ivu-icon-ios-paper-outline'></i>;
        }
        const cssName = data.cssName ? data.cssName : '';
        const nodeStyle = {
            width: '100%',
            'padding-left': ((_b = (_a = node.parent) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.enablecheck) && !((_c = node.data) === null || _c === void 0 ? void 0 : _c.enablecheck) ? '22px' : '0px',
        };
        if (this.ctrlTriggerLogicMap.get('calcnodestyle')) {
            let styleObj = this.ctrlTriggerLogicMap.get('calcnodestyle').executeUILogic({ arg: { node, data } });
            Object.assign(nodeStyle, styleObj);
        }
        // 绘制显示文本
        let textElement = null;
        if (data.textCustomCode) {
            let text = '';
            if (data.textScriptCode.indexOf('return') !== -1) {
                data.textScriptCode = data.textScriptCode.replace(new RegExp('return', 'g'), `text =`);
            }
            eval(data.textScriptCode);
            textElement = <span domPropsInnerHTML={text}></span>;
        }
        else if (data.html) {
            textElement = <span domPropsInnerHTML={data.html}></span>;
        }
        else {
            textElement = <span>{Object.is(data.nodeType, 'STATIC') ? this.$tl(data.lanResTag, data.text) : data.text}</span>;
        }
        // 计数器
        let nodeCount = undefined;
        if ((_d = this.controlInstance.getPSAppCounterRef()) === null || _d === void 0 ? void 0 : _d.id) {
            let counterService = (_f = Util.findElementByField(this.counterServiceArray, 'id', (_e = this.controlInstance.getPSAppCounterRef()) === null || _e === void 0 ? void 0 : _e.id)) === null || _f === void 0 ? void 0 : _f.service;
            nodeCount = (_g = counterService === null || counterService === void 0 ? void 0 : counterService.counterData) === null || _g === void 0 ? void 0 : _g[data.counterId];
        }
        let nodeCountStyle = {
            count: nodeCount,
            showZero: data.counterMode !== 1,
            offset: [4, 7],
        };
        return (<context-menu ref={data.id} isBlocked={true} contextMenuStyle={nodeStyle} data={node} renderContent={this.renderContextMenu.bind(this)} on-showContext={(e) => {
                this.showContext(data, e);
            }}>
        <div class={['tree-node', cssName]} title={data.tooltip ? data.tooltip : Object.is(data.nodeType, 'STATIC') ? this.$tl(data.lanResTag, data.text) : data.text} v-badge={nodeCountStyle} on-dblclick={() => {
                throttle(this.doDefaultAction, [node], this);
            }}>
          {iconElement ? <span class='icon'>{iconElement}</span> : null}
          <span class='text'>{textElement}</span>
        </div>
      </context-menu>);
    }
    /**
     * 绘制内容
     *
     * @returns
     * @memberof AppTreeViewBase
     */
    render() {
        if (!this.controlIsLoaded || !this.inited) {
            return null;
        }
        const { controlClassNames } = this.renderOptions;
        return (<div class={Object.assign({ 'design-tree-container': true }, controlClassNames)}>
        <context-menu-container>
          <app-element-tree ref={this.name} class='design-tree' node-key='id' lazy show-checkbox={!this.isSingleSelect} check-on-click-node={!this.isSingleSelect} default-expanded-keys={this.expandedKeys} props={{
                props: {
                    label: 'text',
                    isLeaf: 'leaf',
                    children: 'children',
                },
            }} draggable={this.draggable} allow-drag={(node) => {
                return throttle(this.allowDrag, [node], this);
            }} allow-drop={(draggingNode, dropNode, type) => {
                return this.allowDrop(draggingNode, dropNode, type);
            }} on-edit-value-change={(value, node, event) => {
                this.nodeValueChange(value, node, event);
            }} on-close-edit={(node, event) => {
                this.saveAndRefresh(node, event);
            }} load={this.load.bind(this)} highlight-current={true} expand-on-click-node={false} on-check={(data, checkedState) => {
                this.onCheck(data, checkedState);
            }} on-current-change={this.selectionChange.bind(this)} filter-node-method={this.filterNode.bind(this)} empty-text={this.$t('app.commonwords.nodata')} scopedSlots={{
                default: this.renderNode.bind(this),
            }}></app-element-tree>
        </context-menu-container>
      </div>);
    }
}