import React, { useState, useEffect } from 'react';
import { Checkbox, Empty } from 'antd';
import styles from './checkBox.less';
const CheckList = props => {
  const { info, valueCallback, nodeType } = props;
  const [list, setList] = useState([]);
  const [flag, setFlag] = useState(false);
  console.log(info, 'info');
  useEffect(() => {
    if (info.pageUrl) {
      let arr = [...info.relatedRoleList];
      let arr2 = [];
      arr.map(item => {
        if (item.related) {
          arr2.push(item.relatedRoleCode);
        }
      });
      setList(arr);
      setFlag(true);
    }
    return () => {
      setFlag(false);
    };
  }, [info]);

  const handleSelect = (e, val) => {
    let arr = [];
    list.forEach(item => {
      if (item.relatedRoleCode === val) {
        item.related = e.target.checked;
      }
    });
    setList([...list]);
    valueCallback(list);
  };
  return (
    <div>
      {nodeType === 1 ? (
        <div className={styles.box}>
          {/* <Checkbox>全选/反选</Checkbox> */}

          {list &&
            list.length > 0 &&
            list.map(item => (
              <div
                key={item.relatedRoleCode}
                className={styles.check}
                title={item.relatedRoleName}
              >
                <Checkbox
                  checked={item.related}
                  onChange={e => {
                    handleSelect(e, item.relatedRoleCode);
                  }}
                >
                  {item.relatedRoleName}
                </Checkbox>
              </div>
            ))}
        </div>
      ) : (
        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
      )}
    </div>
  );
};

export default CheckList;