/*
 * Creater:     liudan
 * CreateDate:  2023/04/07
 * Describe:    json类数据和XML格式数据的预览转换查看复制
 * params 
 * dialogTitle 弹窗标题
 * visibleDialog 是否显示弹窗
 * dialogFn 弹窗关闭的回调
 * dialogContent 弹窗的内容
 * dialogContentType 弹窗的数据显示类型
 * */
import React from 'react';
import { Modal, Button, message, Select } from 'antd';
const { Option } = Select;
import E from 'wangeditor';
import hljs from 'highlight.js';
import 'highlight.js/styles/github.css';
import { format, formatXml } from 'tools/json2xml.js';

class PreviewJson extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isString: true,
      editor: null,
      langType: 'Plaintext', // 默认文本展现Plaintext XML JSON
    };
  }
  componentDidUpdate = (prev) => {
    if (this.props.dialogContent === prev.dialogContent) {
      return false;
    }
    if (!this.state.editor) {
      setTimeout(() => {
        const dom = this.refs.editorDom;
        const editor = new E(dom);
        editor.customConfig.menus = [];
        editor.create();
        this.setState({
          editor: editor,
        });
        const body = document.querySelector('#' + editor.textElemId)
        body.setAttribute('contenteditable', 'false');
        body.style.height = '580px';
        body.parentNode.style.height = '596px';
        // 设置编辑器高度
        this.setContent(this.props.dialogContentType, editor);
      }, 0);
    } else {
      this.setContent(this.props.dialogContentType);
    }
  }
  // 切换语言转换
  onChange = (lang) => {
    this.setContent(lang, this.state.editor);
  }
  // 高亮设置代码的内容
  setContent = (lang, editor = this.state.editor) => {
    this.setState({
      langType: lang,
    });
    const { dialogContent } = this.props;
    let html = lang === 'json' ? format(dialogContent, false) : formatXml(dialogContent);
    html = html.replaceAll('&nbsp;', ' ');
    html = hljs.highlight(html, {
      language: lang,
      ignoreIllegals: true,
    }).value;
    editor.txt.html(`<pre style="white-space: pre-wrap;word-wrap: break-word;">
      <code>${html}</code>
    </pre>`);
  }
  // 内容复制
  copy = () => {
    const { document } = window;
    const dom = document.createElement("input");
    dom.value = this.props.dialogContent
    document.body.appendChild(dom);
    dom.select();
    document.execCommand("copy");
    document.body.removeChild(dom);
    message.success('复制成功');
  }
  render () {
    const langs = ['Plaintext', 'XML', 'JSON'];
    const options = langs.map(value => <Option key={value}>{value}</Option>);
    return (
      <div>
        <Modal
          title={this.props.dialogTitle || '详情'}
          width={'75%'}
          visible={this.props.visibleDialog}
          
          onOk={this.props.dialogFn}
          onCancel={this.props.dialogFn}
          cancelButtonProps={{ style: { display: 'none' } }}
        >
          <div style={{ textAlign: 'right' }}>
            {/* 语言默认展示不切换 <Select
              defaultValue="Plaintext"
              style={{ width: 120, marginRight: '15px' }}
              onChange={this.onChange}
            >
              {options}
            </Select> */}
            <Button type="primary" onClick={this.copy}>复制</Button>
          </div>
          <div ref="editorDom" style={{ marginTop: '20px', height: '580px' }}></div>
        </Modal>
      </div>
    );
  }
}
export default PreviewJson;