import { DragDesignItemBase } from '../drag-design-item-base';
import './design-container-base.less';
/**
 * 表单分组
 *
 * @export
 * @class DesignContainerBase
 * @extends {DragDesignItemBase}
 */
export class DesignContainerBase extends DragDesignItemBase {
    constructor() {
        super(...arguments);
        /**
         * 子成员布局模式
         *
         * @protected
         * @type {boolean}
         * @memberof ContainerBase
         */
        this.isChildFlexStyle = false;
        /**
         * 是否为容器
         *
         * @protected
         * @type {boolean}
         * @memberof DragItem
         */
        this.isContainer = true;
    }
    async load() {
        await this.loadChild({
            srfpkey: this.data.srfkey,
        });
    }
    /**
     * 计算当前布局模式
     *
     * @memberof ContainerBase
     */
    calcLayoutMode() {
        if (Object.is(this.data.layoutmode, 'FLEX')) {
            this.isChildFlexStyle = true;
        }
        else {
            this.isChildFlexStyle = false;
        }
        super.calcLayoutMode();
    }
    /**
     * 是否为Flex布局
     *
     * @protected
     * @param {*} node
     * @returns {boolean}
     * @memberof ContainerBase
     */
    isFlexLayout(data) {
        return Object.is(data.layoutmode, 'FLEX');
    }
    /**
     * 计算Flex容器样式
     *
     * @protected
     * @param {*} tag
     * @returns {any}
     * @memberof ContainerBase
     */
    getLayoutFlexStyle(data, isFlex = this.isChildFlexStyle) {
        if (isFlex && data) {
            return {
                display: 'flex',
                'flex-direction': data.flexdir,
                'justify-content': data.flexalign,
                'align-items': data.flexvalign,
                'flex-grow': data.flexgrow,
                padding: `${this.data.padding}px`,
            };
        }
        return {
            padding: `${this.data.padding}px`,
        };
    }
    /**
     * 设置额外draggable参数
     *
     * @protected
     * @returns {VNodeData}
     * @memberof ContainerBase
     */
    getDraggableOtherParams() {
        return {
            style: this.getLayoutFlexStyle(this.data),
        };
    }
    /**
     * draggable 样式
     *
     * @param {*} [item]
     * @returns {*}
     * @memberof ContainerBase
     */
    getDraggableClass() {
        const data = this.data;
        return Object.assign(Object.assign({}, super.getDraggableClass()), { 'ant-row': !this.isChildFlexStyle, 'grid-layout': !this.isChildFlexStyle, 'flex-layout': this.isChildFlexStyle, 'flex-row': this.isChildFlexStyle && data.flexdir && data.flexdir.indexOf('column') === -1, 'flex-column': this.isChildFlexStyle && data.flexdir && data.flexdir.indexOf('column') !== -1 });
    }
}