/* eslint-disable */
import React, { Component } from 'react';
// import '@ant-design/compatible/assets/index.css';
import AntdDraggableModal from '@/components/Common/AntdDraggableModal';
import BraftEditor from 'braft-editor'
import 'braft-editor/dist/index.css'

export default class EditorModal extends Component {
  /**   构造函数   */
  constructor(props) {
    super(props);
    this.controls = [
      'undo', 'redo', 'separator',
      'font-size', 'line-height', 'letter-spacing', 'separator',
      'text-color', 'bold', 'italic', 'underline', 'strike-through', 'separator',
      'superscript', 'subscript', 'remove-styles',  'separator', 'text-indent', 'text-align', 'separator',
      'headings', 'list-ul', 'list-ol', 'blockquote', 'code', 'separator',
      'link', 'separator', 'hr', 'separator',
      'separator',
      'clear', 'media',
    ]
    this.state = {
      editorState: BraftEditor.createEditorState(null)
    };
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.curEditorProps) {
      if (nextProps.curEditorProps.value) {
        this.setState({
          editorState: BraftEditor.createEditorState(nextProps.curEditorProps.value)
        })
      } else {
        this.setState({
          editorState: BraftEditor.createEditorState(null)
        })
      }
    }
  }

  handleEditorChange = (editorState) => {
    this.setState({ editorState })
  }

  handleCloseModal = () => {
    this.props.onSaveState({
      curEditorProps: {
        ...this.props.curEditorProps,
        visible: false
      }
    })
  }

  handleOk = () => {
    let { masterData, curEditorProps } = this.props;
    let addState = {};
    const value = this.state.editorState.toHTML();
    let handleType = masterData.handleType ? masterData.handleType : 'update';/* 获取操作类型 */
    addState.handleType = handleType;
    addState[curEditorProps.sName] = value;
    this.props.onSaveState({ masterData: {...masterData, ...addState}, curEditorProps: {...curEditorProps, value} });
    this.handleCloseModal();
  };

  handleCancel = () => {
    this.handleCloseModal();
  };

  /**   渲染   */
  render() {
    const { curEditorProps = {} } = this.props;
    let visible = false;
    if (Object.keys(curEditorProps).length) {
      visible = curEditorProps.visible;
    }
    return (
      <div>
        {
          visible ? <AntdDraggableModal
            zIndex={1000}
            title='文本编辑'
            visible={visible}
            onOk={this.handleOk}
            width='70%'
            bodyStyle={{
              height: '60vh',
            }}
            onCancel={this.handleCancel}
          >
            <BraftEditor
              controls={this.controls}
              readOnly={!this.props.enabled}
              value={this.state.editorState}
              onChange={this.handleEditorChange}
            />
          </AntdDraggableModal> : ''
        }
      </div>
    );
  }
}