import { __decorate } from "tslib";
import { Vue, Component, Prop, Watch, Emit } from 'vue-property-decorator';
import { throttle } from '@ibizstudio/runtime';
import "./view-toolbar.less";
/**
 * 视图工具栏
 *
 * @export
 * @class ViewToolbar
 * @extends {Vue}
 */
let ViewToolbar = class ViewToolbar extends Vue {
    constructor() {
        super(...arguments);
        /**
         * 所有工机具项
         *
         * @protected
         * @type {ToolbarItem[]}
         * @memberof ViewToolbar
         */
        this.items = [];
    }
    /**
     * 监控工具栏模型变更
     *
     * @memberof ViewToolbar
     */
    watchModels() {
        if (this.toolbarModels) {
            this.items = [];
            this.format();
        }
    }
    /**
     * 格式化工具栏模型
     *
     * @protected
     * @param {*} [model=this.model]
     * @memberof ViewToolbar
     */
    format(model = this.toolbarModels, items = this.items) {
        for (const key in model) {
            const item = model[key];
            items.push(item);
            if (item.model) {
                item.items = [];
                this.format(item.model, item.items);
            }
        }
    }
    /**
     * 工具栏项点击
     *
     * @param {*} uiAction
     * @param {MouseEvent} e
     * @memberof ViewToolbar
     */
    itemClick(uiAction, e) { }
    /**
     * 绘制分割线
     *
     * @protected
     * @returns {*}
     * @memberof ViewToolbar
     */
    renderSeperator() {
        return <span class='seperator'>|</span>;
    }
    /**
     * 绘制菜单
     *
     * @protected
     * @param {any[]} [items]
     * @returns {*}
     * @memberof ViewToolbar
     */
    renderMenuItems(items) {
        if (!items) {
            return;
        }
        return items.map((item) => {
            if (item.itemType === 'SEPERATOR') {
                return <li class='ivu-dropdown-item seperator'></li>;
            }
            if (item.items && item.items.length > 0) {
                return this.renderMenuGroup(item);
            }
            return <dropdown-item disabled={item.disabled}>{this.renderMenuItem(item, false)}</dropdown-item>;
        });
    }
    /**
     * 绘制菜单项
     *
     * @protected
     * @param {*} item
     * @returns {*}
     * @memberof ViewToolbar
     */
    renderMenuItem(item, showButton = true) {
        var _a;
        const targetCounterService = {};
        if (((_a = this.counterServiceArray) === null || _a === void 0 ? void 0 : _a.length) > 0) {
            Object.assign(targetCounterService, this.counterServiceArray[0].service);
        }
        if (item.visabled) {
            if (item.itemType == 'RAWITEM') {
                return <tooltip transfer={true} max-width='600' disabled={!item.tooltip}>
                    {this.renderRawItem(item)}
                </tooltip>;
            }
            else if (!showButton) {
                return (<span class={item.class} on-click={(e) => throttle(this.itemClick, [{ tag: item.name }, e], this)}>
                      {item.showIcon ? <menu-icon item={item}/> : null}
                      {item.showCaption ? <span class='caption'>{item.caption}</span> : ''}
                  </span>);
            }
            return (<tooltip transfer={true} max-width='600' disabled={(item.tooltip === item.caption) || !item.tooltip}>
                    {item.uiaction && Object.is(item.uiaction.uIActionTag, 'ExportExcel') ? (<app-export-excel item={item} caption={item.caption} on-exportexcel={($event) => throttle(this.itemClick, [{ tag: item.name }, $event], this)} loading={this.isViewLoading}></app-export-excel>) : (item.uiaction && item.uiaction.counterId) && Object.keys(targetCounterService).length > 0 ? (<i-button disabled={item.disabled} v-badge={{ count: targetCounterService.counterData[item.uiaction.counterId] }} class={this.getToolBarItemClass(item)} on-click={(e) => throttle(this.itemClick, [{ tag: item.name }, e], this)} loading={this.isViewLoading}>
                                {item.showIcon ? <menu-icon item={item}/> : null}
                                {item.showCaption ? <span class='caption'>{item.caption}</span> : ''}
                            </i-button>) : (<i-button disabled={item.disabled} class={this.getToolBarItemClass(item)} on-click={(e) => throttle(this.itemClick, [{ tag: item.name }, e], this)} loading={this.isViewLoading}>
                            {item.showIcon ? <menu-icon item={item}/> : null}
                            {item.showCaption ? <span class='caption'>{item.caption}</span> : ''}
                        </i-button>)}
                    <div slot='content'>{item.tooltip}</div>
                </tooltip>);
        }
        else {
            return null;
        }
    }
    /**
     * 绘制菜单分组
     *
     * @protected
     * @param {*} item
     * @returns {*}
     * @memberof ViewToolbar
     */
    renderMenuGroup(item) {
        return (<dropdown transfer transfer-class-name="view-toolbar-transfer" class='user-menu-child' placement='left-start'>
                <dropdownItem name={item.name} title={item.tooltip}>
                    <icon type='ios-arrow-back'></icon>
                    {item.caption}
                </dropdownItem>
                <dropdownMenu slot='list'>{this.renderMenuItems(item.items)}</dropdownMenu>
            </dropdown>);
    }
    /**
     * 绘制模式2
     *
     * @protected
     * @returns {*}
     * @memberof ViewToolbar
     */
    renderStyle2() {
        return this.items.map((item) => {
            if (!item.visabled) {
                return;
            }
            let content;
            if (item.itemType === 'SEPERATOR') {
                content = this.renderSeperator();
            }
            else if (!item.items) {
                content = this.renderMenuItem(item);
            }
            else {
                content = (<dropdown v-show={item.visabled} class="studio-dropdown toolbar-dropdown" placement="bottom-start" trigger="click" stop-propagation transfer>
                        {<i-button v-show={item.visabled} disabled={item.disabled} title={item.tooltip} class={this.getToolBarItemClass(item)} ghost loading={this.isViewLoading}>
                                {item.showIcon ? <menu-icon item={item}/> : null}
                                {item.showCaption ? item.caption : ''}
                                <icon type="ios-arrow-down"/>
                            </i-button>}
                        <dropdownMenu slot="list">{this.renderMenuItems(item.items)}</dropdownMenu>
                    </dropdown>);
            }
            return <div class="toolbar-item">{content}</div>;
        });
    }
    /**
     * 绘制默认模式工具栏
     *
     * @protected
     * @returns {*}
     * @memberof ViewToolbar
     */
    renderDefault() {
        return this.items.map((item) => {
            if (item.itemType === 'SEPERATOR') {
                return this.renderSeperator();
            }
            if (Object.is(item.itemType, 'ITEMS') && item.items && item.items.length > 0) {
                return (<dropdown transfer transfer-class-name="view-toolbar-transfer" v-show={item.visabled} trigger='click'>
                        <tooltip transfer={true} max-width='600' disabled={(item.tooltip === item.caption) || !item.tooltip}>
                            <i-button class={this.getToolBarItemClass(item)} loading={this.isViewLoading}>
                                {item.icon ? <menu-icon item={item}/> : null}
                                {item.caption ? <span class='caption'>{item.caption}</span> : null}
                                <icon type='ios-arrow-down'></icon>
                            </i-button>
                            <div slot='content'>{item.tooltip}</div>
                        </tooltip>
                        <dropdown-menu slot='list'>{this.renderMenuItems(item.items)}</dropdown-menu>
                    </dropdown>);
            }
            return this.renderMenuItem(item);
        });
    }
    /**
     * 渲染直接内容
     *
     * @protected
     * @returns {*}
     * @memberof ViewToolbar
     */
    renderRawItem(item) {
        let { style, rawContent, htmlContent, rawType, getPSSysImage } = item;
        let content;
        let sysImage = getPSSysImage === null || getPSSysImage === void 0 ? void 0 : getPSSysImage.cssClass;
        let sysImgurl = getPSSysImage === null || getPSSysImage === void 0 ? void 0 : getPSSysImage.imagePath;
        if (Object.is(rawType, 'RAW')) {
            content = rawContent;
        }
        else if (Object.is(rawType, 'HTML')) {
            content = htmlContent;
        }
        if (content) {
            const items = content.match(/\{{(.+?)\}}/g);
            if (items) {
                items.forEach((item) => {
                    content = content.replace(/\{{(.+?)\}}/, eval(item.substring(2, item.length - 2)));
                });
            }
            content = content.replaceAll('&lt;', '<');
            content = content.replaceAll('&gt;', '>');
            content = content.replaceAll('&amp;nbsp;', ' ');
            content = content.replaceAll('&nbsp;', ' ');
        }
        return (<app-rawitem class={item.class} style={style} imageClass={sysImage} imgUrl={sysImgurl} contentType={rawType} content={content}>
            </app-rawitem>);
    }
    /**
     * 绘制工具栏内容
     *
     * @returns {*}
     * @memberof ViewToolbar
     */
    render() {
        if (this.items.length == 0) {
            return;
        }
        let content = this.mode == "STYLE2" ? this.renderStyle2() : this.renderDefault();
        return <div class={{ 'toolbar-container': true, 'view-toolbar': true, 'style2': this.mode == "STYLE2" ? true : false }}>{content}</div>;
    }
    /**
     * 绘制工具栏项样式
     *
     * @returns {*}
     * @memberof ViewToolbar
     */
    getToolBarItemClass(item) {
        const uiAction = item.uiaction;
        let tempClass = `toolbar_${item.name}` + uiAction ? '' : ` ${uiAction.uIActionTag}`;
        if (item.actionLevel) {
            tempClass += ` srfactionlevel${item.actionLevel}`;
        }
        if (item.class) {
            tempClass += ` ${item.class}`;
        }
        return tempClass;
    }
};
__decorate([
    Prop()
], ViewToolbar.prototype, "toolbarModels", void 0);
__decorate([
    Prop({ default: 'DEFAULT' })
], ViewToolbar.prototype, "mode", void 0);
__decorate([
    Prop()
], ViewToolbar.prototype, "counterServiceArray", void 0);
__decorate([
    Prop({ default: false })
], ViewToolbar.prototype, "isViewLoading", void 0);
__decorate([
    Watch('toolbarModels', { immediate: true })
], ViewToolbar.prototype, "watchModels", null);
__decorate([
    Emit('item-click')
], ViewToolbar.prototype, "itemClick", null);
ViewToolbar = __decorate([
    Component({})
], ViewToolbar);
export { ViewToolbar };