import { __decorate } from "tslib";
import { Util, LogUtil, throttle } from '@ibizstudio/runtime';
import { Emit } from 'vue-property-decorator';
import { AppMenuControlBase } from '../../../widgets';
/**
 * 应用菜单部件基类
 *
 * @export
 * @class AppmenuBase
 * @extends {AppMenuControlBase}
 */
export class AppmenuBase extends AppMenuControlBase {
    constructor() {
        super(...arguments);
        /**
         * 左侧应用菜单分割面板比例
         *
         * @type {number}
         * @memberof AppmenuBase
         */
        this.split = 0.15;
    }
    /**
     * 配置左侧分页菜单默认选项
     *
     * @return {*}
     * @memberof AppmenuBase
     */
    defaultMuneOption(menus) {
        var _a, _b;
        return (_b = (_a = menus[0]) === null || _a === void 0 ? void 0 : _a.getPSAppMenuItems) === null || _b === void 0 ? void 0 : _b[0];
    }
    /**
     * 顶部菜单项选中
     *
     * @param {string} item
     * @memberof AppmenuBase
     */
    topMenuSelected(item) {
        this.menus.forEach(menu1 => {
            if ((menu1 === null || menu1 === void 0 ? void 0 : menu1.name) == item) {
                return this.menuTreeClick(menu1);
            }
            else {
                menu1.getPSAppMenuItems.forEach((menu2) => {
                    if ((menu2 === null || menu2 === void 0 ? void 0 : menu2.name) == item) {
                        return this.menuTreeClick(menu2);
                    }
                });
            }
        });
    }
    /**
     * 加载菜单的默认点击
     *
     * @memberof AppmenuBase
     */
    defaultMenuSelect() {
        //分页导航菜单的默认点击
        if (Object.is(this.staticProps.mode, 'TABEXP_LEFT' || 'TABEXP_TOP' || 'TABEXP_RIGHT' || 'TABEXP_BOTTOM')) {
            return this.menuTreeClick(this.defaultMuneOption(this.menus));
        }
        if (!this.isDefaultPage || this.isBlankMode) {
            return;
        }
        const appFuncs = this.service.getAllFuncs();
        if (this.$route && this.$route.matched && this.$route.matched.length == 2) {
            // 存在二级路由
            const [{}, matched] = this.$route.matched;
            const appfunc = appFuncs.find((_appfunc) => Object.is(_appfunc.routepath, matched.path) && Object.is(_appfunc.appfunctype, 'APPVIEW'));
            if (appfunc) {
                this.computeMenuSelect(this.menus, appfunc.appfunctag);
            }
            return;
        }
        else if (this.defPSAppView && Object.keys(this.defPSAppView).length > 0) {
            // 存在默认视图
            const appfunc = appFuncs.find((_appfunc) => Object.is(_appfunc.getPSAppView.codeName, this.defPSAppView.codeName) && Object.is(_appfunc.appFuncType, 'APPVIEW'));
            if (appfunc) {
                this.computeMenuSelect(this.menus, appfunc.appfunctag);
            }
        }
        else {
            this.computeMenuSelect(this.menus, '');
        }
        let item = this.compute(this.menus, this.defaultActive);
        if (Object.keys(item).length === 0) {
            return;
        }
        if (!item.hidden) {
            this.click(item);
        }
    }
    /**
     * 左侧菜单点击
     *
     * @param {*} item ***对象
     * @memberof AppmenuBase
     */
    menuTreeClick(item) {
        let tempContext = Util.deepCopy(this.context);
        if (item.getPSNavigateContexts) {
            const localContext = Util.formatNavParam(item.getPSNavigateContexts);
            Object.assign(tempContext, localContext);
        }
        else {
            if (tempContext.hasOwnProperty('srfdynainstid')) {
                delete tempContext.srfdynainstid;
            }
        }
        if (item.getPSAppFunc) {
            const appFuncs = this.service.getAllFuncs();
            const appFunc = appFuncs.find((element) => {
                return element.appfunctag === item.getPSAppFunc.codeName;
            });
            if (appFunc && appFunc.getPSAppView) {
                Object.assign(tempContext, { viewpath: appFunc.getPSAppView._modelFilePath });
                let targetCtrlParam = {
                    staticProps: {
                        viewDefaultUsage: false,
                    },
                    dynamicProps: {
                        viewparam: {},
                        viewdata: JSON.stringify(tempContext),
                    },
                };
                this.renderRightView = this.$createElement('app-view-shell', {
                    key: Util.createUUID(),
                    class: 'viewcontainer2',
                    props: targetCtrlParam,
                });
                this.$forceUpdate();
            }
        }
        else {
            LogUtil.warn(this.$t('app.commonwords.noassign'));
        }
    }
    /**
     * 左侧应用菜单树绘制事件
     *
     * @param {*} h
     * @param {*} { node, data }
     * @return {*} **node
     * @memberof AppmenuBase
     */
    menuTreeload(h, { node, data }) {
        if (data.hidden) {
            return null;
        }
        if (data.getPSAppMenuItems && data.getPSAppMenuItems.length > 0) {
            return (<div class='parent-treeitem'>
          <span class='icon'>
            <i class='el-icon-s-claim' size='14'/>
          </span>
          <span class='text' title={node.data.caption}>
            {node.data.caption}
          </span>
          <i class={{ 'el-icon-arrow-right': true, expanded: node.expanded }} size='14'/>
        </div>);
        }
        else {
            return (<div class='leaf-treeitem'>
          <span title={node.data.caption}>{node.data.caption}</span>
          <badge count={this.counterdata ? this.counterdata[data.counterid] : null} overflow-count={9999}></badge>
        </div>);
        }
    }
    /**
     * 部件事件
     *
     * @param {{ controlname: string; action: string; data: any }} { controlname 部件名称, action 事件名称, data 事件参数 }
     * @memberof AppmenuBase
     */
    ctrlEvent({ controlname, action, data }) { }
    /**
     * 绘制菜单项
     *
     * @param   menu 同一级菜单
     * @param   isFirst 是否为一级菜单
     * @memberof AppmenuBase
     */
    renderMenuItem(menu, isFirst) {
        var _a, _b, _c, _d, _e;
        let hasIcon = ((_a = menu.getPSSysImage) === null || _a === void 0 ? void 0 : _a.imagePath) || ((_b = menu.getPSSysImage) === null || _b === void 0 ? void 0 : _b.cssClass) || (!menu.getPSSysImage && isFirst) ? true : false;
        return Object.is(menu.itemType, 'MENUITEM') && !menu.hidden ? (<el-menu-item key={Util.createUUID()} index={menu.name} class={[{ isFirst: isFirst }, (_c = menu.getPSSysCss) === null || _c === void 0 ? void 0 : _c.cssName]}>
        {((_d = menu.getPSSysImage) === null || _d === void 0 ? void 0 : _d.imagePath) ? <img class='app-menu-icon' src={menu.getPSSysImage.imagePath}/> : null}
        {((_e = menu.getPSSysImage) === null || _e === void 0 ? void 0 : _e.cssClass) ? <i class={[menu.getPSSysImage.cssClass, 'app-menu-icon']}></i> : null}
        {!menu.getPSSysImage && isFirst ? <i class='fa fa-cogs app-menu-icon'></i> : null}
        {isFirst && this.collapseChange ? (<span ref='circleText' class={['text', { 'app-menu-circle': this.collapseChange && isFirst, 'no-icon': !hasIcon }]} title={this.$tl(menu.tooltipTag, menu.tooltip)}>
            {this.$tl(menu.captionTag, menu.caption).slice(0, 1)}
          </span>) : null}
        <template slot='title'>
          <span class={['text', { 'app-menu-circle': this.collapseChange && isFirst, 'no-icon': !hasIcon }]} title={this.$tl(menu.tooltipTag, menu.tooltip)}>
            {this.$tl(menu.captionTag, menu.caption)}
          </span>
          {this.counterdata ? <span v-badge={{ count: this.counterdata[menu.counterid], offset: [-12, 24] }} class='pull-right'></span> : null}
        </template>
      </el-menu-item>) : Object.is(menu.itemType, 'SEPERATOR') && !menu.hidden ? (<divider />) : null;
    }
    /**
     * 绘制子菜单
     *
     * @param   menus 同一级菜单
     * @param   isFirst 是否为一级菜单
     * @memberof AppmenuBase
     */
    renderSubmenu(menus, isFirst) {
        var _a, _b, _c, _d, _e;
        let hasIcon = ((_a = menus.getPSSysImage) === null || _a === void 0 ? void 0 : _a.imagePath) || ((_b = menus.getPSSysImage) === null || _b === void 0 ? void 0 : _b.cssClass) || (!menus.getPSSysImage && isFirst) ? true : false;
        return !menus.hidden ? (<el-submenu key={Util.createUUID()} index={menus.name} class={[(_c = menus.getPSSysCss) === null || _c === void 0 ? void 0 : _c.cssName, { isCollpase: this.collapseChange && isFirst }, { isFirst: isFirst }]} popper-class={this.popperClass()}>
        <template slot='title'>
          {((_d = menus.getPSSysImage) === null || _d === void 0 ? void 0 : _d.imagePath) ? <img class='app-menu-icon' src={menus.getPSSysImage.imagePath}/> : null}
          {((_e = menus.getPSSysImage) === null || _e === void 0 ? void 0 : _e.cssClass) ? <i class={[menus.getPSSysImage.cssClass, 'app-menu-icon']}></i> : null}
          {!menus.getPSSysImage && isFirst ? <i class='fa fa-cogs app-menu-icon'></i> : null}
          <span on-click={(e) => {
                if (menus.getPSAppFunc) {
                    this.click(menus);
                    e.stopPropagation();
                }
            }} ref='circleText' class={['text', { 'app-menu-circle': this.collapseChange && isFirst, 'no-icon': !hasIcon }]} title={this.$tl(menus.tooltipTag, menus.tooltip)}>
            {this.collapseChange && isFirst ? menus.caption.slice(0, 1) : this.$tl(menus.captionTag, menus.caption)}
          </span>
        </template>
        {menus.getPSAppMenuItems.map((menu) => {
                return this.renderAppMenuContent(menu, false);
            })}
      </el-submenu>) : null;
    }
    /**
     * 绘制菜单内容
     *
     * @param   menu 菜单项
     * @param   isFirst 是否为一级菜单
     * @memberof AppmenuBase
     */
    renderAppMenuContent(menu, isFirst) {
        var _a;
        if (((_a = menu === null || menu === void 0 ? void 0 : menu.getPSAppMenuItems) === null || _a === void 0 ? void 0 : _a.length) > 0) {
            return this.renderSubmenu(menu, isFirst);
        }
        else {
            return this.renderMenuItem(menu, isFirst);
        }
    }
    /**
     * 绘制应用菜单
     *
     * @memberof AppmenuBase
     */
    renderAppMenu() {
        var _a;
        return (<el-menu ref={(_a = this.controlInstance) === null || _a === void 0 ? void 0 : _a.codeName} class='app-menu' default-openeds={Object.is(this.mode, 'LEFT') ? Util.deepCopy(this.defaultOpeneds) : []} mode={Object.is(this.mode, 'LEFT') || !this.mode ? 'vertical' : 'horizontal'} menu-trigger={this.trigger} collapse={this.collapseChange} on-select={(menuName) => this.select(menuName)} on-close={(key, keyPath) => this.handleCloseMenu(key, keyPath)} default-active={this.defaultActive}>
        <div class='app-menu-item'>
          {this.menus.map((menu) => {
                return this.renderAppMenuContent(menu, true);
            })}
        </div>
      </el-menu>);
    }
    /**
     * 绘制中间应用菜单
     *
     * @memberof AppmenuBase
     */
    renderMiddleMenu() {
        return (<div class={{ 'app-middle-menu': true }}>
        {this.menus.map((menu) => {
                return (<card bordered={false} v-show={!menu.hidden} class={{ 'app-middle-menu-group': true }}>
              <p slot='title' class={{ 'app-middle-menu-header': true }}>
                {this.$tl(menu.captionTag, menu.caption)}
              </p>
              <div class={{ 'app-middle-menu-content': true }}>
                {menu.getPSAppMenuItems && menu.getPSAppMenuItems.length > 0
                        ? menu.getPSAppMenuItems.map((item) => {
                            return !item.hidden
                                ? this.$createElement('card', {
                                    class: 'app-middle-menu-item',
                                    nativeOn: {
                                        click: () => {
                                            throttle(this.click, [item], this);
                                        },
                                    },
                                    scopedSlots: {
                                        default: () => {
                                            return (<div calss='menu-item' style='display:flex;justify-content:space-between;align-items:center'>
                                    <span>{this.$tl(item.captionTag, item.caption)}</span>
                                    <span style='position:relative' v-badge={{ count: this.counterdata ? this.counterdata[item.counterid] : null, offset: [-30, 0] }}/>
                                  </div>);
                                        },
                                    },
                                })
                                : null;
                        })
                        : null}
              </div>
            </card>);
            })}
      </div>);
    }
    /**
     * 左侧应用菜单的左侧树绘制
     *
     * @return {*}
     * @memberof AppmenuBase
     */
    renderMenuTree() {
        var _a;
        if (this.menus && this.menus.length > 0) {
            const defaultMuneOption = (_a = this.defaultMuneOption(this.menus)) === null || _a === void 0 ? void 0 : _a.name;
            return this.$createElement('el-tree', {
                props: {
                    'current-node-key': defaultMuneOption,
                    data: this.menus,
                    props: {
                        children: 'getPSAppMenuItems',
                        label: 'caption',
                    },
                    'default-expand-all': true,
                    'highlight-current': true,
                    'render-content': this.menuTreeload.bind(this),
                    'node-key': 'name',
                    'filter-node-method': (filter, data) => {
                        if (!filter)
                            return true;
                        return this.$tl(data.captionTag, data.caption).indexOf(filter) !== -1;
                    },
                },
                ref: 'eltree',
                on: {
                    'node-click': (e) => throttle(this.menuTreeClick, [e], this),
                },
                scopedSlots: {
                    default: ({ node, data }) => {
                        return this.$tl(data.captionTag, data.caption);
                    },
                },
            });
        }
    }
    /**
     * 搜索菜单节点
     *
     * @memberof AppmenuBase
     */
    onSearch(filter) {
        const tree = this.$refs.eltree;
        if (tree && tree.filter && tree.filter instanceof Function) {
            tree.filter(filter);
        }
    }
    /**
     * 左侧应用菜单内容
     *
     * @memberof AppmenuBase
     */
    renderContent() {
        if (this.split == 0.85) {
            return [
                <div slot='right' style={{ height: '100%', padding: '6px 0 10px' }}>
          <i-input search={true} class='index-search' placeholder={this.$t('components.search.holder')} on-on-search={(value) => {
                        this.onSearch(value);
                    }}></i-input>
          <div style={{ height: '100%' }}>{this.renderMenuTree()}</div>
        </div>,
                <div slot='left'>{this.renderRightView ? this.renderRightView : null}</div>,
            ];
        }
        else {
            return [
                <div slot='left' style={{ height: '100%', padding: '6px 0' }}>
          <i-input search={true} class='index-search' placeholder={this.$t('components.search.holder')} on-on-search={(value) => {
                        this.onSearch(value);
                    }}></i-input>
          <div style={{ height: '100%' }}>{this.renderMenuTree()}</div>
        </div>,
                <div slot='right'>{this.renderRightView ? this.renderRightView : null}</div>,
            ];
        }
    }
    /**
     * 绘制左侧应用菜单
     *
     * @return {*}
     * @memberof AppmenuBase
     */
    renderTableLeftMenu() {
        var _a;
        return (<split class={[`app-tree-exp-bar`, (_a = this.renderOptions) === null || _a === void 0 ? void 0 : _a.controlClassNames]} v-model={this.split} style={{ height: '100%' }}>
        {this.renderContent()}
      </split>);
    }
    /**
     * 绘制右侧分页菜单
     *
     * @return {*}
     * @memberof AppmenuBase
     */
    renderTableRightMenu() {
        var _a;
        this.split = 0.85;
        return (<split class={[`app-tree-exp-bar`, (_a = this.renderOptions) === null || _a === void 0 ? void 0 : _a.controlClassNames]} v-model={this.split} style={{ height: 'calc(100%)' }}>
        {this.renderContent()}
      </split>);
    }
    /**
     * 绘制顶部分页菜单
     *
     * @return {*}
     * @memberof AppmenuBase
     */
    renderTableTopMenu() {
        var _a;
        const defaultMuneOption = (_a = this.defaultMuneOption(this.menus)) === null || _a === void 0 ? void 0 : _a.name;
        return (<div style='height:100%'>
        <el-menu mode='horizontal' default-active={defaultMuneOption} on-select={(e) => this.topMenuSelected(e)}>
          {this.menus.map((item, index) => {
                var _a;
                return item.getPSAppMenuItems && item.getPSAppMenuItems.length > 0 ? (item.getPSAppMenuItems.getPSAppMenuItems && item.getPSAppMenuItems.getPSAppMenuItems.length > 0 ? (<el-submenu v-show={!item.hidden} index={(_a = item.getPSAppMenuItems) === null || _a === void 0 ? void 0 : _a.name}>
                  <template slot='title'>{this.$tl(item.getPSAppMenuItems.captionTag, item.getPSAppMenuItems.caption)}</template>
                  {item.getPSAppMenuItems.getPSAppMenuItems.map((item2) => (<el-menu-item v-show={!item2.hidden} index={item2 === null || item2 === void 0 ? void 0 : item2.name}>
                      {this.$tl(item2.captionTag, item2.caption)}
                      <badge count={this.counterdata ? this.counterdata[item2.counterid] : null} overflow-count={9999}></badge>
                    </el-menu-item>))}
                </el-submenu>) : (<el-submenu v-show={!item.hidden} index={item === null || item === void 0 ? void 0 : item.name}>
                  <template slot='title'>{item.caption}</template>
                  {item.getPSAppMenuItems.map((item1) => (<el-menu-item v-show={!item1.hidden} index={item1 === null || item1 === void 0 ? void 0 : item1.name}>
                      {this.$tl(item1.captionTag, item1.caption)}
                      <badge count={this.counterdata ? this.counterdata[item1.counterid] : null} overflow-count={9999}></badge>
                    </el-menu-item>))}
                </el-submenu>)) : (<el-menu-item v-show={!item.hidden} index={item === null || item === void 0 ? void 0 : item.name}>
                {this.$tl(item.captionTag, item.caption)}
                <badge count={this.counterdata ? this.counterdata[item.counterid] : null} overflow-count={9999}></badge>
              </el-menu-item>);
            })}
        </el-menu>
        <div style='height:calc(100% - 61px)'>{this.renderRightView ? this.renderRightView : null}</div>
      </div>);
    }
    /**
     * 绘制底部分页菜单
     *
     * @return {*}
     * @memberof AppmenuBase
     */
    renderTableBottomMenu() {
        var _a;
        const defaultMuneOption = (_a = this.defaultMuneOption(this.menus)) === null || _a === void 0 ? void 0 : _a.name;
        return (<div style='height:100%'>
        <div style='height:calc(100% - 61px)'>{this.renderRightView ? this.renderRightView : null}</div>
        <div class='bottom-view'>
          <el-menu mode='horizontal' default-active={defaultMuneOption} on-select={(e) => this.topMenuSelected(e)}>
            {this.menus.map((item, index) => {
                var _a;
                return item.getPSAppMenuItems && item.getPSAppMenuItems.length > 0 ? (item.getPSAppMenuItems.getPSAppMenuItems && item.getPSAppMenuItems.getPSAppMenuItems.length > 0 ? (<el-submenu v-show={!item.hidden} index={(_a = item.getPSAppMenuItems) === null || _a === void 0 ? void 0 : _a.name}>
                    <template slot='title'>{this.$tl(item.getPSAppMenuItems.captionTag, item.getPSAppMenuItems.caption)}</template>
                    {item.getPSAppMenuItems.getPSAppMenuItems.map((item2) => (<el-menu-item v-show={!item2.hidden} index={item2 === null || item2 === void 0 ? void 0 : item2.name}>
                        {this.$tl(item2.captionTag, item2.caption)}
                        <badge count={this.counterdata ? this.counterdata[item2.counterid] : null} overflow-count={9999}></badge>
                      </el-menu-item>))}
                  </el-submenu>) : (<el-submenu v-show={!item.hidden} index={item === null || item === void 0 ? void 0 : item.name}>
                    <template slot='title'>{item.caption}</template>
                    {item.getPSAppMenuItems.map((item1) => (<el-menu-item v-show={!item1.hidden} index={item1 === null || item1 === void 0 ? void 0 : item1.name}>
                        {this.$tl(item1.captionTag, item1.caption)}
                        <badge count={this.counterdata ? this.counterdata[item1.counterid] : null} overflow-count={9999}></badge>
                      </el-menu-item>))}
                  </el-submenu>)) : (<el-menu-item v-show={!item.hidden} index={item === null || item === void 0 ? void 0 : item.name}>
                  {this.$tl(item.captionTag, item.caption)}
                  <badge count={this.counterdata ? this.counterdata[item.counterid] : null} overflow-count={9999}></badge>
                </el-menu-item>);
            })}
          </el-menu>
        </div>
      </div>);
    }
    /**
     * 绘制应用菜单
     *
     * @returns {*}
     * @memberof AppmenuBase
     */
    render() {
        if (!this.controlIsLoaded) {
            return null;
        }
        const { controlClassNames } = this.renderOptions;
        if (this.staticProps && this.staticProps.mode && Object.is(this.staticProps.mode, 'CENTER')) {
            return <div>{this.renderMiddleMenu()}</div>;
        }
        else if (this.staticProps && this.staticProps.mode && (Object.is(this.staticProps.mode, 'TABEXP_LEFT') || Object.is(this.staticProps.mode, 'TREEEXP'))) {
            return <div>{this.renderTableLeftMenu()}</div>;
        }
        else if (this.staticProps && this.staticProps.mode && Object.is(this.staticProps.mode, 'TABEXP_TOP')) {
            return <div>{this.renderTableTopMenu()}</div>;
        }
        else if (this.staticProps && this.staticProps.mode && Object.is(this.staticProps.mode, 'TABEXP_RIGHT')) {
            return <div>{this.renderTableRightMenu()}</div>;
        }
        else if (this.staticProps && this.staticProps.mode && Object.is(this.staticProps.mode, 'TABEXP_BOTTOM')) {
            return <div>{this.renderTableBottomMenu()}</div>;
        }
        else {
            return <div class={Object.assign(Object.assign({}, controlClassNames), { 'app-app-menu': true })}>{this.renderAppMenu()}</div>;
        }
    }
}
__decorate([
    Emit('ctrl-event')
], AppmenuBase.prototype, "ctrlEvent", null);