import { Vue, Component, Prop } from 'vue-property-decorator';
import { IPanelDesignContext } from '../../interface';
import './panel-design-content.less';

/**
 * 面板设计区容器
 *
 * @export
 * @class PanelDesignContent
 * @extends {Vue}
 */
@Component({})
export class PanelDesignContent extends Vue {
    /**
     * 面板设计上下文
     *
     * @type {IPanelDesignContext}
     * @memberof PanelDesignContent
     */
    @Prop()
    ctx!: IPanelDesignContext;

    created() {
        this.ctx.ctrl.initAction();
        this.load();
    }

    async load(): Promise<void> {
        const loading = (this as any).$loading({
            lock: true,
            text: '加载中...',
            background: '#ffffffe6',
        });
        const { ctrl } = this.ctx;
        try {
           await ctrl.load();
        } catch (err) {
            this.$throw(err);
        }
        this.ctx.loaded = true;
        loading.close();
    }

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

    render() {
        const { select, masterData } = this.ctx.ctrl;
        return (
            <div class='ibz-panel-design-container' on-click={(e: MouseEvent) => this.activePanel(e)}>
                {masterData ? (
                    <div
                        class={{
                            'ibz-panel-design-content': true,
                            'drag-item-container': true,
                            active: select.data?.srfkey === masterData?.srfkey,
                        }}
                    >
                        {this.ctx.loaded ? <ibz-design-panel-content ctx={this.ctx} /> : null}
                    </div>
                ) : null}
            </div>
        );
    }
}