import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import { Component, Fragment } from 'react';
import style from "./index.module.scss";
import FormPlaceholder from "./FormPlaceholder";
import FormTplEditor from "./FormTplEditor";
import EditorAdd from "./FormTplEditor/EditorAdd";
import FormTplView from "./FormTplView";
import { Input } from 'element-react';
var XtFormRight = /*#__PURE__*/function (_Component) {
  _inheritsLoose(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: style['form-content']
    }, JSON.stringify(formData) === '{}' ? /*#__PURE__*/React.createElement(FormPlaceholder, null) : /*#__PURE__*/React.createElement("div", {
      className: style['form-content-body']
    }, /*#__PURE__*/React.createElement("div", {
      className: style['form-content-body-top']
    }, /*#__PURE__*/React.createElement("div", {
      className: style['form-content-body-top-l']
    }, formData.ctg_title ? /*#__PURE__*/React.createElement("div", {
      className: style['form-content-titles']
    }, formData.ctg_title) : null, formData.title || this.state.isEditting ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement("div", {
      className: "\n                     " + style['form-content-titles'] + "\n                     " + (this.state.isTitleEditting ? style['form-content-titles-editting'] : '') + "\n                     "
    }, formData.title, this.state.isTitleEditting ? /*#__PURE__*/React.createElement(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: style['form-content-body-top-r']
    }, /*#__PURE__*/React.createElement("div", {
      className: style['form-content-body-btns']
    }, isEditting ? /*#__PURE__*/React.createElement(EditorAdd, {
      addFormIem: addFormIem
    }) : '', /*#__PURE__*/React.createElement("div", {
      className: style['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: style['form-content-body-bottom']
    }, isEditting ? /*#__PURE__*/React.createElement(FormTplEditor, {
      formData: formData.list,
      ref: "formTPlEditor",
      changeForm: changeForm,
      addFromOptions: addFromOptions,
      changeFormValue: changeFormValue,
      delFromOptions: delFromOptions
    }) : /*#__PURE__*/React.createElement(FormTplView, {
      formData: formData.list,
      f_id: f_id,
      isEditting: !isEditting
    }))));
  };
  return XtFormRight;
}(Component);
XtFormRight.displayName = 'XtFormSetter';
export { XtFormRight as default };