import { VueLifeCycleProcessing } from '../../../decorators';
import { Component } from 'vue-property-decorator';
import { DragDesignItemBase } from '../drag-design-item-base';
import moment from 'moment';
import { PSDEFormDetail } from '@ibizstudio/api';
import './design-item.less';

/**
 * 表单分组
 *
 * @export
 * @class DesignItem
 * @extends {DragDesignItemBase}
 */
@Component({})
@VueLifeCycleProcessing()
export class DesignItem extends DragDesignItemBase {
    calcColClass(item: any) {
        return {
            'ibz-design-item-container': true,
            hidden: this.ctx.state.hidden && this.data.editortype === 'HIDDEN',
            ...super.calcColClass(item),
        };
    }
    renderContent() {
        return (
            <div class={['drag-item-container', 'ibz-design-item', { active: this.active }]}>
                {this.renderDesignItem(this.data)}
            </div>
        );
    }

    /**
     * 绘制Pc端表单项
     *
     * @param {*} item
     * @returns {VNode}
     * @memberof DesignItem
     */
    public renderDesignItem(data: PSDEFormDetail): any {
        return <ibz-design-item-content ctx={this.ctx} data={data} renderType={'item'}></ibz-design-item-content>;
    }
}