import _Form from "@alifd/next/es/form";
import _Dialog from "@alifd/next/es/dialog";
import _Upload from "@alifd/next/es/upload";
import _Button from "@alifd/next/es/button";
import _Box from "@alifd/next/es/box";
import _Icon from "@alifd/next/es/icon";
import _Radio from "@alifd/next/es/radio";
import _Checkbox from "@alifd/next/es/checkbox";
import _Select from "@alifd/next/es/select";
import _extends from "@babel/runtime/helpers/extends";
import _Switch from "@alifd/next/es/switch";
import _Rating from "@alifd/next/es/rating";
import _TimePicker from "@alifd/next/es/time-picker2";
import _NumberPicker from "@alifd/next/es/number-picker";
import _DatePicker from "@alifd/next/es/date-picker2";
import _Input from "@alifd/next/es/input";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import _regeneratorRuntime from "@babel/runtime/regenerator";
//这是表单项组件
import React from 'react';
import "./index.scss";
import { data, selectList } from "./data";
import events from "../../utils/events";
import { saveImage, downloadImage, delImage, getChildList } from "./api";
var FormItem = /*#__PURE__*/function (_React$Component) {
  _inheritsLoose(FormItem, _React$Component);
  function FormItem(props) {
    var _this;
    _this = _React$Component.call(this, props) || this;
    // 渲染数据
    _this.initData = /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
      var enumList, _data;
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            enumList = _this.props.enumList;
            if (!(enumList !== undefined)) {
              _context.next = 6;
              break;
            }
            _context.next = 4;
            return getChildList(enumList.id);
          case 4:
            _data = _context.sent;
            _this.setState({
              optionData: _data
            });
          case 6:
          case "end":
            return _context.stop();
        }
      }, _callee);
    }));
    // 事件通信
    _this.getData = /*#__PURE__*/function () {
      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(commonVOs) {
        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
          while (1) switch (_context2.prev = _context2.next) {
            case 0:
              // 清空数据
              _this.setState({
                selectData: ''
              });
            case 1:
            case "end":
              return _context2.stop();
          }
        }, _callee2);
      }));
      return function (_x) {
        return _ref2.apply(this, arguments);
      };
    }();
    _this.onChange = function (value) {
      _this.props.onChange && _this.props.onChange(value);
    };
    // 文件下载
    _this.onFileDownLoad = /*#__PURE__*/function () {
      var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3(id) {
        return _regeneratorRuntime.wrap(function _callee3$(_context3) {
          while (1) switch (_context3.prev = _context3.next) {
            case 0:
              _context3.next = 2;
              return downloadImage(id);
            case 2:
            case "end":
              return _context3.stop();
          }
        }, _callee3);
      }));
      return function (_x2) {
        return _ref3.apply(this, arguments);
      };
    }();
    // 删除文件
    _this.onFileDelete = /*#__PURE__*/function () {
      var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(id) {
        var formData;
        return _regeneratorRuntime.wrap(function _callee4$(_context4) {
          while (1) switch (_context4.prev = _context4.next) {
            case 0:
              formData = new FormData();
              formData.append('id', id);
              _context4.next = 4;
              return delImage(formData);
            case 4:
            case "end":
              return _context4.stop();
          }
        }, _callee4);
      }));
      return function (_x3) {
        return _ref4.apply(this, arguments);
      };
    }();
    // 图片附件上传
    _this.onFileChange = /*#__PURE__*/function () {
      var _ref5 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5(info, type) {
        var uids, fileTypes, _this$props, fieldName, thumbnailQuality, thumbnailWidth, newData, fileObject, fileUid, fileType, formData, newImg, id, fileUrl, fileName;
        return _regeneratorRuntime.wrap(function _callee5$(_context5) {
          while (1) switch (_context5.prev = _context5.next) {
            case 0:
              uids = info.map(function (item) {
                return item.uid;
              });
              fileTypes = ['image/png', 'image/jpg', 'image/jpeg', 'image/gif', 'image/bmp'];
              _this$props = _this.props, fieldName = _this$props.fieldName, thumbnailQuality = _this$props.thumbnailQuality, thumbnailWidth = _this$props.thumbnailWidth;
              newData = type === 'file' ? _this.state.fileData : _this.state.imgData;
              if (!(uids.length > _this.state.fileData.length)) {
                _context5.next = 20;
                break;
              }
              fileObject = info[info.length - 1].originFileObj;
              fileUid = info[info.length - 1].uid;
              fileType = info[info.length - 1].type;
              console.log('fileType', fileType);
              formData = new FormData();
              formData.append('fileId', fieldName);
              formData.append('file', fileObject);
              if (fileTypes.indexOf(fileType) !== -1) {
                formData.append('thumbnailQuality', thumbnailQuality ? thumbnailQuality : 0.7);
                formData.append('thumbnailWidth', thumbnailWidth ? thumbnailWidth : 80);
              }
              _context5.next = 15;
              return saveImage(formData);
            case 15:
              newImg = _context5.sent;
              id = newImg.id, fileUrl = newImg.fileUrl, fileName = newImg.fileName;
              newData.push({
                uid: fileUid,
                id: id,
                name: fileName,
                url: fileUrl,
                downloadURL: fileUrl,
                imgURL: fileUrl,
                state: "done",
                size: 100
              });
              _context5.next = 21;
              break;
            case 20:
              newData = newData.filter(function (item) {
                return uids.indexOf(item.uid) !== -1;
              });
            case 21:
              if (type === 'file') {
                _this.setState({
                  fileData: newData
                });
              } else {
                _this.setState({
                  imgData: newData
                });
              }
            case 22:
            case "end":
              return _context5.stop();
          }
        }, _callee5);
      }));
      return function (_x4, _x5) {
        return _ref5.apply(this, arguments);
      };
    }();
    // 删除图片
    _this.onRemove = /*#__PURE__*/function () {
      var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6(info, data) {
        var newData, currentData, formData;
        return _regeneratorRuntime.wrap(function _callee6$(_context6) {
          while (1) switch (_context6.prev = _context6.next) {
            case 0:
              newData = data;
              currentData = newData.filter(function (item) {
                return item.uid === info.uid;
              });
              formData = new FormData();
              formData.append('id', currentData[0].id);
              _context6.next = 6;
              return delImage(formData);
            case 6:
            case "end":
              return _context6.stop();
          }
        }, _callee6);
      }));
      return function (_x6, _x7) {
        return _ref6.apply(this, arguments);
      };
    }();
    // 控件类型
    _this.renderColumns = function () {
      var _this$props2 = _this.props,
        componentType = _this$props2.componentType,
        placeholder = _this$props2.placeholder,
        fieldName = _this$props2.fieldName,
        isPreview = _this$props2.isPreview,
        defaultValue = _this$props2.defaultValue;
      if (!isPreview) {
        defaultValue = data[fieldName] ? data[fieldName] : defaultValue ? defaultValue : '';
      }
      if (componentType === 'Input') {
        return /*#__PURE__*/React.createElement(_Input, {
          onChange: function onChange(e) {
            return _this.onChange(e);
          },
          placeholder: placeholder,
          defaultValue: defaultValue
        });
      }
      if (componentType === 'CommonInput') {
        var _this$props3 = _this.props,
          InputLength = _this$props3.InputLength,
          hasLimitHint = _this$props3.hasLimitHint;
        return /*#__PURE__*/React.createElement(_Input, {
          onChange: function onChange(e) {
            return _this.onChange(e);
          },
          maxLength: InputLength,
          hasLimitHint: hasLimitHint,
          placeholder: placeholder,
          defaultValue: defaultValue
        });
      }
      if (componentType === 'CommonTextArea') {
        var _this$props4 = _this.props,
          row = _this$props4.row,
          _InputLength = _this$props4.InputLength,
          _hasLimitHint = _this$props4.hasLimitHint;
        return /*#__PURE__*/React.createElement(_Input.TextArea, {
          onChange: function onChange(e) {
            return _this.onChange(e);
          },
          rows: row,
          maxLength: _InputLength,
          hasLimitHint: _hasLimitHint,
          placeholder: placeholder,
          defaultValue: defaultValue
        });
      }
      if (componentType === 'DatePicker') {
        return /*#__PURE__*/React.createElement(_DatePicker, {
          onChange: function onChange(e) {
            return _this.onChange(e);
          },
          outputFormat: "YYYY-MM-DD",
          placeholder: placeholder,
          defaultValue: defaultValue
        });
      }
      if (componentType === 'NumberPicker') {
        return /*#__PURE__*/React.createElement(_NumberPicker, {
          onChange: function onChange(e) {
            return _this.onChange(e);
          },
          defaultValue: defaultValue
        });
      }
      if (componentType === 'TimePicker') {
        return /*#__PURE__*/React.createElement(_TimePicker, {
          onChange: function onChange(e) {
            return _this.onChange(e);
          },
          placeholder: placeholder,
          defaultValue: defaultValue
        });
      }
      if (componentType === 'Rating') {
        return /*#__PURE__*/React.createElement(_Rating, {
          onChange: function onChange(e) {
            return _this.onChange(e);
          },
          defaultValue: defaultValue
        });
      }
      if (componentType === 'Switch') {
        return /*#__PURE__*/React.createElement(_Switch, {
          onChange: function onChange(e) {
            return _this.onChange(e);
          },
          defaultChecked: defaultValue
        });
      }
      if (componentType === 'CommonOption') {
        var _this$props5 = _this.props,
          isMultiple = _this$props5.isMultiple,
          isDeployment = _this$props5.isDeployment,
          isEdit = _this$props5.isEdit;
        var optionData = _this.state.optionData;
        var childList = optionData.length > 0 ? optionData.map(function (item) {
          return _extends({}, item, {
            dictValue: item.dictValue,
            dictKey: item.dictKey,
            label: item.dictValue,
            value: item.dictKey
          });
        }) : selectList;
        isDeployment = isDeployment === undefined ? 'primary' : isDeployment;
        var mode = isMultiple ? 'multiple' : 'single';
        if (isDeployment === 'primary') {
          defaultValue = defaultValue === '' ? [] : defaultValue;
          return /*#__PURE__*/React.createElement(_Select, {
            onChange: function onChange(e) {
              return _this.onChange(e);
            },
            defaultValue: defaultValue,
            hasClear: true,
            placeholder: placeholder,
            disabled: isEdit,
            mode: mode,
            dataSource: childList
          });
        } else {
          if (mode === 'multiple') {
            return /*#__PURE__*/React.createElement(_Checkbox.Group, {
              onChange: function onChange(e) {
                return _this.onChange(e);
              },
              defaultValue: defaultValue,
              disabled: isEdit,
              dataSource: childList
            });
          } else {
            return /*#__PURE__*/React.createElement(_Radio.Group, {
              onChange: function onChange(e) {
                return _this.onChange(e);
              },
              defaultValue: defaultValue,
              disabled: isEdit,
              dataSource: childList
            });
          }
        }
      }
      if (componentType === 'CommonAttachment') {
        if (!isPreview) {
          return defaultValue ? /*#__PURE__*/React.createElement(_Box, {
            style: {
              display: 'flex',
              flexDirection: 'column',
              width: 200
            }
          }, defaultValue.map(function (item, index) {
            return /*#__PURE__*/React.createElement("div", {
              key: item.id,
              className: "attachment"
            }, /*#__PURE__*/React.createElement("div", {
              className: "attachment-box"
            }, /*#__PURE__*/React.createElement(_Icon, {
              size: "small",
              className: "attachment-box-icon",
              type: "attachment"
            }), /*#__PURE__*/React.createElement("span", {
              className: "attachment-box-title"
            }, item.name)), /*#__PURE__*/React.createElement("a", {
              className: "attachment-download",
              href: item.imgURL
            }, "\u4E0B\u8F7D"));
          })) : null;
        } else {
          return /*#__PURE__*/React.createElement(_Upload, {
            listType: "text",
            autoUpload: false,
            onChange: function onChange(e) {
              _this.onFileChange(e, 'file');
            },
            onRemove: function onRemove(e) {
              return _this.onRemove(e, _this.state.fileData);
            }
          }, /*#__PURE__*/React.createElement(_Button, {
            style: {
              margin: "0 0 10px"
            }
          }, /*#__PURE__*/React.createElement(_Icon, {
            type: "upload"
          }), /*#__PURE__*/React.createElement(_Box, null, "\u4E0A\u4F20\u6587\u4EF6")));
        }
      }
      if (componentType === 'CommonImage') {
        if (!isPreview) {
          return defaultValue ? /*#__PURE__*/React.createElement(_Upload.Card, {
            shape: "card",
            style: {
              display: 'none'
            },
            onPreview: _this.onPreview,
            defaultValue: defaultValue
          }) : null;
        } else {
          return /*#__PURE__*/React.createElement(_Upload.Card, {
            shape: "card",
            useDataURL: true,
            autoUpload: false,
            accept: "image/png, image/jpg, image/jpeg, image/gif, image/bmp",
            style: {
              display: 'inline-block'
            },
            onPreview: _this.onPreview,
            onRemove: function onRemove(e) {
              return _this.onRemove(e, _this.state.imgData);
            },
            onChange: function onChange(e) {
              return _this.onFileChange(e, 'img');
            }
          });
        }
      }
      if (componentType === 'CommonSwitch') {
        var _this$props6 = _this.props,
          _isEdit = _this$props6.isEdit,
          defaultChecked = _this$props6.defaultChecked;
        return /*#__PURE__*/React.createElement(_Switch, {
          checkedChildren: "\u5F00",
          defaultChecked: defaultChecked,
          unCheckedChildren: "\u5173",
          onChange: function onChange(e) {
            return _this.onChange(e);
          },
          disabled: _isEdit
        });
      }
      if (componentType === 'CommonNumberInput') {
        var _this$props7 = _this.props,
          _isEdit2 = _this$props7.isEdit,
          precision = _this$props7.precision,
          _defaultValue = _this$props7.defaultValue;
        return /*#__PURE__*/React.createElement(_NumberPicker, {
          precision: precision,
          onChange: function onChange(e) {
            return _this.onChange(e);
          },
          defaultValue: _defaultValue,
          disabled: _isEdit2
        });
      }
      return /*#__PURE__*/React.createElement(_Input, {
        onChange: function onChange(e) {
          return _this.onChange(e);
        },
        placeholder: placeholder,
        defaultValue: defaultValue
      });
    };
    _this.state = {
      childList: [],
      selectData: [],
      imgData: [],
      //图片
      fileData: [],
      //附件
      optionData: []
    };
    return _this;
  }
  var _proto = FormItem.prototype;
  _proto.componentDidMount = /*#__PURE__*/function () {
    var _componentDidMount = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
      return _regeneratorRuntime.wrap(function _callee7$(_context7) {
        while (1) switch (_context7.prev = _context7.next) {
          case 0:
            _context7.next = 2;
            return this.initData();
          case 2:
          case "end":
            return _context7.stop();
        }
      }, _callee7, this);
    }));
    function componentDidMount() {
      return _componentDidMount.apply(this, arguments);
    }
    return componentDidMount;
  }();
  _proto.componentWillUnmount = function componentWillUnmount() {
    var _this2 = this;
    events.off('getData', function () {
      return _this2.getData;
    });
  };
  // 预览图片
  _proto.onPreview = function onPreview(info) {
    _Dialog.show({
      title: "图片预览",
      content: /*#__PURE__*/React.createElement("img", {
        src: info.imgURL,
        style: {
          width: 500,
          height: 500
        }
      }),
      footer: false
    });
  };
  _proto.render = function render() {
    var _this$props8 = this.props,
      displayName = _this$props8.displayName,
      fieldName = _this$props8.fieldName,
      isEdit = _this$props8.isEdit,
      isEmpty = _this$props8.isEmpty,
      componentType = _this$props8.componentType;
    // 表单项
    var formItemLayoutItem = {
      labelCol: {
        span: 8
      },
      wrapperCol: {
        span: 14
      }
    };
    var onterProps = componentType === 'CommonAttachment' ? {
      help: '支持扩展名：.rar .zip .doc .docx .pdf .jpg...'
    } : {};
    return /*#__PURE__*/React.createElement(_Form.Item, _extends({
      colon: true,
      name: fieldName
    }, formItemLayoutItem, onterProps, {
      requiredMessage: "\u8BF7\u8F93\u5165" + displayName,
      required: isEmpty,
      disabled: isEdit,
      labelAlign: "left",
      label: displayName
    }), this.renderColumns());
  };
  return FormItem;
}(React.Component);
FormItem.displayName = void 0;
FormItem.displayName = 'FormItem';
export default FormItem;