import React from 'react';
import { Modal, Form, Input, Checkbox } from 'antd';
import styles from '../index.less';

const { Item } = Form;

const BlacklistModal = ({ visible, onClose, onSave, list }) => {
  const [form] = Form.useForm();

  const handleSave = () => {
    form.validateFields().then(values => {
      onSave(values);
    });
  };

  return (
    <Modal visible={visible} title="设置员工黑名单" onCancel={onClose} onOk={handleSave}>
      <Form form={form} layout="vertical">
        <Item name="employeeId" label="您确定要把员工ID:">
          {list.length && list.map(item => <span>{item},</span>)}
        </Item>
        <Item name="reason" label="加入黑名单吗？">
          <div className={styles.blackList}>
            <Checkbox disabled></Checkbox>
            <div className={styles.left}>
              <span>请确定要回收员工账户内的剩余余额&餐券吗？ </span>
              <br />
              <span>(勾选则回收，不勾选则不回收。)</span>
            </div>
          </div>
        </Item>
      </Form>
    </Modal>
  );
};

export default BlacklistModal;
