import { __decorate } from "tslib";
import { Component } from 'vue-property-decorator';
import { VueLifeCycleProcessing } from '@ibizstudio-ex/template-vue';
import './design-scroll-container-item.less';
import { DesignContainerBase } from '../../design-container-base/design-container-base';
/**
 * @export
 * @class DragDesignItemBase
 * @extends {DesignScrollContainerItem<T>}
 * @template T
 */
let DesignScrollContainerItem = class DesignScrollContainerItem extends DesignContainerBase {
    /**
     * @description 绘制子项
     * @param {*} item
     * @return {*}
     * @memberof DesignGroup
     */
    renderChildItem(item) {
        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, content) {
        const h = this.$createElement;
        return h('draggable', {
            attrs: {
                handle: this.options.handle,
                group: this.options.group,
                ghostClass: "ghostClass-draggle",
                forceFallback: true,
                animation: this.options.animation,
                list: list,
            },
            class: 'draggable-container',
            on: {
                change: (e) => this.change(e, list)
            },
        }, [
            h('transition-group', Object.assign({ attrs: {
                    type: 'transition',
                    name: 'flip-list',
                }, class: this.getDraggableClass() }, this.getDraggableOtherParams()), content),
        ]);
    }
    renderContent() {
        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 }}>
                  {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>);
    }
    render() {
        const { srfkey } = this.data;
        return (<div id={srfkey} key={srfkey} class={Object.assign({ 'layout-item-container': true }, this.calcColClass(this.data))} on-click={(e) => this.onActiveClick(e, this.data)} on-dblclick={(e) => this.editorHandle(e)}>
                {this.renderContent()}
            </div>);
    }
};
DesignScrollContainerItem = __decorate([
    Component({}),
    VueLifeCycleProcessing()
], DesignScrollContainerItem);
export { DesignScrollContainerItem };