import { Component, Vue, Prop } from 'vue-property-decorator';
import { CreateElement } from 'vue';
import { IPanelAbsoluteLayoutContext } from '../../../interface/i-panel-absolute-layout-context';
import './panel-absolute-layout-container.less';

@Component
export class PanelAbsoluteLayoutContainer extends Vue {
    /**
     * 面板绝对布局设计上下文
     *
     * @type {IPanelAbsoluteLayoutContext}
     * @memberof PanelAbsoluteLayoutContainer
     */
    @Prop()
    ctx!: IPanelAbsoluteLayoutContext;

    /**
     * Vue生命周期，实力创建完毕
     *
     * @memberof PanelAbsoluteLayoutContainer
     */
    async created() {
        const loadingInstance = this.$loading({ 
          lock: true,
          text: '加载中...',
          background: '#ffffffe6',
        });
        const res = await this.ctx.ctrl.load();
        if (res) {
            this.ctx.ctrl.evt.emit('loaded');
        } else {
            this.$message.error('加载失败');
        }
        loadingInstance.close();
    }

    /**
     * 绘制函数
     *
     * @param {CreateElement} h
     * @memberof PanelAbsoluteLayoutContainer
     */
    render(h: CreateElement) {
        return (
            <div class='panel-absolute-layout-container'>
                <design-container showMaterial={true}>
                    <template slot='material'>
                        <absolute-layout-panel-item ctx={this.ctx} title='面板项'></absolute-layout-panel-item>
                    </template>
                    <template slot='materialList'>
                        <absolute-layout-panel-list-item ctx={this.ctx}></absolute-layout-panel-list-item>
                    </template>
                    <template slot='content'>
                        <panel-absolute-layout-content ctx={this.ctx}></panel-absolute-layout-content>
                    </template>
                    <template slot='attributes'>
                        <pssys-view-panel-property ctx={this.ctx} />
                    </template>
                </design-container>
            </div>
        );
    }
}