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);
  useEffect(() => {
    if (info.pageUrl) {
      let arr = [...info.relatedRoleList];
      let arr2 = [];
      arr.map(item => {
        if (item.related) {
          arr2.push(item.relatedRoleCode);
        }
      });
      valueCallback(arr);
      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.boxtitle}>
            <span className={styles.boxspan}>关联角色</span>
          </div>
          <div className={styles.box}>
            {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;
