import { IPSDEFormDetail, PSDEFormDetail } from '@ibizstudio/api';
import { VueLifeCycleProcessing } from '../../../decorators';
import { Component, Prop } from 'vue-property-decorator';
import { DesignContainerBase } from '../design-container-base/design-container-base';
import './design-tab-panel.less';

/**
 * 其他表单项类型
 *
 * @export
 * @class DesignTabPanel
 * @extends {DragDesignItemBase}
 */
@Component({})
@VueLifeCycleProcessing()
export class DesignTabPanel extends DesignContainerBase {
    @Prop({ default: 'TABPAGE' })
    itemType!: string;

    /**
     * 当前激活表单分页
     *
     * @type {IPSDEFormDetail}
     * @memberof DesignTabPanel
     */
    activateData: any = null;

    /**
     * 激活数据变更
     *
     * @param {T} data
     * @memberof DesignTabPanel
     */
    activeChange(data: IPSDEFormDetail): void {
        if (data.itemtype === this.itemType && data.ppsdeformdetailid === this.data.psdeformdetailid) {
            this.activateData = data;
        }
    }

    async addPage() {
        const data = await this.getDraft(new PSDEFormDetail({ itemtype: this.itemType }));
        await this.create(data);
    }

    removePage(item: PSDEFormDetail) {
        this.remove(item.srfkey);
    }

    change(evt: any) {
        if (evt?.moved) {
            this.move(evt.moved);
        }
    }

    calcStyle() {
        super.calcStyle();
        if (this.style.height == null) {
            this.style.height = '200px';
        }
    }

    renderContent() {
        const style: any = {};
        const { padding } = this.data;
        const contentStyle = this.getContentStyle(this.data);
        return (
            <div
                key={this.data.srfkey}
                style={`padding: ${padding}px;${contentStyle}`}
                class={['ibz-design-tab-panel-container', 'drag-item-container', { active: this.active }]}
            >
                <design-tabs
                    key='ibz-design-tab-panel'
                    class='ibz-design-tab-panel'
                    activeItem={this.activateData}
                    list={this.list}
                    on-active-item-change={(item: any) => this.setSelect(item)}
                    on-remove-page={(item: any) => this.removePage(item)}
                    on-add-page={() => this.addPage()}
                    on-change={(e: any) => this.change(e)}
                    renderTabItemContent={(_h: any, item: any) => {
                        return (
                            <ibz-design-tab-panel-content
                                key={item.srfkey}
                                ctx={this.ctx}
                                data={item}
                                parentData={this.data}
                            />
                        );
                    }}
                />
            </div>
        );
    }
}