import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React, { Component } from 'react';
import { Input, Switch } from 'element-react';
import Upload from "../../../../../src/module/Upload";
import EditorItem from "./EditorItem";
import FixedControl from "../FixedControl";
import Placeholder from "../../../../components/XtForm/FormPlaceholder";
import style from "./index.module.scss";
var xtFormTplEditor = /*#__PURE__*/function (_Component) {
  _inheritsLoose(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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
        className: "\n          " + {
          checkbox: 'form-option-checkbox',
          radio: 'form-option-radio'
        }[item.type] + "\n          " + style['form-option']
      }, item.options && item.options.length && item.options.map(function (opt) {
        return /*#__PURE__*/React.createElement("div", {
          key: opt.key
        }, /*#__PURE__*/React.createElement("div", {
          className: style['form-option-li']
        }, /*#__PURE__*/React.createElement(Input, {
          placeholder: "\u8BF7\u8F93\u5165\u9009\u9879",
          value: opt.value,
          onChange: function onChange(e) {
            return changeFormValue(e, opt, 'value');
          }
        }), /*#__PURE__*/React.createElement("span", {
          className: "item-clean xiatu-rich xt-icon-lajitong",
          onClick: function onClick() {
            return delFromOptions(item, opt);
          }
        })), /*#__PURE__*/React.createElement(EditorItem, {
          option: opt
        }));
      })), /*#__PURE__*/React.createElement("div", {
        className: style['other-contorl']
      }, /*#__PURE__*/React.createElement("div", {
        className: style['other-contorl-item'],
        onClick: function onClick() {
          return addFromOptions(item, 1);
        }
      }, /*#__PURE__*/React.createElement("span", {
        className: "item-add xiatu-rich xt-tianjia"
      }), "\u6DFB\u52A0\u9009\u9879"), /*#__PURE__*/React.createElement("div", {
        className: style['other-contorl-item'] + " " + (hasOther(item) ? style['other-contorl-item-disabled'] : ''),
        onClick: function onClick() {
          return addFromOptions(item, 0);
        }
      }, /*#__PURE__*/React.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.createElement(Upload, null)
      };
    };

    // eslint-disable-next-line react/prop-types
    return formData !== null && formData !== void 0 && formData.length ? /*#__PURE__*/React.createElement("div", {
      className: style.editor
    }, formData.map(function (item, idx) {
      var _content, _item$type;
      return /*#__PURE__*/React.createElement("div", {
        className: style['editor-item'],
        key: item.key
      }, /*#__PURE__*/React.createElement(FixedControl, {
        formItem: item,
        formData: formData,
        changeForm: changeForm
      }), /*#__PURE__*/React.createElement("div", {
        className: style['editor-item-top']
      }, /*#__PURE__*/React.createElement("div", {
        className: style['editor-item-label']
      }, idx + 1, ".", type[item.type], ":"), /*#__PURE__*/React.createElement("div", {
        className: style['editor-item-right']
      }, /*#__PURE__*/React.createElement(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.createElement("div", {
        className: style['editor-item-bottom']
      }, /*#__PURE__*/React.createElement("div", {
        className: style['editor-item-label']
      }, "\u5FC5\u586B:"), /*#__PURE__*/React.createElement("div", {
        className: style['editor-item-right']
      }, /*#__PURE__*/React.createElement(Switch, {
        value: item.required,
        onText: "\u662F",
        offText: "\u5426",
        onChange: function onChange(e) {
          return changeFormValue(e, item, 'required');
        }
      }))));
    })) : /*#__PURE__*/React.createElement(Placeholder, null);
  };
  return xtFormTplEditor;
}(Component);
export { xtFormTplEditor as default };