import { PSDEFormDetail } from '@ibizstudio/api';
import { DragDesignItemBase } from '../drag-design-item-base';
import './design-container-base.less';

/**
 * 表单分组
 *
 * @export
 * @class DesignContainerBase
 * @extends {DragDesignItemBase}
 */
export class DesignContainerBase extends DragDesignItemBase {
    /**
     * 子成员布局模式
     *
     * @protected
     * @type {boolean}
     * @memberof ContainerBase
     */
    protected isChildFlexStyle: boolean = false;
    /**
     * 是否为容器
     *
     * @protected
     * @type {boolean}
     * @memberof DragItem
     */
    protected isContainer: boolean = true;

    async load() {
        await this.loadChild({
            srfpkey: this.data.srfkey,
        });
    }

    /**
     * 计算当前布局模式
     *
     * @memberof ContainerBase
     */
    calcLayoutMode(): void {
        if (Object.is(this.data.layoutmode, 'FLEX')) {
            this.isChildFlexStyle = true;
        } else {
            this.isChildFlexStyle = false;
        }
        super.calcLayoutMode();
    }

    /**
     * 是否为Flex布局
     *
     * @protected
     * @param {*} node
     * @returns {boolean}
     * @memberof ContainerBase
     */
    protected isFlexLayout(data: any): boolean {
        return Object.is(data.layoutmode, 'FLEX');
    }

    /**
     * 计算Flex容器样式
     *
     * @protected
     * @param {*} tag
     * @returns {any}
     * @memberof ContainerBase
     */
    protected getLayoutFlexStyle(data: PSDEFormDetail, isFlex: boolean = this.isChildFlexStyle): any {
        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(): any {
        const data = this.data;
        return {
            ...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,
        };
    }
}