import _Progress from "@alifd/next/es/progress";
import _Dialog from "@alifd/next/es/dialog";
import _Message from "@alifd/next/es/message";
import _Button from "@alifd/next/es/button";
import _Icon from "@alifd/next/es/icon";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React, { Component } from 'react';
import JoditEditor from 'jodit-react';
import style from "./index.module.scss";
import EditorLeft from "./left";
import cosUpload from "../../module/axios/cosUpload";
var JoditEditorSetter = /*#__PURE__*/function (_Component) {
  _inheritsLoose(JoditEditorSetter, _Component);
  function JoditEditorSetter() {
    var _this2;
    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }
    _this2 = _Component.call.apply(_Component, [this].concat(args)) || this;
    _this2.state = {
      editorVisible: false,
      // 显示状态
      upload: {
        isLoadding: false,
        progress: 0
      },
      html: ''
    };
    return _this2;
  }
  var _proto = JoditEditorSetter.prototype;
  _proto.render = function render() {
    var _this3 = this;
    var _this$props = this.props,
      value = _this$props.value,
      onChange = _this$props.onChange;
    var html = this.state.html;

    // 编辑器打开事件
    var editorOpen = function editorOpen(_this) {
      _this.setState({
        editorVisible: true,
        html: value.data
      });
    };

    // 编辑器关闭事件
    var editorClose = function editorClose() {
      // console.log(e.triggerType);
      _this3.setState({
        editorVisible: false
      });
    };

    // 提交内容事件
    var editorCommit = function editorCommit() {
      onChange({
        data: _this3.state.html
      });
      editorClose();
    };
    var insetContent = function insetContent(el) {
      // console.log("elelel",el)
      _this3.setState({
        // html: html + (el?.innerHTML ? el.innerHTML : el)+'<br />'
        html: html + (el !== null && el !== void 0 && el.innerHTML ? el.innerHTML : el)
      });
    };
    var setUploadStatus = function setUploadStatus(_ref) {
      var total = _ref.total,
        loaded = _ref.loaded;
      var progress = (loaded / total * 100).toFixed(2) - 0;
      if (!progress) return;
      _this3.setState({
        upload: {
          isLoadding: !(progress >= 100),
          progress: progress
        }
      });
    };

    // const editorConf = {
    //     // if(isJodit===true){
    //     //     console.log(make);
    //     //     debugger
    //     //     JoditEditor.make('.someselector', {
    //     //         extraButtons: [
    //     //             {
    //     //                 name: 'insertDate',
    //     //                 iconURL: 'http://xdsoft.net/jodit/logo.png',
    //     //                 exec: function (editor) {
    //     //                     editor.s.insertHTML(new Date().toDateString());
    //     //                 }
    //     //             }
    //     //         ]
    //     //     });
    //     // }
    // }
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(_Button, {
      onClick: function onClick() {
        return editorOpen(_this3);
      }
    }, /*#__PURE__*/React.createElement(_Icon, {
      type: "edit"
    }), "\u7F16\u8F91\u5185\u5BB9"), /*#__PURE__*/React.createElement(_Dialog, {
      title: null,
      visible: this.state.editorVisible,
      onOk: editorCommit,
      onClose: editorClose,
      onCancel: editorClose,
      className: style.dialog
    }, /*#__PURE__*/React.createElement("div", {
      className: style.title
    }, "\u914D\u7F6E\u56FE\u6587\u5185\u5BB9"), /*#__PURE__*/React.createElement("div", {
      className: style.editor
    }, /*#__PURE__*/React.createElement("div", {
      className: style['editor-left']
    }, /*#__PURE__*/React.createElement(EditorLeft, {
      insetContent: insetContent
    })), /*#__PURE__*/React.createElement(JoditEditor, {
      className: style['editor-right'],
      value: this.state.html,
      onBlur: function onBlur(newContent) {
        _this3.setState({
          html: newContent
        });
      },
      config: {
        language: "zh_cn",
        // "uploader": {
        //     "insertImageAsBase64URI": true
        // },
        "extraButtons": [{
          name: 'uploadImage',
          iconURL: 'https://img.maimairen.com/low-code/ali/material-icon/upload-image.svg?versionId=MTg0NDUwODM5OTMzMDM1MDQ5MzU',
          exec: function exec(editor) {
            var file = editor.c.element('input');
            file.type = 'file';
            file.onchange = function (ev) {
              var _ev$target;
              var succ = cosUpload((_ev$target = ev.target) === null || _ev$target === void 0 ? void 0 : _ev$target.files[0], {
                pathDir: 'img-text-tpl2' || '',
                isDateDir: true,
                reName: true,
                onProgress: function onProgress(_ref2) {
                  var total = _ref2.total,
                    loaded = _ref2.loaded;
                  setUploadStatus({
                    total: total,
                    loaded: loaded
                  });
                }
              });
              succ.then(function (_ref3) {
                var code = _ref3.code,
                  data = _ref3.data,
                  msg = _ref3.msg;
                if (code === '0000') {
                  insetContent("<img src=\"" + data.ossPath + "\" alt=\"" + data.imgName + "\">");
                } else {
                  _Message.error(msg);
                }
              });
            };
            file.click();
          }
        }]
      }
    }))), /*#__PURE__*/React.createElement(_Dialog, {
      title: "\u6587\u4EF6\u4E0A\u4F20\u4E2D...",
      visible: this.state.upload.isLoadding,
      footer: /*#__PURE__*/React.createElement("div", null),
      closeMode: [],
      className: style.uploading
    }, /*#__PURE__*/React.createElement(_Progress, {
      percent: this.state.upload.progress,
      shape: "circle"
    })));
  };
  return JoditEditorSetter;
}(Component);
JoditEditorSetter.displayName = 'JoditEditorSetter';
export { JoditEditorSetter as default };