import React from 'react';
import { Col, Form, Input, message, Modal, Row, Select } from 'antd';
import MyEditor from '@/components/MyEditor';
import { createPushMessage, editPushMessage } from '@/services/pushMessage';

const { TextArea } = Input;

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

/**
 * 推送消息 - 编辑
 * @param props
 * @constructor
 */
const Edit: React.FC<editPros> = (props) => {
  const { params, visible, editCallback } = props;
  const [form] = Form.useForm();

  // 提交
  const onOk = () => {
    form.validateFields().then((values) => {
      if (values) {
        const data = { ...values };
        if (params) {
          data.record_id = params.record_id;
          editPushMessage(data)
            .then((res) => {
              if (res && res.code === 0) {
                message.success('编辑成功');
                editCallback();
              } else {
                message.error('编辑失败');
              }
            })
            .catch((e) => {
              message.error(e?.message);
            });
        } else {
          createPushMessage(data)
            .then((res) => {
              if (res && res.code === 0) {
                message.success('新增成功');
                editCallback();
              } else {
                message.error('新增失败');
              }
            })
            .catch((e) => {
              message.error(e?.message);
            });
        }
      }
    });
  };

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

  const formItemLayout24 = {
    labelCol: { span: 3 },
    wrapperCol: { span: 21 },
  };

  return (
    <Modal
      title={`${params ? '编辑' : '新增'}`}
      open={visible}
      onOk={onOk}
      onCancel={onCancel}
      width={800}
    >
      <Form form={form}>
        <Row>
          <Col span={24}>
            <Form.Item
              {...formItemLayout24}
              name="title"
              label="推送标题"
              rules={[{ required: true, message: '请输入推送标题' }]}
              initialValue={params?.title}
            >
              <Input placeholder="请输入推送标题" />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item
              {...formItemLayout24}
              name="content_type"
              label="消息类型"
              rules={[{ required: true, message: '请选择消息类型' }]}
              initialValue={params?.content_type}
            >
              <Select placeholder="请选择消息类型">
                <Select.Option value={1} key="1">
                  系统消息
                </Select.Option>
                <Select.Option value={2} key="2">
                  活动消息
                </Select.Option>
              </Select>
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item
              {...formItemLayout24}
              name="content"
              label="展示内容"
              rules={[{ required: true, message: '请输入展示内容' }]}
              initialValue={params?.content}
            >
              <TextArea rows={2} placeholder="请输入展示内容" />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item
              {...formItemLayout24}
              name="body"
              label="推送内容"
              rules={[{ required: true, message: '请输入内容' }]}
              initialValue={params?.body ? params?.body : ''}
            >
              <MyEditor data={params?.body ? params?.body : ''} />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};
export default Edit;