"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 = _interopRequireWildcard(require("react"));
var _elementReact = require("element-react");
var _Upload = _interopRequireDefault(require("../../../../../src/module/Upload"));
var _EditorItem = _interopRequireDefault(require("./EditorItem"));
var _FixedControl = _interopRequireDefault(require("../FixedControl"));
var _FormPlaceholder = _interopRequireDefault(require("../../../../components/XtForm/FormPlaceholder"));
var _indexModule = _interopRequireDefault(require("./index.module.scss"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var xtFormTplEditor = /*#__PURE__*/function (_Component) {
  (0, _inheritsLoose2["default"])(xtFormTplEditor, _Component);
  function xtFormTplEditor() {
    return _Component.apply(this, arguments) || this;
  }
  var _proto = xtFormTplEditor.prototype;
  _proto.render = function render() {
    // eslint-disable-next-line react/prop-types
    var _this$props = this.props,
      formData = _this$props.formData,
      changeForm = _this$props.changeForm,
      addFromOptions = _this$props.addFromOptions,
      delFromOptions = _this$props.delFromOptions,
      changeFormValue = _this$props.changeFormValue;
    var hasOther = function hasOther(item) {
      return item.options && item.options.length && item.options.find(function (res) {
        return res.other !== undefined;
      }) !== undefined;
    };
    var type = {
      input: '填写项',
      radio: '单选',
      checkbox: '多选',
      upload: '图片',
      address: '位置'
    };
    var getFormItem = function getFormItem(item) {
      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
        className: "\n          " + {
          checkbox: 'form-option-checkbox',
          radio: 'form-option-radio'
        }[item.type] + "\n          " + _indexModule["default"]['form-option']
      }, item.options && item.options.length && item.options.map(function (opt) {
        return /*#__PURE__*/_react["default"].createElement("div", {
          key: opt.key
        }, /*#__PURE__*/_react["default"].createElement("div", {
          className: _indexModule["default"]['form-option-li']
        }, /*#__PURE__*/_react["default"].createElement(_elementReact.Input, {
          placeholder: "\u8BF7\u8F93\u5165\u9009\u9879",
          value: opt.value,
          onChange: function onChange(e) {
            return changeFormValue(e, opt, 'value');
          }
        }), /*#__PURE__*/_react["default"].createElement("span", {
          className: "item-clean xiatu-rich xt-icon-lajitong",
          onClick: function onClick() {
            return delFromOptions(item, opt);
          }
        })), /*#__PURE__*/_react["default"].createElement(_EditorItem["default"], {
          option: opt
        }));
      })), /*#__PURE__*/_react["default"].createElement("div", {
        className: _indexModule["default"]['other-contorl']
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: _indexModule["default"]['other-contorl-item'],
        onClick: function onClick() {
          return addFromOptions(item, 1);
        }
      }, /*#__PURE__*/_react["default"].createElement("span", {
        className: "item-add xiatu-rich xt-tianjia"
      }), "\u6DFB\u52A0\u9009\u9879"), /*#__PURE__*/_react["default"].createElement("div", {
        className: _indexModule["default"]['other-contorl-item'] + " " + (hasOther(item) ? _indexModule["default"]['other-contorl-item-disabled'] : ''),
        onClick: function onClick() {
          return addFromOptions(item, 0);
        }
      }, /*#__PURE__*/_react["default"].createElement("span", {
        className: "item-add xiatu-rich xt-tianjia"
      }), "\u6DFB\u52A0\u5176\u4ED6")));
    };
    var content = function content(item) {
      return {
        radio: getFormItem(item),
        checkbox: getFormItem(item),
        upload: /*#__PURE__*/_react["default"].createElement(_Upload["default"], null)
      };
    };

    // eslint-disable-next-line react/prop-types
    return formData !== null && formData !== void 0 && formData.length ? /*#__PURE__*/_react["default"].createElement("div", {
      className: _indexModule["default"].editor
    }, formData.map(function (item, idx) {
      var _content, _item$type;
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: _indexModule["default"]['editor-item'],
        key: item.key
      }, /*#__PURE__*/_react["default"].createElement(_FixedControl["default"], {
        formItem: item,
        formData: formData,
        changeForm: changeForm
      }), /*#__PURE__*/_react["default"].createElement("div", {
        className: _indexModule["default"]['editor-item-top']
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: _indexModule["default"]['editor-item-label']
      }, idx + 1, ".", type[item.type], ":"), /*#__PURE__*/_react["default"].createElement("div", {
        className: _indexModule["default"]['editor-item-right']
      }, /*#__PURE__*/_react["default"].createElement(_elementReact.Input, {
        placeholder: "\u8BF7\u8F93\u5165\u6807\u9898",
        onChange: function onChange(e) {
          return changeFormValue(e, item, 'label');
        },
        value: item.label
      }), (_content = content(item)[(_item$type = item.type) !== null && _item$type !== void 0 ? _item$type : 'input']) !== null && _content !== void 0 ? _content : null)), /*#__PURE__*/_react["default"].createElement("div", {
        className: _indexModule["default"]['editor-item-bottom']
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: _indexModule["default"]['editor-item-label']
      }, "\u5FC5\u586B:"), /*#__PURE__*/_react["default"].createElement("div", {
        className: _indexModule["default"]['editor-item-right']
      }, /*#__PURE__*/_react["default"].createElement(_elementReact.Switch, {
        value: item.required,
        onText: "\u662F",
        offText: "\u5426",
        onChange: function onChange(e) {
          return changeFormValue(e, item, 'required');
        }
      }))));
    })) : /*#__PURE__*/_react["default"].createElement(_FormPlaceholder["default"], null);
  };
  return xtFormTplEditor;
}(_react.Component);
exports["default"] = xtFormTplEditor;