import { Col, Form, Input, message, Modal, Row, Select } from 'antd';
import React, { useEffect, useState } from 'react';
import { queryColumn } from '@/services/cms/ColumnList';
import MyEditor from '@/components/MyEditor';
import { createArticle, editArticle } from '@/services/cms/ArticleManagement';

interface editPros {
  visible: boolean;
  editCallback: () => void;
  params: any;
}

/**
 * 文章管理编辑页面
 * @param props
 * @constructor
 */
const Edit: React.FC<editPros> = (props) => {
  const { visible, editCallback, params } = props;
  const [form] = Form.useForm();
  const [dataList, setDataList]: any = useState([]);

  // 获取列表数据
  const getList = () => {
    queryColumn({ q: 'list' }).then((res) => {
      if (res && res.code === 0) {
        setDataList(res.data.list);
      }
    });
  };

  useEffect(() => {
    getList();
  }, []);

  const onOk = () => {
    form.validateFields().then((values) => {
      if (values) {
        const data = { ...values };
        if (params) {
          data.record_id = params.record_id;
          editArticle(data)
            .then((res) => {
              if (res.code === 0) {
                message.success('编辑成功');
                editCallback();
              } else {
                message.error(res?.message);
                editCallback();
              }
            })
            .catch((e) => {
              message.error(e?.message);
              editCallback();
            });
        } else {
          createArticle(data)
            .then((res) => {
              if (res.code === 0) {
                message.success('保存成功');
                editCallback();
              } else {
                message.error(res?.message);
                editCallback();
              }
            })
            .catch((e) => {
              message.error(e?.message);
              editCallback();
            });
        }
      }
    });
  };

  /**
   * 取消
   */
  const onCancel = () => {
    editCallback();
  };

  const formItemLayout = {
    labelCol: {
      span: 4,
    },
    wrapperCol: {
      span: 20,
    },
  };

  return (
    <Modal
      title={`${params ? '编辑' : '新增'}`}
      open={visible}
      onOk={onOk}
      onCancel={onCancel}
      width={1000}
    >
      <Form form={form}>
        <Row>
          <Col span={24}>
            <Form.Item
              {...formItemLayout}
              name="title"
              label="文章标题"
              rules={[{ required: true, message: '请输入文章标题' }]}
              initialValue={params?.title}
            >
              <Input placeholder="请输入文章标题" />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item
              {...formItemLayout}
              name="column_id"
              label="栏目名称"
              rules={[{ required: false, message: '请选择栏目名称' }]}
              initialValue={params?.column_id}
            >
              <Select placeholder="请选择栏目名称">
                {dataList && dataList.length
                  ? dataList.map((res: any) => {
                      return (
                        <Select.Option value={res.record_id} key={res.record_id}>
                          {res.name}
                        </Select.Option>
                      );
                    })
                  : null}
              </Select>
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item
              {...formItemLayout}
              name="content"
              label="内容"
              rules={[{ required: false, message: '请输入内容' }]}
              initialValue={params?.content ? params?.content : ''}
            >
              <MyEditor data={params?.content ? params?.content : ''} readOnly={false} />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};
export default Edit;
