import { PSSysViewPanelItem } from '@ibizstudio/api';
import { VueLifeCycleProcessing } from '@ibizstudio/dynamic-design';
import { Component } from 'vue-property-decorator';
import { CreateElement } from 'vue';
import { PanelMaterialBase } from '../panel-material-base';

/**
 * 面板项
 *
 * @export
 * @class PanelItem
 * @extends {PanelMaterialBase}
 */
@Component({})
@VueLifeCycleProcessing()
export class PanelItem extends PanelMaterialBase {
    /**
     * 是否为搜索表单
     *
     * @type {boolean}
     * @memberof PanelItem
     */
    isSearchForm: boolean = false;

    /**
     * 绘制拖拽容器class
     *
     * @returns {*}
     * @memberof PanelItem
     */
    getClass(): any {
        return {
            ...super.getClass(),
            'material-form-item': true,
        };
    }

    /**
     * 获取可创建的项
     *
     * @memberof MaterialFormItem
     */
    componentCreated(): void {
        this.layoutState = this.layoutState.bind(this);
        this.ctx.ctrl.evt.on('layoutState', this.layoutState);
    }

    /**
     * 布局状态变更
     *
     * @param {number} viewlayoutflag
     * @memberof PanelItem
     */
    layoutState(viewlayoutflag: number | undefined): void {
        this.list = [];
        this.list.push({
            text: '直接内容',
            tooltip: '直接内容',
            iconcls: 'iconfont icon-code',
            data: new PSSysViewPanelItem({ itemtype: 'RAWITEM' }),
        });
        this.list.push({
            text: '面板属性',
            tooltip: '面板属性',
            iconcls: 'iconfont icon-control',
            data: new PSSysViewPanelItem({ itemtype: 'FIELD' }),
        });
        if (viewlayoutflag === 1) {
            this.list.push({
                text: '控件占位',
                tooltip: '控件占位',
                iconcls: 'iconfont icon-control',
                data: new PSSysViewPanelItem({ itemtype: 'CTRLPOS' }),
            });
            this.list.push({
                text: '控件',
                tooltip: '控件',
                iconcls: 'iconfont icon-control',
                data: new PSSysViewPanelItem({ itemtype: 'CONTROL' }),
            });
            this.list.push({
                text: '按钮',
                tooltip: '按钮',
                iconcls: 'iconfont icon-button',
                data: new PSSysViewPanelItem({ itemtype: 'BUTTON' }),
            });
            this.list.push({
                text: '自定义部件',
                tooltip: '自定义部件',
                iconcls: 'iconfont icon-control',
                data: new PSSysViewPanelItem({ itemtype: 'USERCONTROL' }),
            });
        } else {
            this.list.push({
                text: '控件',
                tooltip: '控件',
                iconcls: 'iconfont icon-control',
                data: new PSSysViewPanelItem({ itemtype: 'CONTROL' }),
            });
            this.list.push({
                text: '按钮',
                tooltip: '按钮',
                iconcls: 'iconfont icon-button',
                data: new PSSysViewPanelItem({ itemtype: 'BUTTON' }),
            });
            this.list.push({
                text: '自定义部件',
                tooltip: '自定义部件',
                iconcls: 'iconfont icon-control',
                data: new PSSysViewPanelItem({ itemtype: 'USERCONTROL' }),
            });
        }
    }
}