import { __decorate } from "tslib";
import { Vue, Component, Prop } from 'vue-property-decorator';
import './design-default-content.less';
/**
 * 表单设计区容器
 *
 * @export
 * @class DesignDefaultContent
 * @extends {Vue}
 */
let DesignDefaultContent = class DesignDefaultContent extends Vue {
    constructor() {
        super(...arguments);
        /**
         * 表单数据
         *
         * @type {*}
         * @memberof DesignDefaultContent
         */
        this.data = null;
    }
    created() {
        this.load();
    }
    async load() {
        var _a;
        const loading = this.$loading({
            lock: true,
            text: '加载中...',
            background: '#ffffffe6',
        });
        const { ctrl } = this.ctx;
        const data = await ctrl.load();
        if (data) {
            this.data = data;
            this.$emit('ctrl', data);
            if (((_a = this.data) === null || _a === void 0 ? void 0 : _a.mobflag) === 1) {
                Object.assign(this.ctx.context, { mobflag: this.data.mobflag });
            }
            this.ctx.context.formtype = this.data.formtype;
            if (!this.ctx.context.pssysapp) {
                this.ctx.context.pssysapp = this.data.pssysappid;
            }
        }
        this.ctx.loaded = true;
        loading.close();
    }
    /**
     * 激活主数据
     *
     * @memberof DesignDefaultContent
     */
    activeMasterData() {
        this.ctx.ctrl.select.set(this.data);
    }
    /**
     * 设置mobflag标识
     *
     * @param {number} mobflag
     * @memberof DesignDefaultContent
     */
    setMobflag(mobflag) {
        this.data.mobflag = mobflag;
    }
    renderActions(h) {
        return (<div class='design-actions' on-click={(e) => e.stopPropagation()}>
                <div class='design-action-item'>
                    <i-button size='small' icon='ios-desktop-outline' on-click={() => {
                this.setMobflag(0);
            }}></i-button>
                    <i-button size='small' icon='md-tablet-portrait' on-click={() => {
                this.setMobflag(1);
            }}></i-button>
                </div>
                <div class='design-action-item'>
                    <i-button title='打开表单主数据' shape='circle' icon='ios-home' size='small' on-click={() => this.activeMasterData()}></i-button>
                </div>
                <div class='design-action-item'>
                    <i-switch value={this.ctx.state.hidden} title={this.ctx.state.hidden ? '显示隐藏表单项' : '隐藏隐藏表单项'} size='large' on-on-change={(bol) => {
                this.ctx.state.setHiddenState(bol);
                this.$forceUpdate();
            }}>
                        <span slot='open'>显示</span>
                        <span slot='close'>隐藏</span>
                    </i-switch>
                </div>
            </div>);
    }
    render(h) {
        var _a, _b, _c;
        const { select } = this.ctx.ctrl;
        return (<div class={`ibz-design-container ${((_a = this.data) === null || _a === void 0 ? void 0 : _a.mobflag) === 1 ? 'mobile' : ''}`} on-click={() => this.activeMasterData()}>
                {this.renderActions(h)}
                {this.data ? (<div class={{
                    'ibz-design-content': true,
                    'drag-item-container': true,
                    active: ((_b = select.data) === null || _b === void 0 ? void 0 : _b.srfkey) === ((_c = this.data) === null || _c === void 0 ? void 0 : _c.srfkey),
                }}>
                        {this.ctx.loaded ? h(this.childComponent, { props: { ctx: this.ctx } }) : null}
                    </div>) : null}
            </div>);
    }
};
__decorate([
    Prop()
], DesignDefaultContent.prototype, "ctx", void 0);
__decorate([
    Prop()
], DesignDefaultContent.prototype, "childComponent", void 0);
DesignDefaultContent = __decorate([
    Component({})
], DesignDefaultContent);
export { DesignDefaultContent };