import { IPSPanelEngine, PSPanelEngineService } from '@ibizstudio/api';
import { DesignItemBase, VueLifeCycleProcessing } from '@ibizstudio/dynamic-design';
import { generateOrderValue } from 'qx-util';
import { CreateElement, VNode } from 'vue';
import { Component } from 'vue-property-decorator';

/**
 * 面板项引擎设计
 *
 * @export
 * @class EngineDesignContent
 * @extends {Vue}
 */
@Component({})
@VueLifeCycleProcessing()
export class EngineDesignContent extends DesignItemBase {
    service!: PSPanelEngineService;

    async componentCreated() {
        this.masterLoaded = this.masterLoaded.bind(this);
        this.service = await ___ibz___.gs!.getPSPanelEngineService();
        this.ctx.evt.on('loaded', this.masterLoaded);
    }

    componentDestroyed() {
        this.ctx.evt.off('loaded', this.masterLoaded);
    }

    generateOption(): any {
        return {
            group: {
                name: this.ctx.tag + '-engine',
                pull: false,
            },
            sort: false,
        };
    }

    masterLoaded(): void {
        this.loadChild();
    }

    /**
     * 新增项
     *
     * @param {{ element: IPSPanelEngine; newIndex: number }} _opt
     * @return {*}  {Promise<void>}
     * @memberof DesignItemBase
     */
    async add({ element, newIndex }: { element: IPSPanelEngine; newIndex: number }): Promise<void> {
        this.list.splice(newIndex, 1);
        element.ordervalue = generateOrderValue(newIndex);
        element.srfordervalue = element.ordervalue;
        element.pspanelenginename = 'engine';
        const res = await this.service.GetDraftTemp(this.ctx.context, element);
        if (res.ok) {
            await this.service.CreateTemp(this.ctx.context, res.data);
            await this.loadChild();
            this.$forceUpdate();
            this.updateOrderValue(newIndex);
        }
    }

    /**
     * 删除项
     *
     * @param {IPSPanelEngine} item
     * @return {*}  {Promise<void>}
     * @memberof EngineDesignContent
     */
    async remove(item: IPSPanelEngine, i: number): Promise<void> {
        const res = await this.service.RemoveTemp(this.ctx.context, item);
        if (res.ok) {
            this.list.splice(i, 1);
        }
    }

    renderContentList(_h: CreateElement): VNode[] {
        return this.list.map((item: any, i: number) => {
            return (
                <div
                    key={i}
                    class={{ 'panel-engine-item': true, select: this.ctx.ctrl.select.data?.srfkey === item.srfkey }}
                    on-click={() => this.setSelect(item)}
                >
                    <div class='item-label'>{item.text}</div>
                    <div class='item-actions'>
                        <div
                            class='action-item remove'
                            on-click={(e: MouseEvent) => {
                                e.stopPropagation();
                                this.remove(item, i);
                            }}
                        >
                            <icon type='md-trash' />
                        </div>
                    </div>
                </div>
            );
        });
    }

    render(h: CreateElement) {
        return (
            <card dis-hover padding={0} title='引擎设计' class='engine-design-content design-content'>
                {this.renderDraggable(this.list, this.renderContentList(h))}
            </card>
        );
    }
}