import React, { useState, useEffect } from 'react';
import { Form, Modal, Input, Radio, notification } from 'antd';
import { getTableInfo, updateTable } from '@/services/tablemanager/tablemanager';

const AddModal = props => {
  const { callBackSubmit = () => {}, type, formObj, visible } = props;
  const [loading, setLoading] = useState(false);
  const [tableID, setTableID] = useState('');
  const [form] = Form.useForm();
  const { Item } = Form;
  // 提交
  const onSubmit = () => {
    form.validateFields().then(validate => {
      if (validate) {
        setLoading(true);
        let obj = form.getFieldsValue();
        updateTable({
          interfaceName: obj.interfaceText,
          tableID,
          tableName: obj.tableName,
          tableStyle: obj.tableStyle,
          alias: obj.tableAlias,
          officeTmpl: obj.officeTmpl,
        }).then(res => {
          setLoading(false);
          if (res.msg === 'Ok' || res.msg === '') {
            form.resetFields();
            callBackSubmit();
            notification.success({
              message: '提示',
              duration: 3,
              description: '修改成功',
            });
          } else {
            notification.error({
              message: '提示',
              duration: 3,
              description: res.msg,
            });
          }
        });
      }
    });
  };

  useEffect(() => {
    if (type !== '') {
      getTableInfo({ tableName: formObj.tableName }).then(res => {
        if (res.data.root && res.data.root.length) {
          form.setFieldsValue({
            ...res.data.root[0],
            tableStyle: res.data.root[0].tableStyle === '' ? '大' : res.data.root[0].tableStyle,
          });
          setTableID(res.data.root[0].tableID);
        }
        // eslint-disable-next-line no-lone-blocks
        {
          form.setFieldsValue({ tableStyle: '大' });
        }
      });
    }
  }, [visible]);

  const layout = {
    layout: 'horizontal',
    labelCol: {
      span: 3,
    },
    wrapperCol: {
      span: 20,
    },
  };

  return (
    <Modal
      title="修改"
      bodyStyle={{ width: '100%', minHeight: '100px' }}
      style={{ top: '50px' }}
      width="700px"
      destroyOnClose
      maskClosable={false}
      centered={true}
      cancelText="取消"
      okText="确认"
      {...props}
      onOk={() => onSubmit()}
      confirmLoading={loading}
      forceRender
      getContainer={false}
    >
      {visible && (
        <Form form={form} {...layout}>
          <Item label="表名" name="tableName" rules={[{ required: true, message: '请输入表名' }]}>
            <Input placeholder="请输入表名" allowClear />
          </Item>
          <Item label="别名" name="tableAlias">
            <Input placeholder="请输入别名" allowClear />
          </Item>
          <Item label="样式" name="tableStyle" rules={[{ required: true, message: '请选择样式' }]}>
            <Radio.Group>
              <Radio value="大">大(3)</Radio>
              <Radio value="中">中(4)</Radio>
              <Radio value="小">小(5)</Radio>
              <Radio value="较小">较小(6)</Radio>
            </Radio.Group>
          </Item>
          <Item label="模板" name="officeTmpl">
            <Input placeholder="请输入模板" allowClear />
          </Item>
          <Item label="接口" name="interfaceText">
            <Input placeholder="请输入接口" allowClear />
          </Item>
        </Form>
      )}
    </Modal>
  );
};
export default AddModal;
