import _extends from "@babel/runtime/helpers/extends";
import _Upload from "@alifd/next/es/upload";
import _Checkbox from "@alifd/next/es/checkbox";
import _Radio from "@alifd/next/es/radio";
import _Input from "@alifd/next/es/input";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
import _Form from "@alifd/next/es/form";
var _excluded = ["dataList", "onClick", "children"];
import React, { useEffect, useState } from 'react';
import "./index.scss";
// import { default as FormItem } from './form-item'
// import { convertChildren } from '../../utils/children-node-handle'
// import DCFormItem from './form-item.tsx'

import '@wangeditor/editor/dist/css/style.css'; // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-react';
import { DYNAMIC_COLUMN_DATA_TYPE_BUTTON, DYNAMIC_COLUMN_DATA_TYPE_AUTO, DYNAMIC_COLUMN_DATA_TYPE_TEXT, DYNAMIC_COLUMN_DATA_TYPE_TEXTAREA, DYNAMIC_COLUMN_DATA_TYPE_MOBILE, DYNAMIC_COLUMN_DATA_TYPE_INT, DYNAMIC_COLUMN_DATA_TYPE_EMAIL, DYNAMIC_COLUMN_DATA_TYPE_ID_CARD, DYNAMIC_COLUMN_DATA_TYPE_NUMBER, DYNAMIC_COLUMN_DATA_TYPE_LABEL, DYNAMIC_COLUMN_DATA_TYPE_RADIO, DYNAMIC_COLUMN_DATA_TYPE_CHECKBOX, DYNAMIC_COLUMN_DATA_TYPE_ATTACHMENTS, DYNAMIC_COLUMN_DATA_TYPE_DOC, DYNAMIC_COLUMN_DATA_TYPE_PICTURE, DYNAMIC_COLUMN_DATA_TYPE_VIDEO, DYNAMIC_COLUMN_DATA_TYPE_AUDIO, DYNAMIC_COLUMN_DATA_TYPE_EDITOR } from "../../entity/dynamic-column-data-type";
import arrowRight from "../../assets/icon/form/right.png";
var FormItem = _Form.Item;
var Form = function Form(_ref) {
  var dataList = _ref.dataList,
    _ref$onClick = _ref.onClick,
    onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
    children = _ref.children,
    otherProps = _objectWithoutPropertiesLoose(_ref, _excluded);
  var _otherProps = otherProps || {};
  dataList = [{
    id: '1042530112370774016',
    fkTableId: '1042530097875259392',
    tableName: 'dynamic_tb_lpjs',
    columnName: 'pic',
    selectActionType: 0,
    selectActionTypeEnum: {
      code: 0,
      name: '无',
      action: '',
      label: '',
      key: '',
      ordinal: 0
    },
    selectAction: '',
    selectActionValue: '',
    selectActionLabel: '',
    selectActionLabelArr: [],
    columnKeyType: 31,
    columnKeyTypeEnum: {
      code: 31,
      name: '富文本',
      dbTypeName: 'longtext',
      ordinal: 25
    },
    columnType: 'longtext',
    columnSize: 0,
    columnDecimal: 0,
    defaultValue: '',
    defaultValueType: 0,
    defaultValueTypeEnum: {
      code: 0,
      name: '无',
      ordinal: 0
    },
    isRequired: 0,
    isRequiredEnum: {
      code: 0,
      name: '否',
      ordinal: 0
    },
    columnComment: '图片',
    linkageColumn: '',
    linkageTable: '',
    linkageTableColumn: '',
    showAddType: 1,
    showAddTypeEnum: {
      code: 1,
      name: '是'
    },
    showUpdateType: 1,
    showUpdateTypeEnum: {
      code: 1,
      name: '是'
    },
    showListType: 0,
    showListTypeEnum: {
      code: 0,
      name: '否'
    },
    showViewType: 1,
    showViewTypeEnum: {
      code: 1,
      name: '是'
    },
    searchType: 0,
    searchTypeEnum: {
      code: 0,
      name: '不显示',
      ordinal: 0
    },
    updateType: 0,
    updateTypeEnum: {
      code: 0,
      name: '否'
    },
    scoreCode: 4,
    fieldWidth: 0,
    listWidth: '0',
    fieldSuffix: '',
    fieldPrefix: '',
    fieldDescription: '',
    guideWords: '请输入退伍军人证',
    fieldValidation: '',
    fieldValidationType: '自定义',
    inputFormat: 'jpg,jpeg,png,bmp,gif',
    optionType: 1,
    optionTypeEnum: {
      code: 1,
      name: '单选',
      ordinal: 1
    },
    fileMaxSize: 5,
    fileMinSize: 0,
    joinTable: '',
    joinColumn: '',
    showCondition: '',
    validationMax: '0',
    validationMin: '0',
    validationUnique: 0,
    validationUniqueEnum: {
      code: 0,
      name: '否'
    },
    showStyle: '',
    handler: '0',
    propList: [{
      id: '1048584180847480832',
      propName: 'updateType',
      propValue: '0'
    }, {
      id: '1048584180730040320',
      propName: 'searchType',
      propValue: '0'
    }, {
      id: '1048584180608405504',
      propName: 'columnType',
      propValue: 'longtext'
    }, {
      id: '1048584180495159296',
      propName: 'defaultValueType',
      propValue: '0'
    }, {
      id: '1048584180365135872',
      propName: 'validationMax',
      propValue: '0'
    }, {
      id: '1048584180235112448',
      propName: 'validationMin',
      propValue: '0'
    }, {
      id: '1048584180142837760',
      propName: 'showViewType',
      propValue: '1'
    }, {
      id: '1048584179996037120',
      propName: 'showUpdateType',
      propValue: '1'
    }, {
      id: '1048584179878596608',
      propName: 'showAddType',
      propValue: '1'
    }, {
      id: '1048584179740184576',
      propName: 'showListType',
      propValue: '0'
    }, {
      id: '1048584179622744064',
      propName: 'handler',
      propValue: '0'
    }, {
      id: '1050823809420103680',
      propName: 'columnComment',
      propValue: '图片'
    }, {
      id: '1050823809323634688',
      propName: 'isRequired',
      propValue: '0'
    }, {
      id: '1050823809222971392',
      propName: 'scoreCode',
      propValue: '4'
    }]
  }];
  // 筛选字段(去除按钮类型和自动生成的类型)
  dataList = dataList ? dataList.filter(function (item) {
    return item.columnKeyType !== DYNAMIC_COLUMN_DATA_TYPE_BUTTON.code && item.columnKeyType !== DYNAMIC_COLUMN_DATA_TYPE_AUTO.code && item.columnComment !== '乐观锁' && item.columnComment !== '是否删除';
  }) : [];
  console.log('dataList', dataList);

  // editor 实例
  var _useState = useState(null),
    editor = _useState[0],
    setEditor = _useState[1]; // TS 语法
  // const [editor, setEditor] = useState(null)                   // JS 语法

  // 编辑器内容
  var _useState2 = useState('<p>hello</p>'),
    html = _useState2[0],
    setHtml = _useState2[1];

  // 模拟 ajax 请求，异步设置 html
  useEffect(function () {
    setTimeout(function () {
      setHtml('<p>hello world</p>');
    }, 1500);
  }, []);

  // 工具栏配置
  var toolbarConfig = {}; // TS 语法
  // const toolbarConfig = { }                        // JS 语法

  // 编辑器配置
  var editorConfig = {
    // TS 语法
    // const editorConfig = {                         // JS 语法
    placeholder: '请输入内容...'
  };

  // 及时销毁 editor ，重要！
  useEffect(function () {
    return function () {
      if (editor == null) return;
      editor.destroy();
      setEditor(null);
    };
  }, [editor]);
  var renderFormTypeContent = function renderFormTypeContent(data) {
    switch (data.columnKeyType) {
      // 输入框
      case DYNAMIC_COLUMN_DATA_TYPE_TEXT.code:
      case DYNAMIC_COLUMN_DATA_TYPE_INT.code:
      case DYNAMIC_COLUMN_DATA_TYPE_MOBILE.code:
      case DYNAMIC_COLUMN_DATA_TYPE_NUMBER.code:
      case DYNAMIC_COLUMN_DATA_TYPE_ID_CARD.code:
      case DYNAMIC_COLUMN_DATA_TYPE_EMAIL.code:
      case DYNAMIC_COLUMN_DATA_TYPE_LABEL.code:
        return /*#__PURE__*/React.createElement("div", {
          style: {
            width: '100%',
            display: 'flex'
          }
        }, /*#__PURE__*/React.createElement("div", {
          style: {
            color: '#999'
          }
        }, data.guideWords), /*#__PURE__*/React.createElement("img", {
          style: {
            width: '15px'
          },
          src: arrowRight,
          alt: ""
        }));
      // 多行文本
      case DYNAMIC_COLUMN_DATA_TYPE_TEXTAREA.code:
        return /*#__PURE__*/React.createElement("div", {
          style: {
            width: '100%'
          }
        }, /*#__PURE__*/React.createElement(_Input.TextArea, {
          style: {
            width: '100%'
          },
          hasClear: true,
          placeholder: data.guideWords
        }));
      // 单选框
      case DYNAMIC_COLUMN_DATA_TYPE_RADIO.code:
        return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Radio.Group, {
          defaultValue: data.defaultValue
        }, data.columnOptionList ? data.columnOptionList.map(function (item) {
          return /*#__PURE__*/React.createElement(_Radio, {
            id: item.optionName,
            value: item.optionValue
          }, item.optionName);
        }) : /*#__PURE__*/React.createElement("div", null)));
      // 复选框
      case DYNAMIC_COLUMN_DATA_TYPE_CHECKBOX.code:
        return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Checkbox.Group, {
          defaultValue: data.defaultValue.split(',')[0]
        }, data.columnOptionList ? data.columnOptionList.map(function (item) {
          return /*#__PURE__*/React.createElement(_Checkbox, {
            id: item.optionName,
            value: item.optionValue
          }, item.optionName);
        }) : /*#__PURE__*/React.createElement("div", null)));
      // 附件,图片，音频，视频，文档
      case DYNAMIC_COLUMN_DATA_TYPE_ATTACHMENTS.code:
      case DYNAMIC_COLUMN_DATA_TYPE_DOC.code:
      case DYNAMIC_COLUMN_DATA_TYPE_PICTURE.code:
      case DYNAMIC_COLUMN_DATA_TYPE_VIDEO.code:
      case DYNAMIC_COLUMN_DATA_TYPE_AUDIO.code:
        return /*#__PURE__*/React.createElement("div", {
          style: {
            display: 'flex'
          }
        }, /*#__PURE__*/React.createElement(_Upload.Card, {
          listType: "card",
          accept: "image/png, image/jpg, image/jpeg, image/gif, image/bmp"
        }));
      // 富文本
      case DYNAMIC_COLUMN_DATA_TYPE_EDITOR.code:
        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
          style: {
            border: '1px solid #ccc',
            zIndex: 100
          }
        }, /*#__PURE__*/React.createElement(Toolbar, {
          editor: editor,
          defaultConfig: toolbarConfig,
          mode: "default",
          style: {
            borderBottom: '1px solid #ccc'
          }
        }), /*#__PURE__*/React.createElement(Editor, {
          defaultConfig: editorConfig,
          value: html,
          onCreated: setEditor,
          onChange: function onChange(editor) {
            return setHtml(editor.getHtml());
          },
          mode: "default",
          style: {
            height: '500px',
            overflowY: 'hidden'
          }
        })));
      default:
        return /*#__PURE__*/React.createElement("div", {
          style: {
            width: '100%',
            display: 'flex'
          }
        }, /*#__PURE__*/React.createElement("div", {
          style: {
            color: '#999'
          }
        }, data.guideWords), /*#__PURE__*/React.createElement("img", {
          style: {
            width: '15px'
          },
          src: arrowRight,
          alt: ""
        }));
    }
  };
  return /*#__PURE__*/React.createElement(_Form, _extends({
    className: "form__panel",
    isPreview: "false"
  }, _otherProps), dataList ? dataList.map(function (item, index) {
    var labelAlign = item.columnKeyTypeEnum.name === '图片' || item.columnKeyTypeEnum.name === '多行文本' || item.columnKeyTypeEnum.name === '附件' || item.columnKeyTypeEnum.name === '富文本' ? 'top' : 'left';
    var isFlexStyle = labelAlign === 'top' ? {} : {
      display: 'flex'
    };
    return /*#__PURE__*/React.createElement(FormItem, {
      key: index,
      label: item.columnComment,
      labelAlign: labelAlign,
      style: isFlexStyle
    }, /*#__PURE__*/React.cloneElement(renderFormTypeContent(item)));
  }) : /*#__PURE__*/React.createElement("div", null, "\u6682\u65E0\u8868\u5355\u9879"), /*#__PURE__*/React.createElement("div", {
    style: {
      width: '100%',
      display: 'flex',
      justifyContent: 'center'
    }
  }, /*#__PURE__*/React.createElement(_Form.Submit, {
    style: {
      width: '90%'
    },
    type: "primary",
    validate: true
  }, "\u63D0\u4EA4")));
};
Form.displayName = 'Form';
export default Form;