import React, { useState, useEffect } from 'react';
import { Checkbox, Empty } from 'antd';
import styles from './checkBox.less';
const CheckList = props => {
  const { info = {}, valueCallback = () => {}, nodeType = '', addList } = props;
  const [list, setList] = useState([]);
  const [addRoleList, setAddRoleList] = useState([]);
  useEffect(() => {
    if (info.pageUrl) {
      let arr = [...info.relatedRoleList];
      let arr2 = [];
      arr.map(item => {
        if (item.related) {
          arr2.push(item.relatedRoleCode);
        }
      });
      valueCallback(arr);
      setList(arr);
    }
  }, [info]);
  useEffect(() => {
    if (addList && addList.length > 0) {
      setAddRoleList([...addList]);
    }
  }, [addList]);
  const handleSelect = (e, val) => {
    list.forEach(item => {
      if (item.relatedRoleCode === val) {
        item.related = e.target.checked;
      }
    });
    setList([...list]);
    valueCallback(list);
  };
  const handleRoleSelect = (e, val) => {
    addRoleList.forEach(item => {
      if (item.roleCode === val) {
        item.related = e.target.checked;
      }
    });
    setAddRoleList([...addRoleList]);
    valueCallback(addRoleList);
  };
  return (
    <div>
      {nodeType === 3 || nodeType === 4 ? (
        <>
          <div className={styles.boxtitle}>
            <span className={styles.boxspan}>关联角色</span>
          </div>
          <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 className={styles.box}>
          {addRoleList &&
            addRoleList.length > 0 &&
            addRoleList.map(item => (
              <div key={item.roleCode} className={styles.check}>
                <Checkbox
                  checked={item.related}
                  onChange={e => {
                    handleRoleSelect(e, item.roleCode);
                  }}
                >
                  {item.roleName}
                </Checkbox>
              </div>
            ))}
        </div>
      } */}
    </div>
  );
};

export default CheckList;
