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
 */
 @Component({})
 @VueLifeCycleProcessing()
export class DesignScrollContainerItem extends DesignContainerBase {

    /**
     * @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,
                      ghostClass: "ghostClass-draggle",
                      forceFallback: true,
                      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 }}>
                  {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={{
                    'layout-item-container': true,
                    ...this.calcColClass(this.data)
                }}
                on-click={(e: any) => this.onActiveClick(e, this.data)}
                on-dblclick={(e: any) => this.editorHandle(e)}
            >
                {this.renderContent()}
            </div>
        );
    }
}