import React, { useState } from 'react';
import { Modal, Input, message, Button, Row } from 'antd';
import { subJsonService } from './service';

export default function JsonImport({ refresh }) {
  const [visible, setvisible] = useState(false);
  const [loading, setLoading] = useState(false);
  const [areaChange, setAreaChange] = useState('');

  const { TextArea } = Input;

  const onExportPower2JsonModalCancel = () => {
    setAreaChange('');
    setvisible(false);
  };

  const submitJson = () => {
    setLoading(true);
    const param = JSON.parse(areaChange);
    subJsonService(param).then(res => {
      if (res?.code === 0) {
        message.success('导入成功');
        refresh();
      }
      setLoading(false);
      onExportPower2JsonModalCancel();
    });
  };
  const textOnChange = e => {
    setAreaChange(e.target.value);
  };
  return (
    <div style={{ display: 'inline-block' }}>
      <Modal
        title="导入"
        maskClosable={false}
        destroyOnClose
        visible={visible}
        width={700}
        footer={[
          <Button key="back" onClick={onExportPower2JsonModalCancel}>
            关闭
          </Button>,
          <Button type="primary" key="submmit" onClick={submitJson} loading={loading}>
            确定
          </Button>,
        ]}
        onCancel={onExportPower2JsonModalCancel}
      >
        <Row gutter={12}>
          <TextArea
            placeholder="需要导出的数据结构"
            rows={15}
            value={areaChange}
            onChange={(e, record) => {
              textOnChange(e, record);
            }}
          />
        </Row>
      </Modal>
      <div
        onClick={() => {
          setvisible(true);
        }}
      >
        <Button type="primary" style={{ marginLeft: 10 }}>
          导入
        </Button>
      </div>
    </div>
  );
}