import { Component, Prop } from 'vue-property-decorator';
import { message } from 'ant-design-vue';
import { VueLifeCycleProcessing } from '../../../decorators'
import { DesignContainerBase } from '../design-container-base/design-container-base';
import './design-group.less';

/**
 * 表单分组
 *
 * @export
 * @class DesignGroup
 * @extends {DragDesignItemBase}
 */
@Component({})
@VueLifeCycleProcessing()
export class DesignGroup extends DesignContainerBase {



    @Prop()
    isGridContainerItem?: boolean;

    /**
     * @description 删除当前数据
     * @param {MouseEvent} e
     * @return {*}  {Promise<void>}
     * @memberof DesignGroup
     */
    async deleteHandle(e: MouseEvent): Promise<void> {
        e.stopPropagation();
        if ((this.ctrl as any)?.isDefaultLayout) {
            this.userOperationTips(e);
        } else {
            const event: any = (this.ctrl as any).evt;
            if (event) {
                event.emit('removePanel', this.data);
            }
            const res = await this.service.RemoveTemp(this.ctx.context, this.data);
            if (res.ok === false) {
              message.error(res.statusText || '');
              return;
            }
            this.setSelect(this.parentData);
        }
    }

    /**
     * @description 绘制子项
     * @param {*} item
     * @return {*}
     * @memberof DesignGroup
     */
    renderChildItem(item: any) {
        if (item.isDefaultLayout || item.isCtrls) {
            return null;
        }
        return this.ctx.ctrl.renderChildItem(this.$createElement, this.ctx, item, this.data);
    }

    /**
     * @description 绘制拖拽区
     * @param {any[]} list
     * @param {*} [content]
     * @return {*}  {*}
     * @memberof DesignGroup
     */
    renderDraggable(list: any[], content?: any): any {
        const h = this.$createElement;
        return h(
            'draggable',
            {
                attrs: {
                    handle: this.options.handle,
                    group: this.options.group,
                    animation: this.options.animation,
                    list: list,
                },
                class: 'draggable-container',
                on: {
                    change: (e: any) => this.change(e, list),
                },
            },
            [
                h(
                    'transition-group',
                    {
                        attrs: {
                            type: 'transition',
                            name: 'flip-list',
                        },
                        class: this.getDraggableClass(),
                        ...this.getDraggableOtherParams(),
                    },
                    content,
                ),
            ],
        );
    }

    renderContent(): any {
        const { text, showcaption, showtitlebar } = this.data;
        const contentStyle = this.getContentStyle(this.data);
        const hiddenHeader = showcaption == 0 || showtitlebar == 0;
        return (
            <div
                class={{
                    'ibz-design-group': true,
                    'drag-item-container': true,
                    active: this.active,
                    'ibz-design-group-border-hidden': this.ctx.state.hidden,
                }}
            >
                {
                    this.isGridContainerItem
                        ? (
                            <div class='grid-container-item'>
                                {`配比-${this.data.flexgrow?this.data.flexgrow:"自适应"}`}
                            </div>
                        )
                        : hiddenHeader ? (
                            <div class='drag-item-info' v-show={hiddenHeader && !this.ctx.state.hidden}>
                                <div class='drag-item-info-text'>{text}</div>
                            </div>
                        ) : (
                            <div class='header' v-show={!hiddenHeader}>
                                <div class='title'>{text}</div>
                                <div class='arrow'>
                                    <a-icon type='caret-down' />
                                </div>
                            </div>
                        )
                }
                < div class='content' style={contentStyle}>
                    {this.renderDraggable(this.list, this.renderChild())}
                </div>
            </div >
        );
    }
}