import { Modal } from 'antd';
import { useState } from 'react';
import ReactJsonViewCompare from 'react-json-view-compare';
import { FormattedMessage } from 'umi';

const ShowDiffJson = ({ Old = {}, New = {} }) => {
  const [open, setOpen] = useState(false);
  return (
    <>
      <Modal
        title={<FormattedMessage id="pages.log.view" defaultMessage="查看" />}
        open={open}
        width={800}
        onCancel={() => setOpen(false)}
        footer={null}
        bodyStyle={{ padding: 0 }}
      >
        <div style={{ maxHeight: 400, overflow: 'auto' }}>
          <ReactJsonViewCompare oldData={Old || {}} newData={New || {}} />
        </div>
      </Modal>
      <a
        onClick={() => {
          setOpen(true);
        }}
      >
        <FormattedMessage id="pages.log.view" defaultMessage="查看" />
      </a>
    </>
  );
};

export default ShowDiffJson;