import { Checkbox, Modal, message, Space, Divider } from 'antd';
import { useEffect, useMemo, useRef, useState } from 'react';
import dayjs from 'dayjs';

const CompareModal = ({ list, open, onOk, onCancel }) => {
  const [values, setValues] = useState([]);
  useEffect(() => {
    if (!open) setValues([]);
  }, [open]);
  return (
    <Modal
      title="比对"
      open={open}
      onCancel={onCancel}
      onOk={() => onOk(values)}
      destroyOnClose
    >
      <Divider />
      <Checkbox.Group
        value={values}
        onChange={(values) => {
          if (values.length > 2) {
            message.error('只能选择两个版本比对');
            return;
          }
          setValues(values);
        }}
      >
        <Space direction="vertical">
          {list?.map((item) => {
            return (
              <Checkbox value={item.id}>
                {dayjs(item.day).format('YYYY-MM')}
              </Checkbox>
            );
          })}
        </Space>
      </Checkbox.Group>
    </Modal>
  );
};
export default CompareModal;
