import React, { useEffect, useImperativeHandle, useState } from 'react';
import AlertMenu from './fullScreen'
import E from 'wangeditor';
import { Button, message, Spin } from 'antd';
import { pictureDisplayPath, uploadAttachmentPath } from '@/utils/DownloadUtils';

interface WangType {
  braftRef: any;//挂载
  disabled?: any;//是否可编辑
  echo?: any;//回显内容
  value?: any;
  height?: number;
  onChange?: (value: any) => void
}
let editor: any = null;

const BraftText: React.FC<WangType> = (props) => {
  let willCreate = true;

  // 菜单 key ，各个菜单不能重复-自定义工具
  const menuKey = 'alertMenuKey'
  //======================================================================================state
  const [content, setContent] = useState('');
  const [fullScreen, fullScreenSet] = useState(false);
  //遮罩
  const [loading, setLoading] = useState(false);
  const {
    braftRef,
    echo,
    disabled,
    value,
    height,
    onChange,
  } = props;

  const tools = [//工具栏
    'head',//标题
    'fontSize', //字号
    // 'lineHeight', //行高
    'foreColor', //颜色
    'bold', //加粗
    'italic', //斜体
    'underline', //下划线
    'strikeThrough', //文字删除线
    'indent', //缩进
    'justify', //文字对齐方式
    'list', //列表
    'image',//图片
    'undo', //撤销
    'redo', //恢复
    'fullscreen', //全屏

    // 'emoticon',//表情
    // 'video',//视频
    // 'table',//表格
    // 'todo',//待办
  ];

  //=======================================================================================func
  useEffect(() => {
    if (willCreate) {
      // 注：class写法需要在componentDidMount 创建编辑器
      editor = new E("#div1");

      //工具栏
      editor.config.menus = tools;
      //提示
      editor.config.placeholder = '为了能顺利发布，建议您内容去掉下划线等格式，尽量以纯文本形式发布。';
      // 配置 onchange 回调函数
      editor.config.onchange = editorOnChange;
      // 注册菜单
      // editor.menus.extend(menuKey, AlertMenu);

      // 将菜单加入到 editor.config.menus 中    const menuKey = 'alertMenuKey' 
      // 也可以通过配置 menus 调整菜单的顺序，参考【配置菜单】部分的文档    editor.config.menus.push(menuKey)
      // editor.config.menus = editor.config.menus.concat(menuKey)

      // 设置编辑区域高度为 500px
      height && (editor.config.height = height);
      //关闭网络上传图片
      editor.config.showLinkImg = false;
      // 关闭粘贴内容中的样式
      editor.config.pasteFilterStyle = false;
      // 忽略粘贴内容中的图片
      editor.config.pasteIgnoreImg = true;
      // 上传图片到服务器,对应的是controller层的@RequestMapping("/upload")
      editor.config.uploadImgServer = uploadAttachmentPath;//接口名称
      //自定义name,接收的时候图片文件的那么用这个，对应的是参数中的MultipartFile upimg名称,这个名称即上传到浏览器的参数名称
      editor.config.uploadFileName = "multipartFiles";//这个需要和后台商量上传图片的名称
      //设置请求体额外参数
      editor.config.uploadImgParams = {
        appCode: 'ebtp-cloud-frontend',
        objectId: '1546325338156965888',
      };
      // 将 timeout 时间改为 60s
      editor.config.uploadImgTimeout = 60000;
      // 将图片大小限制为 500k
      editor.config.uploadImgMaxSize = 500 * 1024;
      // 限制一次最多上传 1 张图片
      editor.config.uploadImgMaxLength = 1;
      //上传图片的错误提示默认使用alert弹出,也可以自定义用户体验更好的提示方式
      editor.config.customAlert = function (info: string) {
        const repinfo = info.replace(/0.48828125M/g, '500K');
        // info 是需要提示的内容
        message.error(repinfo);
      };
      // 上传图片的结果反馈
      editor.config.uploadImgHooks = {
        before: function (xhr: any, editor: any, files: any) {
          console.log('before xhr', xhr);
          console.log('before files', files);
          setLoading(true);
          // 图片上传之前触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
          // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
          // return {
          // prevent: true,
          // msg: '放弃上传'
          // }
          // console.log("before:",xhr)
        },
        success: function (xhr: any, editor: any, result: any) {
          // 图片上传并返回结果，图片插入成功之后触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
          // console.log("success:",result)
        },
        fail: function (xhr: any, editor: any, result: any) {
          // 图片上传并返回结果，但图片插入错误时触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
        },
        error: function (xhr: any, editor: any) {
          // 图片上传出错时触发
          // xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
        },
        // 上传图片超时
        timeout: function (xhr: any) {
          message.error('服务器超时！');
          setLoading(false);
        },
        // 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
        // （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
        customInsert: function (insertImg: (arg0: any) => void, result: any, editor: any) {
          // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
          // insertImg 是插入图片的函数，参数editor 是编辑器对象，result 是服务器端返回的结果
          // 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
          console.log('customInsert result', result)
          if (result?.success) {
            const url = pictureDisplayPath + '?filePath=' + result.data[0].sysStorageVO.filePath;
            insertImg(url);
          } else {
            message.error('图片上传失败！');
          }
          setLoading(false);
          // var url = result.result.remote_path;
          // insertImg(url);
          // result 必须是一个 JSON 格式字符串！！！否则报错
        }
      };
      /**一定要创建 */
      editor.create();

      //控制是否可编辑
      disabled && makeDis();

      willCreate = false;
    }

    // 重新设置编辑器内容
    echo && editor.txt.html(echo);
    value && editor.txt.html(value);

    return () => {
      // 组件销毁时销毁编辑器  注：class写法需要在componentWillUnmount中调用
      editor.destroy()
    }
  }, [value, echo]);
  /**
  *提供给父级的内容
  **/
  useImperativeHandle(braftRef, () => ({
    getText,
    getHtml,
    getHtml1,
    makeDis,
  }));

  // 获取html方法1
  function getHtml() {
    return content
  }

  // 获取html方法2
  function getHtml1() {
    return editor.txt.html()
  }

  // 获取text
  function getText() {
    alert(editor.txt.text())
  }

  //change
  function editorOnChange(newHtml: any) {
    setContent(newHtml);
    triggerChange(newHtml)
  }

  //不可编辑
  function makeDis() {
    editor.disable();
  }

  //form取值
  const triggerChange = (newHtml: any) => {
    onChange?.(newHtml);
  };
  return (
    <Spin spinning={loading} tip={"上传中……"}>
      <div>
        <div id="div1" style={{ textAlign: 'left' }}></div>
      </div>
    </Spin>
  )
}
export default BraftText