import { __decorate } from "tslib";
import { DesignItemBase, VueLifeCycleProcessing } from '@ibizstudio/dynamic-design';
import { generateOrderValue } from 'qx-util';
import { Component } from 'vue-property-decorator';
/**
 * 面板项引擎设计
 *
 * @export
 * @class EngineDesignContent
 * @extends {Vue}
 */
let EngineDesignContent = class EngineDesignContent extends DesignItemBase {
    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() {
        return {
            group: {
                name: this.ctx.tag + '-engine',
                pull: false,
            },
            sort: false,
        };
    }
    masterLoaded() {
        this.loadChild();
    }
    /**
     * 新增项
     *
     * @param {{ element: IPSPanelEngine; newIndex: number }} _opt
     * @return {*}  {Promise<void>}
     * @memberof DesignItemBase
     */
    async add({ element, newIndex }) {
        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, i) {
        const res = await this.service.RemoveTemp(this.ctx.context, item);
        if (res.ok) {
            this.list.splice(i, 1);
        }
    }
    renderContentList(_h) {
        return this.list.map((item, i) => {
            var _a;
            return (<div key={i} class={{ 'panel-engine-item': true, select: ((_a = this.ctx.ctrl.select.data) === null || _a === void 0 ? void 0 : _a.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) => {
                    e.stopPropagation();
                    this.remove(item, i);
                }}>
                            <icon type='md-trash'/>
                        </div>
                    </div>
                </div>);
        });
    }
    render(h) {
        return (<card dis-hover padding={0} title='引擎设计' class='engine-design-content design-content'>
                {this.renderDraggable(this.list, this.renderContentList(h))}
            </card>);
    }
};
EngineDesignContent = __decorate([
    Component({}),
    VueLifeCycleProcessing()
], EngineDesignContent);
export { EngineDesignContent };