import { VueLifeCycleProcessing } from '../../../decorators';
import { Component } from 'vue-property-decorator';
import { DesignContainerBase } from '../design-container-base/design-container-base';
import './design-page-content.less';

/**
 * 其他表单项类型
 *
 * @export
 * @class DesignPageContent
 * @extends {DesignContainerBase}
 */
@Component({})
@VueLifeCycleProcessing()
export class DesignPageContent extends DesignContainerBase {
    render() {
        const style: any = {};
        const { margin, padding } = this.data;
        if (margin != null) {
            style.margin = margin + 'px';
        }
        if (padding != null) {
            style.padding = padding + 'px';
        }
        return (
            <div
                style={style}
                class={['ibz-design-page-content', 'drag-item-container', { active: this.active }]}
                on-click={(e: any) => this.onActiveClick(e, this.data)}
            >
                {this.renderDraggable(this.list, this.renderChild())}
            </div>
        );
    }
}