import React, { useState, useEffect } from "react";
import { Card, DatePicker, Form, message, Upload } from "antd"
import BraftEditor from "braft-editor"
import "braft-editor/dist/index.css"
import ProForm, { ProFormSelect, ProFormText } from "@ant-design/pro-form";
import { addArticle, updateArticle } from "@/services/api-type/api";
import { useLocation, history } from "umi";
import moment from "moment";
import { ContentUtils } from "braft-utils"
const UpdateForm: React.FC<any> = (props) => {
const [form] = Form.useForm()
const location: any = useLocation()
const { ...values } = location.query?.values
const [introduce, setIntroduce] = useState(BraftEditor.createEditorState(null))
const [content, setContent] = useState(BraftEditor.createEditorState(null))
//富选框参数
const controls: any = ['undo', 'redo', 'separator',
'font-size', 'line-height', 'letter-spacing', 'separator',
'text-color', 'blod', 'italic', 'underline', 'strike-through', 'separator',
'superscript', 'subscript', 'remove-styles', 'emoji', 'separator', 'text-indent', 'text-align', 'separator',
'headings', 'list-ul', 'list-ol', 'blockquote', 'code', 'separator',
'link', 'separator', 'hr', 'separator',
'clear', 'separator',
]
useEffect(() => {
if (values?.id) {
setContent(BraftEditor.createEditorState(values?.content))
setIntroduce(BraftEditor.createEditorState(values?.introduce))
}
}, [])
const onFinish = async (val: any) => {
if (values?.id) {
val.id = values?.id
}
val.introduce = introduce.toHTML()
val.content = content.toHTML()
const hide = message.loading('正在更新');
try {
let response
if (values?.id) {
response = await updateArticle(val as API.ArticleListItem)
} else if (!values?.id) {
response = await addArticle(val as API.ArticleListItem)
}
if (response?.code === 10000) {
hide()
message.success('更新成功');
history.goBack()
}
} catch (error) {
hide();
message.error('添加失败请重试！');
}
}
const handleImageContentChange = (info: any) => {
if (info?.file?.response?.message == "success") {
setContent(ContentUtils.insertMedias(content, [{
type: 'IMAGE',
url: info?.file?.response?.url
}]))
}
}
const handleImageIntroduceChange = (info: any) => {
if (info?.file?.response?.message == "success") {
setIntroduce(ContentUtils.insertMedias(introduce, [{
type: 'IMAGE',
url: info?.file?.response?.url
}]))
}
}
const extendControlsIntroduce: any = [
{
key: 'antd-uploader',
type: 'component',
component: (
<Upload
accept="*"
showUploadList={false}
onChange={handleImageIntroduceChange}
action='http://127.0.0.1:9097/upload/image'
>
<button type="button" className="control-item button upload-button" data-title="插入图片">上传图片</button>
</Upload>
)
}
]
const extendControlsContent: any = [
{
key: 'antd-uploader',
type: 'component',
component: (
<Upload
accept="*"
showUploadList={false}
onChange={handleImageContentChange}
action='http://127.0.0.1:9097/upload/image'
>
<button type="button" className="control-item button upload-button" data-title="插入图片">上传图片</button>
</Upload>
)
}
]
return (
<Card>
<ProForm onFinish={onFinish} initialValues={{ ...values }} form={form}>
<ProForm.Group>
<ProFormText width="lg" name="title" label="标题" placeholder="请输入标题"></ProFormText>
<ProFormSelect name="typeId" label="分类" placeholder="请选择文章分类"></ProFormSelect>
<Form.Item
name="create_at"
label="创建日期"
getValueFromEvent={(val: any) => { return val.valueOf() }}
getValueProps={(val: any) => moment(val)}
>
<DatePicker
defaultValue={values?.create_at ? moment(values?.create_at) : undefined}
format="YYYY/MM/DD"
placeholder="请输入创建日期">
</DatePicker>
</Form.Item>
</ProForm.Group>
<Card >
<ProForm.Item
label="文章简介"
>
<BraftEditor
controls={controls}
value={introduce}
onChange={(editorState) => { setIntroduce(editorState) }}
extendControls={extendControlsIntroduce}
>
</BraftEditor>
</ProForm.Item>
</Card>
<Card >
<ProForm.Item
label="文章内容"
>
<BraftEditor
value={content}
controls={controls}
onChange={(editorState) => { setContent(editorState) }}
extendControls={extendControlsContent}
></BraftEditor>
</ProForm.Item>
</Card>
</ProForm>
</Card>
)
}
export default UpdateForm
