import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
var _class;
import React from 'react';
import { observer } from 'mobx-react';
import { Breadcrumb, Tabs } from 'antd';
import SettingPanel from './settingPanel';
import './index.less';
var RightArea = observer(_class = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(RightArea, _React$Component);
  function RightArea() {
    var _this;
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
    _this.state = {};
    _this.onChangeTab = function (activeTab) {
      _this.setState({
        activeTab: activeTab
      });
    };
    return _this;
  }
  var _proto = RightArea.prototype;
  _proto.componentDidMount = function componentDidMount() {
    this.setDefaultActiveTab();
  };
  _proto.componentDidUpdate = function componentDidUpdate(prev) {
    var _prev$designer, _this$props$designer;
    if (((_prev$designer = prev.designer) === null || _prev$designer === void 0 ? void 0 : _prev$designer.settingTopEntry) !== ((_this$props$designer = this.props.designer) === null || _this$props$designer === void 0 ? void 0 : _this$props$designer.settingTopEntry)) {
      this.setDefaultActiveTab();
    }
  };
  _proto.setDefaultActiveTab = function setDefaultActiveTab() {
    var _this$props$designer2;
    var settingEntry = (_this$props$designer2 = this.props.designer) === null || _this$props$designer2 === void 0 ? void 0 : _this$props$designer2.settingTopEntry;
    if (settingEntry && settingEntry.fields.length) {
      this.setState({
        activeTab: settingEntry.fields[0].id
      });
    }
  };
  _proto.render = function render() {
    var _this$props$designer3;
    var settingEntry = (_this$props$designer3 = this.props.designer) === null || _this$props$designer3 === void 0 ? void 0 : _this$props$designer3.settingTopEntry;
    if (!settingEntry) {
      return /*#__PURE__*/React.createElement("div", {
        className: "rightArea"
      }, "\u8BF7\u5728\u753B\u5E03\u4E0A\u9009\u4E2D\u8282\u70B9");
    }
    if (!settingEntry.fields.length) {
      return /*#__PURE__*/React.createElement("div", {
        className: "rightArea"
      }, "\u8BE5\u7EC4\u4EF6\u6682\u65E0\u914D\u7F6E");
    }
    var items = settingEntry.fields.map(function (filed) {
      return {
        label: filed.title,
        key: filed.id,
        children: /*#__PURE__*/React.createElement(SettingPanel, {
          target: filed,
          key: filed.id
        })
      };
    });
    return /*#__PURE__*/React.createElement("div", {
      className: "rightArea"
    }, this.renderBreadcrumb(), /*#__PURE__*/React.createElement(Tabs, {
      size: "small",
      items: items
      // activeKey={this.state.activeTab}
      ,
      onChange: this.onChangeTab
    }));
  };
  _proto.renderBreadcrumb = function renderBreadcrumb() {
    var _this$props$designer4, _this$props$designer5;
    var items = [];
    var node = (_this$props$designer4 = this.props.designer) === null || _this$props$designer4 === void 0 ? void 0 : (_this$props$designer5 = _this$props$designer4.settingTopEntry) === null || _this$props$designer5 === void 0 ? void 0 : _this$props$designer5.owner;
    while (node) {
      items.push({
        label: node.title,
        key: node.id
      });
      node = node.parent;
    }
    return /*#__PURE__*/React.createElement(Breadcrumb, null, /*#__PURE__*/React.createElement(Breadcrumb.Item, {
      menu: {
        items: items
      }
    }, "\u7EC4\u4EF6"));
  };
  return RightArea;
}(React.Component)) || _class;
export { RightArea as default };