import React, { useState } from 'react';
import { Modal, Button, Form, Radio } from 'antd';

const exportModes = [
  { name: '导出DDL', key: 'ddl' },
  { name: '导出Erwin', key: 'erwin' },
  { name: '导出Excel', key: 'excel' },
  { name: '导出Word', key: 'word' },
] 

const ExportOtherModal = (props) => {
  const { visible, onCancel } = props;

  const [ modeKey, setModeKey ] = useState('');

  const [ form ] = Form.useForm();

  const onModeChange = (e) => {
    setModeKey(e.target?.value);
  }

  const onOk = async() => {
    try {
      await form.validateFields();
      reset();
      onCancel && onCancel(modeKey);

    } catch (errInfo) {
      console.log('Validate Failed:', errInfo);
    }

  }

  const cancel = () => {
    reset();
    onCancel && onCancel();
  }

  const reset = () => {
    form.resetFields();
    setModeKey('');
  }

  const footer = [ 
    <Button
      key="0" 
      onClick={cancel}
    >
    取消
    </Button>,
    <Button
      key="1" 
      type="primary"
      onClick={onOk}
    >
    确定
    </Button>,
  ];

  return (
    <Modal 
      forceRender
      visible={visible}
      title='模型导出'
      width={540}
      onCancel={cancel}
      footer={footer}
    >
      <Form form={form}>
        <Form.Item 
          name='mode'
          label='导出方式'
          rules={[
            {
              required: true,
              message: '请选择导出方式',
            },
          ]}
        >
          <Radio.Group onChange={onModeChange} value={modeKey}>
          {
            exportModes.map((item, index) => {

              return (
                <Radio 
                  value={item.key}
                  key={index} 
                >
                  {item.name}
                </Radio>
              );
            })
          }
          </Radio.Group>
        </Form.Item>
      </Form>
    </Modal>
  )
}

export default ExportOtherModal;