import { Col, Form, Input, message, Modal, Row, Select } from 'antd';
import React, { useEffect, useState } from 'react';
import { createColumn, editColumn, queryColumn } from '@/services/cms/ColumnList';

const { TextArea } = Input;

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

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;
          editColumn(data)
            .then((res) => {
              if (res.code === 0) {
                message.success('编辑成功');
                editCallback();
              } else {
                message.error(res?.message);
                editCallback();
              }
            })
            .catch((e) => {
              message.error(e?.message);
              editCallback();
            });
        } else {
          createColumn(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: 6,
    },
    wrapperCol: {
      span: 16,
    },
  };

  return (
    <Modal
      title={`${params ? '编辑' : '新增'}`}
      open={visible}
      onOk={onOk}
      onCancel={onCancel}
      width={800}
    >
      <Form form={form}>
        <Row>
          <Col span={24}>
            <Form.Item
              {...formItemLayout}
              name="name"
              label="栏目名称"
              rules={[{ required: true, message: '请输入栏目名称' }]}
              initialValue={params?.name}
            >
              <Input placeholder="请输入栏目名称" />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item
              {...formItemLayout}
              name="code"
              label="编号"
              rules={[{ required: true, message: '请输入编号' }]}
              initialValue={params?.code}
            >
              <Input placeholder="请输入编号" />
            </Form.Item>
          </Col>
          <Col span={24}>
            <Form.Item
              {...formItemLayout}
              name="status"
              label="状态"
              rules={[{ required: true, message: '请选择状态' }]}
              initialValue={params?.status}
            >
              <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
              {...formItemLayout}
              name="parent_id"
              label="上级栏目名称"
              rules={[{ required: false, message: '请选择上级栏目名称' }]}
              initialValue={params?.parent_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="memo"
              label="备注"
              rules={[{ required: false, message: '请输入备注' }]}
              initialValue={params?.memo}
            >
              <TextArea rows={4} placeholder="请输入备注" />
            </Form.Item>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};
export default Edit;
