import { __decorate } from "tslib";
import { Vue, Component, Prop, Emit } from 'vue-property-decorator';
import { UIStateService } from '../../../../app-service';
import './app-content-left-exp.less';
/**
 * 应用左侧导航
 *
 * @export
 * @class AppContentLeftExp
 * @extends {Vue}
 */
let AppContentLeftExp = class AppContentLeftExp extends Vue {
    constructor() {
        super(...arguments);
        /**
         * UI状态服务
         *
         * @protected
         * @type {UIStateService}
         * @memberof AppContentLeftExp
         */
        this.uiState = new UIStateService();
        /**
         * 当前激活项下标
         *
         * @protected
         * @type {number}
         * @memberof AppContentLeftExp
         */
        this.activeIndex = -1;
        /**
         * 菜单数据
         *
         * @memberof AppContentLeftExp
         */
        this.menus = [];
    }
    /**
     * 组件创建完毕
     *
     * @protected
     * @memberof AppContentLeftExp
     */
    async created() {
        const i = this.uiState.layoutState.leftExpActiveIndex;
        await this.replenishData(this.items);
        if (this.menus.length >= i + 1) {
            this.changeActiveItem(this.menus[i], i);
        }
    }
    /**
     * 填充数据
     *
     * @memberof AppContentLeftExp
     */
    async replenishData(items) {
        this.menus = [];
        let menus = [...items];
        if (menus && menus.length > 0) {
            for (let i = 0; i < menus.length; i++) {
                if (menus[i].getPSAppFunc) {
                    const appFuncs = this.service.getAllFuncs();
                    const appFunc = appFuncs.find((element) => {
                        return element.appfunctag === menus[i].getPSAppFunc.codeName;
                    });
                    if (appFunc && Object.is(appFunc.appFuncType, 'APPVIEW')) {
                        if (appFunc.getPSAppView) {
                            await appFunc.getPSAppView.fill();
                            Object.assign(menus[i], { viewname: 'app-view-shell', viewModelData: appFunc.getPSAppView });
                        }
                    }
                }
            }
        }
        this.menus = menus;
    }
    /**
     * 菜单项点击
     *
     * @protected
     * @param {*} item
     * @param {number} index
     * @memberof AppContentLeftExp
     */
    itemClick(item, index) {
        if (this.activeIndex === index) {
            this.uiState.leftExpContentShowChange();
        }
        else {
            this.uiState.leftExpContentShowChange(true);
            this.changeActiveItem(item, index);
        }
    }
    /**
     * 当前激活菜单切换时抛出事件
     *
     * @param {*} item
     * @memberof AppContentLeftExp
     */
    activeItemChange(item) { }
    /**
     * 改变激活项
     *
     * @protected
     * @param {*} item
     * @param {number} index
     * @memberof AppContentLeftExp
     */
    changeActiveItem(item, index) {
        this.uiState.layoutState.leftExpActiveIndex = index;
        this.activeIndex = index;
        this.activeItem = item;
        this.activeItem.isActivated = true;
        this.activeItemChange(item);
    }
    /**
     * 绘制内容
     *
     * @returns {VNode}
     * @memberof AppContentLeftExp
     */
    render() {
        return (<div class="app-content-left-exp">
                <div class="exp-actions">
                    {this.menus.map((item, index) => {
                this.handleMenuItemLocale(item);
                if (item.hidden) {
                    return;
                }
                return (<div title={this.$tl(item.tooltipTag, item.tooltip)} on-click={() => this.itemClick(item, index)} class={{ 'action-item': true, active: this.activeIndex === index }}>
                                <div class="active-item-indicator"/>
                                <menu-icon item={item}/>
                            </div>);
            })}
                </div>
                <div class="exp-content">
                    {this.menus.map((item, index) => {
                if (!item.isActivated || item.hidden) {
                    return;
                }
                return (<div v-show={this.activeIndex === index} key={index} class="exp-item">
                                {this.$createElement(item.viewname, {
                        class: "view-container",
                        props: {
                            staticProps: {
                                viewDefaultUsage: false,
                                viewModelData: item.viewModelData
                            }
                        },
                    })}
                            </div>);
            })}
                </div>
            </div>);
    }
    /**
     * 计算菜单项多语言资源
     *
     * @returns {*}
     * @memberof AppContentLeftExp
     */
    handleMenuItemLocale(item) {
        if (!item.localetag) {
            return;
        }
        let localeContent = this.$t(item.localetag);
        if (localeContent) {
            item.text = localeContent;
            item.tooltip = localeContent;
        }
    }
};
__decorate([
    Prop()
], AppContentLeftExp.prototype, "ctrlName", void 0);
__decorate([
    Prop({ default: () => [] })
], AppContentLeftExp.prototype, "items", void 0);
__decorate([
    Prop()
], AppContentLeftExp.prototype, "modelService", void 0);
__decorate([
    Prop()
], AppContentLeftExp.prototype, "service", void 0);
__decorate([
    Emit('active-item-change')
], AppContentLeftExp.prototype, "activeItemChange", null);
AppContentLeftExp = __decorate([
    Component({})
], AppContentLeftExp);
export { AppContentLeftExp };