text: import React, {ChangeEventHandler, useEffect} from 'react';
  // import {PageHeaderWrapper} from '@ant-design/pro-layout';
  import BlankLayout from '@/layouts/BlankLayout';
  // import UserLayout from '@/layouts/UserLayout';
  import {ArticleModelState} from '@/models/article';
  import {ConnectProps, ConnectState, Dispatch} from '@/models/connect';
  import {connect} from 'dva';
  import {Button, Input, message} from 'antd';
  // @ts-ignore
  import MarkdownIt from 'markdown-it';
  import MdEditor from "react-markdown-editor-lite";
  
  // 引入codemirror样式
  import style from './ArticleEdit.scss';
  import 'codemirror/mode/markdown/markdown';
  import {router} from 'umi';
  
  export interface ArticleEditProps extends ConnectProps {
    article: ArticleModelState;
    dispatch: Dispatch;
  }
  
  const ArticleEdit: React.FC<ArticleEditProps> = props => {
    const {dispatch, article} = props;
  
    const isEdit = (): Boolean => {
      return (
        !!location.hash.match(/edit/) ||
        (!!article.currentArticle && !!article.currentArticle._id)
      );
    };
  
    useEffect(() => {
      if (dispatch) {
        if (isEdit()) {
          // 如果为编辑文章
          const arr = location.hash.split('/');
          dispatch({
            type: 'article/fetchArticle',
            payload: {
              id: arr[arr.length - 1],
            },
          });
        } else {
          // 如果为新增文章
        }
      }
  
      TDAPP.onEvent('文章编辑-访问页面');
    }, []);
  
    // 更新标题
    const onTitleChange: ChangeEventHandler<HTMLInputElement> = ev => {
      // console.log(article.currentArticle);
      // console.log(ev.target.value);
      if (dispatch) {
        dispatch({
          type: 'article/setArticleTitle',
          payload: {
            title: ev.target.value,
          },
        });
      }
    };
  
    // 更新内容
    const onContentChange = (data: any) => {
      const text = data.text;
      const html = data.html;
      if (dispatch) {
        dispatch({
          type: 'article/setArticleContent',
          payload: {
            content: text,
            contentHtml: html,
          },
        });
      }
    };
  
    const onImageUpload = (data: any) => {
      console.log(data);
    };
  
    // markdown to html转换器
    const mdParser = new MarkdownIt();
  
    // 调整CodeMirror高度
    setTimeout(() => {
      const $el = document.querySelector('.CodeMirror');
      if ($el) {
        $el.setAttribute('style', 'min-height:calc(100vh - 50px - 50px);box-shadow:none');
      }
    }, 100);
  
    // 点击保存
    const onSave = async () => {
      if (article.currentArticle) {
        // 文章标题校验
        if (article.currentArticle.title.length < 5) {
          message.error('标题字数不得小于5');
          return;
        }
  
        // 文章内容校验
        if (article.currentArticle.content.length < 10) {
          message.error('内容字数不得小于9');
          return;
        }
      }
  
      if (isEdit()) {
        // 如果为编辑文章
        await dispatch({
          type: 'article/saveCurrentArticle',
          payload: article.currentArticle,
        });
        message.success('文章保存成功');
      } else {
        // 如果为创建文章
        await dispatch({
          type: 'article/newArticle',
          payload: article.currentArticle,
        });
        message.success('文章保存成功');
      }
  
      TDAPP.onEvent('文章编辑-保存文章');
    };
  
    // 点击返回
    const onBack = () => {
      router.push('/articles');
  
      TDAPP.onEvent('文章编辑-返回');
    };
  
    return (
      <BlankLayout>
        <div className={style.articleEdit}>
          {/*标题*/}
          <div className={style.topBar}>
            <Input
              className={style.title}
              placeholder="文章标题"
              value={article.currentArticle ? article.currentArticle.title : ''}
              onChange={onTitleChange}
            />
            <div className={style.actions}>
              <Button className={style.backBtn} type="default" onClick={onBack}>
                返回
              </Button>
              <Button className={style.saveBtn} type="primary" onClick={onSave}>
                保存
              </Button>
            </div>
          </div>
  
          {/*主要内容*/}
          <div className={style.main}>
            <MdEditor
              style={{width: '100%', height: 'calc(100vh - 50px)'}}
              value={article.currentArticle ? article.currentArticle.content : ''}
              renderHTML={(text) => {
                const html = mdParser.render(text);
                dispatch({
                  type: 'article/setArticleContentHtml',
                  payload: {
                    contentHtml: html,
                  },
                });
                return html;
              }}
              onChange={onContentChange}
              onImageUpload={onImageUpload}
            />
          </div>
        </div>
      </BlankLayout>
    );
  };
  
  export default connect(({article}: ConnectState) => ({
    article,
  }))(ArticleEdit);
  