import { __decorate } from "tslib";
import { Vue, Component, Prop } from 'vue-property-decorator';
import './design-container.less';
/**
 * 设计界面呈现容器
 *
 * @export
 * @class DesignContainer
 * @extends {Vue}
 */
let DesignContainer = class DesignContainer extends Vue {
    constructor() {
        super(...arguments);
        this.activeKeys = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'];
    }
    renderContent() {
        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) => {
                    var _a, _b;
                    if (item.key === 'search') {
                        return item;
                    }
                    return (<a-collapse-panel key={i + ''} header={(_b = (_a = item.data) === null || _a === void 0 ? void 0 : _a.attrs) === null || _b === void 0 ? void 0 : _b.title} forceRender={true}>
                  {item}
                </a-collapse-panel>);
                })}
          </a-collapse>)}
      </div>) : null;
    }
    /**
     * 绘制结构树
     *
     * @return {*}  {*}
     * @memberof DesignContainer
     */
    renderStructureTree() {
        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() {
        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>);
    }
};
__decorate([
    Prop({ default: () => true })
], DesignContainer.prototype, "showMaterial", void 0);
DesignContainer = __decorate([
    Component({})
], DesignContainer);
export { DesignContainer };