import { Component, Prop } from 'vue-property-decorator';
import { DesignViewBase, VueLifeCycleProcessing } from '@ibizstudio/dynamic-design';
import { PanelDesignContext } from '../../entities';
import './panel-design.less';

@Component({})
@VueLifeCycleProcessing()
export class PanelDesign extends DesignViewBase {
    /**
     * 应用上下文
     *
     * @type {IFromDesignContext}
     * @memberof FormDesign
     */
    @Prop({ default: () => new PanelDesignContext() })
    ctx!: PanelDesignContext;

    split = 0.8;

    /**
     * Vue生命周期，dom挂载完毕
     *
     * @memberof FormDesign
     */
    mounted() {
        this.ctx.ctrl.setViewModel(this.viewModel);
        this.$forceUpdate();
    }

    save() {
        return this.ctx.ctrl.save();
    }

    renderMaterial() {
        return [
            this.renderMaterialSearch(),
            <ibz-design-panel-layout key='1' title='容器' ctx={this.ctx} searchValue={this.materialSearch} />,
            <ibz-design-panel-item key='2' title='面板项' ctx={this.ctx} searchValue={this.materialSearch} />,
            // <ibz-design-panel-logic key='3' title='逻辑' ctx={this.ctx} />,
            // <ibz-design-panel-engine key='4' title='引擎' ctx={this.ctx} />,
        ];
    }

    /**
     * 绘制结构树
     *
     * @author chitanda
     * @date 2021-04-14 11:04:31
     * @return {*}  {*}
     */
    renderStructureTree(): any {
        return (
            <div class='structure-tree'>
                {this.renderStructureSearch()}
                <ibz-design-structure-tree ctx={this.ctx} searchValue={this.structureSearch} />
            </div>
        );
    }

    activePanel(): void {
        this.ctx.ctrl.select.set(this.ctx.ctrl.masterData);
    }

    renderActions() {
        return (
            <div class='panel-design-actions' on-click={(e: MouseEvent) => e.stopPropagation()}>
                <div class='panel-design-action-item'>
                    <i-button
                        title='打开表单主数据'
                        shape='circle'
                        icon='ios-home'
                        size='small'
                        on-click={() => this.activePanel()}
                    />
                </div>
            </div>
        );
    }

    /**
     * 绘制内容区
     *
     * @author chitanda
     * @date 2021-04-14 11:04:37
     * @return {*}  {*}
     */
    renderContent(): any {
        return (
            <div class='panel-design'>
                {this.renderActions()}
                <ibz-design-panel-design-content ctx={this.ctx} />
                {/* <split v-model={this.split} mode='vertical'>
                <template slot='top'>
                </template>
                <template slot='bottom'>
                    <ibz-design-panel-design-content-footer attrs={{ slot: 'content' }} ctx={this.ctx} />
                </template>
                </split> */}
            </div>
        );
    }
}