import { VueLifeCycleProcessing } from '../../../decorators';
import { VNode } from 'vue';
import { Component } from 'vue-property-decorator';
import { DragDesignItemBase } from '../drag-design-item-base';
import './design-other.less';

/**
 * 其他表单项类型
 *
 * @export
 * @class DesignOther
 * @extends {DragDesignItemBase}
 */
@Component({})
@VueLifeCycleProcessing()
export class DesignOther extends DragDesignItemBase {
    calcColClass(item: any) {
        return {
            'ibz-design-other-container': true,
            ...super.calcColClass(item),
        };
    }

    renderContent() {
        return (
            <div key={this.data.srfkey} class={['drag-item-container', 'ibz-design-other', { active: this.active }]}>
                {this.renderItem(this.data)}
            </div>
        );
    }

    /**
     * 绘制项
     *
     * @param {any} node
     * @returns {VNode}
     * @memberof DesignOther
     */
    renderItem(data: any): VNode | null {
        return <ibz-design-item-content data={data} renderType={'other'} ctx={this.ctx}></ibz-design-item-content>;
    }
}