import { __decorate } from "tslib";
import { Vue, Component, Prop, Emit, Watch } from 'vue-property-decorator';
import { UIStateService } from '../../../../app-service';
import './app-content-left-nav-menu.less';
/**
 * 左侧导航菜单
 *
 * @export
 * @class AppContentLeftNavMenu
 * @extends {Vue}
 */
let AppContentLeftNavMenu = class AppContentLeftNavMenu extends Vue {
    constructor() {
        super(...arguments);
        /**
         * UI状态服务
         *
         * @protected
         * @type {UIStateService}
         * @memberof AppContentLeftNavMenu
         */
        this.uiState = new UIStateService();
        /**
         * 当前激活项
         *
         * @protected
         * @type {*}
         * @memberof AppContentLeftNavMenu
         */
        this.activeItem = {};
        /**
         * 菜单Map表
         *
         * @protected
         * @type {Map<string, any>}
         * @memberof AppContentLeftNavMenu
         */
        this.menuMap = new Map();
    }
    /**
     * 监控菜单数据变更
     *
     * @memberof AppContentLeftNavMenu
     */
    watchMenus() {
        this.fillMenuMap(this.menus);
    }
    /**
     * 菜单项点击
     *
     * @param {*} item
     * @returns {*}
     * @memberof AppContentLeftNavMenu
     */
    menuClick(item) { }
    /**
     * 组件创建完毕
     *
     * @memberof AppContentLeftNavMenu
     */
    created() {
        if (this.$route && this.$route.matched.length === 1) {
            this.openDefault();
        }
        this.footerRenderItem = this.$footerRenderService.registerLeftItem((h) => {
            return (<icon title={this.uiState.layoutState.leftNavMenuCollapse ? this.$t('components.content.open') : this.$t('components.content.close')} type="md-menu" style="font-size: 20px;vertical-align: -3px;" on-click={() => this.uiState.leftNavMenuCollapseChange()}/>);
        }, 0);
    }
    /**
     * 组件销毁
     *
     * @memberof AppContentLeftNavMenu
     */
    destroyed() {
        var _a;
        (_a = this.footerRenderItem) === null || _a === void 0 ? void 0 : _a.remove();
    }
    /**
     * 打开默认菜单
     *
     * @protected
     * @memberof AppContentLeftNavMenu
     */
    openDefault() {
        let menu;
        for (const [key, item] of this.menuMap) {
            if (item.openDefault === true) {
                menu = item;
                break;
            }
        }
        if (menu) {
            this.itemClick(menu);
        }
    }
    /**
     * 菜单项点击
     *
     * @protected
     * @param {*} item
     * @memberof AppContentLeftExp
     */
    itemClick(item) {
        const styleMode = this.$uiState.layoutState.styleMode;
        if ((Object.is(styleMode, 'DEFAULT') && item.name !== this.activeItem.name) || Object.is(styleMode, 'STYLE2')) {
            this.changeActiveItem(item);
            this.menuClick(item);
        }
    }
    /**
     * 改变激活项
     *
     * @protected
     * @param {*} item
     * @memberof AppContentLeftExp
     */
    changeActiveItem(item) {
        this.activeItem = item;
        this.activeItem.isActivated = true;
    }
    /**
     * 菜单项选中
     *
     * @protected
     * @param {string} name
     * @memberof AppContentLeftNavMenu
     */
    select(name) {
        const item = this.menuMap.get(name);
        if (item) {
            this.itemClick(item);
        }
    }
    /**
     * 填充菜单Map表
     *
     * @protected
     * @param {any[]} menus
     * @returns {*}
     * @memberof AppContentLeftNavMenu
     */
    fillMenuMap(menus) {
        menus.forEach((item) => {
            this.menuMap.set(item.name, item);
            if (item.getPSAppMenuItems) {
                this.fillMenuMap(item.getPSAppMenuItems);
            }
        });
    }
    /**
     * 展开菜单项
     *
     * @protected
     * @param {string} name
     * @memberof AppContentLeftNavMenu
     */
    open(name) {
        const i = this.uiState.layoutState.leftNavOpenedMenus.findIndex((str) => Object.is(str, name));
        if (i === -1) {
            this.uiState.layoutState.leftNavOpenedMenus.push(name);
        }
    }
    /**
     * 收起菜单项
     *
     * @protected
     * @param {string} name
     * @memberof AppContentLeftNavMenu
     */
    close(name) {
        const i = this.uiState.layoutState.leftNavOpenedMenus.findIndex((str) => Object.is(str, name));
        if (i !== -1) {
            this.uiState.layoutState.leftNavOpenedMenus.splice(i, 1);
            this.$forceUpdate();
        }
    }
    /**
     * 绘制子菜单
     *
     * @protected
     * @param {*} item
     * @returns {*}
     * @memberof AppContentLeftNavMenu
     */
    renderGroup(item) {
        return (<el-submenu index={item.name}>
                <template slot="title">
                    <menu-icon item={item}/>
                    <span slot="title">{this.$tl(item.captionTag, item.caption)}</span>
                </template>
                {this.renderItems(item.getPSAppMenuItems)}
            </el-submenu>);
    }
    /**
     * 绘制菜单项
     *
     * @protected
     * @param {*} item
     * @returns {*}
     * @memberof AppContentLeftNavMenu
     */
    renderItem(item) {
        return (<el-menu-item index={item.name}>
                <menu-icon item={item}/>
                <span slot="title">{this.$tl(item.captionTag, item.caption)}</span>
            </el-menu-item>);
    }
    /**
     * 绘制菜单
     *
     * @protected
     * @param {any[]} items
     * @returns {*}
     * @memberof AppContentLeftNavMenu
     */
    renderItems(items) {
        return items.map((item) => {
            if (item.hidden) {
                return;
            }
            if (item.getPSAppMenuItems) {
                return this.renderGroup(item);
            }
            return this.renderItem(item);
        });
    }
    /**
     * 绘制内容
     *
     * @returns {*}
     * @memberof AppContentLeftNavMenu
     */
    render() {
        return (<div class="app-content-lef-nav-menu">
                <el-menu default-active={this.activeItem.name} default-openeds={this.uiState.layoutState.leftNavOpenedMenus} collapse={this.uiState.layoutState.leftNavMenuCollapse} on-select={(i) => this.select(i)} on-open={(i) => this.open(i)} on-close={(i) => this.close(i)}>
                    {this.renderItems(this.menus)}
                </el-menu>
            </div>);
    }
};
__decorate([
    Prop()
], AppContentLeftNavMenu.prototype, "ctrlName", void 0);
__decorate([
    Prop({ default: () => [] })
], AppContentLeftNavMenu.prototype, "menus", void 0);
__decorate([
    Prop()
], AppContentLeftNavMenu.prototype, "modelService", void 0);
__decorate([
    Watch('menus', { immediate: true })
], AppContentLeftNavMenu.prototype, "watchMenus", null);
__decorate([
    Emit('menu-click')
], AppContentLeftNavMenu.prototype, "menuClick", null);
AppContentLeftNavMenu = __decorate([
    Component({})
], AppContentLeftNavMenu);
export { AppContentLeftNavMenu };