import { IPSDEFormDetail, PSDEFormDetail } from '@ibizstudio/api';
import { VueLifeCycleProcessing } from '../../../decorators';
import { Component, Prop } from 'vue-property-decorator';
import { DragDesignItemBase } from '../drag-design-item-base';
import './design-page.less';
import { generateOrderValue } from 'qx-util';

/**
 * 表单分页
 *
 * @export
 * @class DesignPage
 * @extends {DragDesignItemBase}
 */
@Component({})
@VueLifeCycleProcessing()
export class DesignPage extends DragDesignItemBase {
    @Prop({ default: 'FORMPAGE' })
    itemType!: string;

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

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

    accCrated(data: IPSDEFormDetail): void {
        if (data.itemtype === this.itemType) {
            this.load();
        }
    }

    accRemove(data: IPSDEFormDetail): void {
        if (data.itemtype === this.itemType) {
            this.load();
        }
    }

    async load() {
        this.loadChild({
            itemtype: this.itemType,
            psdeformid: this.ctx.context.psdeform,
        });
    }

    async addPage() {
        const data = await this.getDraft(new PSDEFormDetail({ itemtype: this.itemType }));
        const newIndex = this.list.length;
        await this.updateOrderValue(newIndex + 1);
        this.list.splice(newIndex, 1);
        data.ordervalue = generateOrderValue(newIndex);
        data.srfordervalue = data.ordervalue;
        await this.create(data);
    }

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

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

    render() {
        if(this.ctx.isPreview && this.list.length === 1){
          return (
              <ibz-design-page-content
                  ctx={this.ctx}
                  data={this.list[0]}
                  parentData={this.data}
              />
          )
        }
        return (
            <design-tabs
                key='ibz-design-page'
                class='ibz-design-page'
                activeItem={this.activateData}
                ctx={this.ctx}
                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-page-content
                            key={item.srfkey}
                            ctx={this.ctx}
                            data={item}
                            parentData={this.data}
                        />
                    );
                }}
            />
        );
    }
}