import React, { Component, createRef } from "react";
import { Card, Button, Form, Input, DatePicker } from "antd";
import { FileOutlined, GithubOutlined, EyeOutlined } from "@ant-design/icons";
import E from "wangeditor";
import "./edit.less";
// console.log(E);

export default class ArticleEdit extends Component {
  constructor() {
    super();
    this.editorRef = createRef();
  }

  //? wangeditor
  initEditor = () => {
    this.editor = new E(this.editorRef.current);
    this.editor.customConfig.onchange = (html) => {
      console.log(html);
      //? html 即变化之后的内容
      this.editorRef.current.setFieldsValue({ content: html });
    };
    this.editor.create();
  };

  componentDidMount() {
    this.initEditor();
  }
  render() {
    const onFinish = (values) => {
      console.log("Received values of form: ", values);
    };

    //? layout
    const layout = {
      labelCol: { span: 2 },
      wrapperCol: { span: 14 },
    };
    return (
      <Card title="编辑文章" extra={<Button>取消编辑</Button>}>
        <Form
          name="normal_article"
          className="login-form"
          initialValues={{ remember: true }}
          onFinish={onFinish}
          {...layout}
        >
          <Form.Item
            name="content"
            label="内容区域"
            rules={[{ required: true, message: "内容不可为空" }]}
          >
            <div className="wangeditor-index" ref={this.editorRef}></div>
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 2 }}>
            <Button
              type="primary"
              htmlType="submit"
              className="login-form-button"
            >
              保存修改
            </Button>
          </Form.Item>
        </Form>
      </Card>
    );
  }
}