"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _react = require("react");
var _indexModule = _interopRequireDefault(require("./index.module.scss"));
var _FormPlaceholder = _interopRequireDefault(require("./FormPlaceholder"));
var _FormTplEditor = _interopRequireDefault(require("./FormTplEditor"));
var _EditorAdd = _interopRequireDefault(require("./FormTplEditor/EditorAdd"));
var _FormTplView = _interopRequireDefault(require("./FormTplView"));
var _elementReact = require("element-react");
var XtFormRight = /*#__PURE__*/function (_Component) {
  (0, _inheritsLoose2["default"])(XtFormRight, _Component);
  function XtFormRight() {
    var _this;
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
    _this.state = {
      isEditting: false,
      isTitleEditting: false
    };
    return _this;
  }
  var _proto = XtFormRight.prototype;
  _proto.render = function render() {
    var _this2 = this;
    var _this$props = this.props,
      formData = _this$props.formData,
      f_id = _this$props.f_id,
      changeIsEdit = _this$props.changeIsEdit,
      changeForm = _this$props.changeForm,
      addFormIem = _this$props.addFormIem,
      addFromOptions = _this$props.addFromOptions,
      delFromOptions = _this$props.delFromOptions,
      changeFormValue = _this$props.changeFormValue,
      isEditting = _this$props.isEditting;
    var isTitleEditting = this.state.isTitleEditting;

    // const changeState = (state) => {
    //   this.setState({
    //     isEditting: typeof state === 'boolean' ? state : !isEditting,
    //   });
    // };

    var changeTitleState = function changeTitleState(state) {
      _this2.setState({
        isTitleEditting: typeof state === 'boolean' ? state : !isTitleEditting
      });
    };
    return /*#__PURE__*/React.createElement("div", {
      className: _indexModule["default"]['form-content']
    }, JSON.stringify(formData) === '{}' ? /*#__PURE__*/React.createElement(_FormPlaceholder["default"], null) : /*#__PURE__*/React.createElement("div", {
      className: _indexModule["default"]['form-content-body']
    }, /*#__PURE__*/React.createElement("div", {
      className: _indexModule["default"]['form-content-body-top']
    }, /*#__PURE__*/React.createElement("div", {
      className: _indexModule["default"]['form-content-body-top-l']
    }, formData.ctg_title ? /*#__PURE__*/React.createElement("div", {
      className: _indexModule["default"]['form-content-titles']
    }, formData.ctg_title) : null, formData.title || this.state.isEditting ? /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement("div", {
      className: "\n                     " + _indexModule["default"]['form-content-titles'] + "\n                     " + (this.state.isTitleEditting ? _indexModule["default"]['form-content-titles-editting'] : '') + "\n                     "
    }, formData.title, this.state.isTitleEditting ? /*#__PURE__*/React.createElement(_elementReact.Input, {
      value: formData.title,
      onBlur: function onBlur() {
        return changeTitleState();
      },
      onChange: function onChange(e) {
        return changeFormValue(e, formData, 'title');
      }
    }) : null), isEditting ? /*#__PURE__*/React.createElement("span", {
      className: "xiatu-rich xt-editor",
      onClick: function onClick() {
        return changeTitleState();
      }
    }) : null) : '新增空白模板'), /*#__PURE__*/React.createElement("div", {
      className: _indexModule["default"]['form-content-body-top-r']
    }, /*#__PURE__*/React.createElement("div", {
      className: _indexModule["default"]['form-content-body-btns']
    }, isEditting ? /*#__PURE__*/React.createElement(_EditorAdd["default"], {
      addFormIem: addFormIem
    }) : '', /*#__PURE__*/React.createElement("div", {
      className: _indexModule["default"]['form-content-body-btn-group']
    }, /*#__PURE__*/React.createElement("span", {
      className: (!isEditting ? 'active' : '') + " xiatu-rich xt-yulan",
      onClick: function onClick() {
        return changeIsEdit(false);
      }
    }), /*#__PURE__*/React.createElement("span", {
      className: (isEditting ? 'active' : '') + " xiatu-rich xt-bianji",
      onClick: function onClick() {
        return changeIsEdit(true);
      }
    }))))), /*#__PURE__*/React.createElement("div", {
      className: _indexModule["default"]['form-content-body-bottom']
    }, isEditting ? /*#__PURE__*/React.createElement(_FormTplEditor["default"], {
      formData: formData.list,
      ref: "formTPlEditor",
      changeForm: changeForm,
      addFromOptions: addFromOptions,
      changeFormValue: changeFormValue,
      delFromOptions: delFromOptions
    }) : /*#__PURE__*/React.createElement(_FormTplView["default"], {
      formData: formData.list,
      f_id: f_id,
      isEditting: !isEditting
    }))));
  };
  return XtFormRight;
}(_react.Component);
exports["default"] = XtFormRight;
XtFormRight.displayName = 'XtFormSetter';