import React, { Fragment } from 'react';
import { Radio, Form } from '@easyv/antd';
import UploadCsvFile from './UploadCsvFile';
import styles from './style.less';

const FormItem = Form.Item;

interface IProps {
  value: { filePath?: string };
  setFieldsValue: Function;
}

export default function CsvForm({ value = {}, setFieldsValue }: IProps) {
  const handleFileChange = (file) => {
    setFieldsValue({ filePath: file });
  };

  return (
    <Fragment>
      <FormItem className={styles.radioWrapper} label="编码格式" name="encode" rules={[{ required: true, message: '请选择编码格式' }]}>
        <Radio.Group>
          <Radio value={'auto'}>自动检测</Radio>
          <Radio value={'utf8'}>UTF-8</Radio>
          <Radio value={'gbk'}>GBK</Radio>
        </Radio.Group>
      </FormItem>
      <FormItem label="上传文件" name="filePath" rules={[{ required: true, message: '请上传csv文件!' }]}>
        <UploadCsvFile path={value.filePath} onChange={handleFileChange} />
      </FormItem>
    </Fragment>
  );
}
