import { Vue, Component, Prop } from 'vue-property-decorator';
import './design-container.less';

/**
 * 设计界面呈现容器
 *
 * @export
 * @class DesignContainer
 * @extends {Vue}
 */
@Component({})
export class DesignContainer extends Vue {
  @Prop({ default: () => true })
  showMaterial!: boolean;

  activeKeys = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];

  renderContent(): any {
    const lefts = this.$slots.material || [];
    return lefts.length > 0 ? (
      <div class='source-material-container'>
        {lefts.length === 1 ? (
          <div class='ibz-design-container-left'>{lefts}</div>
        ) : (
          <a-collapse class='ibz-design-container-left' activeKey={this.activeKeys} bordered={false}>
            {lefts.map((item, i) => {
              if (item.key === 'search') {
                return item;
              }
              return (
                <a-collapse-panel key={i + ''} header={item.data?.attrs?.title} forceRender={true}>
                  {item}
                </a-collapse-panel>
              );
            })}
          </a-collapse>
        )}
      </div>
    ) : null;
  }

  /**
   * 绘制结构树
   *
   * @return {*}  {*}
   * @memberof DesignContainer
   */
  renderStructureTree(): any {
    return <div class='design-structure-tree'>{this.$slots.structureTree}</div>;
  }

  /**
   * 绘制素材列表
   *
   * @memberof DesignContainer
   */
  renderMaterialList() {
    return <div class='design-material-list'>{this.$slots.materialList}</div>;
  }

  /**
   * 绘制容器区左侧
   *
   * @return {*}  {*}
   * @memberof DesignContainer
   */
  renderLeft(): any {
    const { material, structureTree, materialList } = this.$slots;
    if (material && structureTree && materialList) {
      return (
        <tabs class='ibz-design-left-container' animated={false} name='material'>
          <tabPane label='工具箱' tab='material'>
            {this.renderContent()}
          </tabPane>
          <tabPane label='结构' tab='material'>
            {this.renderStructureTree()}
          </tabPane>
          <tabPane label='列表' tab='material'>
            {this.renderMaterialList()}
          </tabPane>
        </tabs>
      );
    } else if (material && structureTree) {
      return (
        <tabs class='ibz-design-left-container' animated={false} name='material'>
          <tabPane label='工具箱' tab='material'>
            {this.renderContent()}
          </tabPane>
          <tabPane label='结构' tab='material'>
            {this.renderStructureTree()}
          </tabPane>
        </tabs>
      );
    } else if (material && materialList) {
      return (
        <tabs class='ibz-design-left-container' animated={false} name='material'>
          <tabPane label='工具箱' tab='material'>
            {this.renderContent()}
          </tabPane>
          <tabPane label='列表' tab='material'>
            {this.renderMaterialList()}
          </tabPane>
        </tabs>
      );
    } else if (material && material.length > 0) {
      return this.renderContent();
    } else if (structureTree && structureTree.length > 0) {
      return this.renderStructureTree();
    } else if (materialList && materialList.length > 0) {
      return this.renderMaterialList();
    }
  }

  render() {
    return (
      <div class={{ 'ibz-design-container': true, 'no-material': (!this.showMaterial || !this.$slots.material) ? true : false }}>
        {this.renderLeft()}
        {this.$slots.content ? (
          <div class='drag-design-container'>
            <div class='ibz-design-container-content'>{this.$slots.content}</div>
          </div>
        ) : (
          <div class='no-content'>暂未提供默认布局模型预览</div>
        )}
        {this.$slots.attributes ? (
          <div class='design-attributes-container'>
            <div class='ibz-design-container-right'>{this.$slots.attributes}</div>
          </div>
        ) : null}
      </div>
    );
  }
}