/**
 * wangEditor http://www.wangeditor.com/  将git 源码下载下来 然后 npm run build 获取编译后的代码 版本 4.2.2
 * 钟是志
 * 2020年11月5日 16:56:23
 *
 **/
/**
 * key: 组件的key // 同一页面渲染应该只有一个唯一的key
 * height: number // 编辑区域的高度 单位px
 * zIndex: number // 默认为 10000 可自行设置
 * placeholder: string // 提示文字,
 * focus: boolean, // 是否获取焦点
 * value: string // 富文本的值
 * 更多配置项 参考 http://www.wangeditor.com/doc/
 * */
import React, { useState, useEffect } from 'react';
import WangEditor from './includes/wangEditor.min';
import uploadFile from './uploadFile';

let editor = null;
export default function Index({
                                height,
                                zIndex,
                                placeholder,
                                focus,
                                value,
                                domKey,
                                onChangeValue,
                              }) {
  useEffect(
    () => {
      editor = new WangEditor(`#wangEditor${domKey}`);
      if (height) {
        editor.config.height = height; // 编辑器高度
      }
      if (zIndex) {
        editor.config.zIndex = zIndex; // 编辑器 z-index
      }
      if (placeholder) {
        editor.config.placeholder = placeholder; // placeholder
      }
      if (focus) {
        editor.config.focus = focus;
      }
      editor.config.onchange = function(newHtml) {
        onChangeValue(newHtml);
      };

      editor.config.onchangeTimeout = 500;  // html内容改变时的 timeOut 配置

      editor.config.customUploadImg = function(resultFiles, insertImgFn) { // 重写上传图片的方法
        uploadFile({ file: resultFiles[0] }).then((y) => {
          if (y && y.url) {
            insertImgFn(y.url);
          }
        });
        // insertImgFn(imgUrl);
      };

      editor.config.pasteFilterStyle = false; // 关闭粘贴样式的过滤
      editor.config.uploadImgMaxSize = 3 * 1024 * 1024; // 上传的图片不能大于3M
      editor.config.uploadImgMaxLength = 1; // 一次最多上传 1 个图片
      editor.config.menus = [ // 配置菜单
        'head',
        'bold',
        'fontSize',
        'fontName',
        'italic',
        'underline',
        'strikeThrough',
        'indent',
        'lineHeight',
        'foreColor',
        'backColor',
        'link',
        'list',
        'justify',
        'quote',
        // 'emoticon',
        'image',
        'video',
        'table',
        // 'code',
        'splitLine',
        // 'undo',
        // 'redo',
      ];

      editor.create();
      console.log(value);
      if(value && value.indexOf('wangEditorHtml') > -1) {
        editor.txt.html(value);
      }else{
        editor.txt.html('<div class="wangEditorHtml">' + value + '</div>');
      }

      return () => {
        console.log('是否销毁了editor');
        editor.destroy();
      };
    }, []);
  // useEffect(() => {
  //   if (value && editor && editor.txt) {
  //     editor.txt.html('<div class="wangEditorHtml">' + value + '</div>');
  //   }
  // }, [value]);
  return (
    <div id={`wangEditor${domKey}`}>

    </div>
  );
}