import { Vue, Component, Prop, Emit } from 'vue-property-decorator';
import { CreateElement } from 'vue';
import { IPSDEToolbarItem } from '@ibizstudio-ex/runtime';
import './design-view-toolbar.less';

@Component
export class DesignViewToolBar extends Vue {
    /**
     * 工具栏模型
     *
     * @author chitanda
     * @date 2021-04-13 15:04:02
     * @type {ToolbarItem[]}
     */
    @Prop()
    public toolbarModels?: IPSDEToolbarItem[];

    /**
     * 绘制内容
     *
     * @param {CreateElement} h
     * @memberof DesignViewToolBar
     */
    render(h: CreateElement) {
        return (
            <div class='design-view-toolbar'>
                {this.toolbarModels
                    ? this.toolbarModels.map((item: IPSDEToolbarItem) => {
                          return this.renderToolBarItem(item);
                      })
                    : null}
            </div>
        );
    }

    /**
     * 工具栏项单击事件
     *
     * @param {*} { tag }
     * @param {*} e
     * @memberof DesignViewToolBar
     */
    @Emit('item-click')
    public itemClick(uiAction: any, e: MouseEvent): void {}

    /**
     * @description 获取项样式名
     * @param {IPSDEToolbarItem} item
     * @return {*}
     * @memberof DesignViewToolBar
     */
    getItemClass(item: IPSDEToolbarItem) {
        const css = item.getPSSysCss();
        return css ? css.cssName : '';
    }

    /**
     * @description 绘制图标
     * @memberof DesignViewToolBar
     */
    renderIcon(item: IPSDEToolbarItem) {
        const sysImg = item.getPSSysImage();
        if (sysImg) {
            const menuItem = { iconcls: sysImg.cssClass, icon: sysImg.imagePath };
            return (
                <div class='icon' on-click={(e: any) => this.itemClick({ tag: item.name }, e)}>
                    <menu-icon item={menuItem} />
                </div>
            );
        }
    }

    /**
     * 绘制工具栏项
     *
     * @param {ToolbarItem} item
     * @memberof DesignViewToolBar
     */
    renderToolBarItem(item: IPSDEToolbarItem) {
        return (
            <div class='toolbar-item' title={item.caption}>
                {item.showIcon ? this.renderIcon(item) : null}
                {item.showCaption ? (
                    <i-button
                        class={this.getItemClass(item)}

                        on-click={(e: any) => this.itemClick({ tag: item.name }, e)}
                    >
                        <span class='caption'>{item.caption}</span>
                    </i-button>
                ) : (
                    ''
                )}
            </div>
        );
    }
}