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

/**
 * 表单设计区容器
 *
 * @export
 * @class DesignDefaultContent
 * @extends {Vue}
 */
@Component({})
export class DesignDefaultContent extends Vue {
    /**
     * 表单设计上下文
     *
     * @type {IFromDesignContext}
     * @memberof DesignDefaultContent
     */
    @Prop()
    ctx!: IDesignContext;

    /**
     * 默认子组件
     *
     * @type {string}
     * @memberof DesignDefaultContent
     */
    @Prop()
    childComponent!: string;

    /**
     * 表单数据
     *
     * @type {*}
     * @memberof DesignDefaultContent
     */
    data: any = null;

    created(): void {
        this.load();
    }

    async load(): Promise<any> {
        const loading = (this as any).$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 (this.data?.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(): void {
        this.ctx.ctrl.select.set(this.data);
    }

    /**
     * 设置mobflag标识
     *
     * @param {number} mobflag
     * @memberof DesignDefaultContent
     */
    setMobflag(mobflag: number) {
        this.data.mobflag = mobflag;
    }

    renderActions(h: CreateElement) {
        return (
            <div class='design-actions' on-click={(e: MouseEvent) => 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: boolean) => {
                            this.ctx.state.setHiddenState(bol);
                            this.$forceUpdate();
                        }}
                    >
                        <span slot='open'>显示</span>
                        <span slot='close'>隐藏</span>
                    </i-switch>
                </div>
            </div>
        );
    }

    render(h: CreateElement) {
        const { select } = this.ctx.ctrl;
        return (
            <div
                class={`ibz-design-container ${this.data?.mobflag === 1 ? 'mobile' : ''}`}
                on-click={() => this.activeMasterData()}
            >
                {this.renderActions(h)}
                {this.data ? (
                    <div
                        class={{
                            'ibz-design-content': true,
                            'drag-item-container': true,
                            active: select.data?.srfkey === this.data?.srfkey,
                        }}
                    >
                        {this.ctx.loaded ? h(this.childComponent, { props: { ctx: this.ctx } }) : null}
                    </div>
                ) : null}
            </div>
        );
    }
}