import { AbsoluteLayoutList } from '@ibizstudio/absolute-layout-design';
import { VueLifeCycleProcessing } from '@ibizstudio/dynamic-design';
import { clone } from 'ramda';
import { Component, Prop } from 'vue-property-decorator';
import { IPanelAbsoluteLayoutContext } from '../../../../interface';

@Component
@VueLifeCycleProcessing()
export class AbsoluteLayoutPanelListItem extends AbsoluteLayoutList {
    @Prop()
    ctx!: IPanelAbsoluteLayoutContext;
    /**
     * 获取可创建的项
     *
     * @memberof AbsoluteLayoutPanelItem
     */
    async componentCreated() {
        this.loaded = this.loaded.bind(this);
        this.ctx.ctrl.evt.on('loaded', this.loaded);
        this.ctx.ctrl.itemCtrl.evt.on('added', this.loaded);
    }

    async componentBeforeDestroy() {
        this.ctx.ctrl.evt.off('loaded', this.loaded);
        this.ctx.ctrl.itemCtrl.evt.off('added', this.loaded);
    }

    /**
     * 列表项加载事件
     *
     * @memberof AbsoluteLayoutPanelListItem
     */
    async loaded() {
        const { ctrl } = this.ctx;
        const arr: any[] = [];
        let items = await ctrl.itemCtrl.selectPanelItems();
        if (items && items.length > 0) {
            items = items.sort((a: any, b: any) => b.srfordervalue - a.srfordervalue);
            arr.push(...items);
            this.items = arr;
            this.$forceUpdate();
        }
    }

    /**
     * 列表项拖拽完成事件
     *
     * @memberof AbsoluteLayoutPanelListItem
     */
    async onDragEnd() {
        for (let i = 0; i < this.items.length; i++) {
            const { ctrl, context } = this.ctx;
            this.items[i].srfordervalue = 100 * (this.items.length - i);
            const res = await ctrl.itemCtrl.s.UpdateTemp(context, this.items[i]);
            if (res.ok) {
                const data = res.data;
                const cell = ctrl.graph.getCellById(data.srfkey);
                cell.setZIndex(data.srfordervalue);
            }
        }
    }
}