import React, { useEffect, useState } from 'react';
import { Modal, Checkbox, Spin } from 'antd';
import { RoleGroupList } from '@/services/messagemanage/messagemanage';
import { GetUserRelationListNew } from '@/services/userManage/api';
import styles from './RoleModal.less';
const CheckboxGroup = Checkbox.Group;

const RoleModal = porps => {
  const { visible, rolCallBack, onCancel, selectValue } = porps;
  const [roleList, setRoleList] = useState([]); // 角色列表
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    if (visible) {
      setIsLoading(true);
      let hasCheckList = selectValue ? selectValue.split(',') : [];
      GetUserRelationListNew({ userID: 9999999 }).then(res => {
        setIsLoading(false);
        if (res.code === 0) {
          let roleListData = res.data.roleList;
          // 给子角色分类放到外面来
          roleListData.forEach((item, index) => {
            if (item.child.length > 0) {
              item.child.forEach((val, i) => {
                val.visibleTitle = `${item.visibleTitle}(${val.visibleTitle})`;
                roleListData.splice(index + 1 + i, 0, val);
              });
            }
          });
          console.log(roleListData, 'roleListData');
          let list = roleListData.map(item => {
            let checkedList = []; // 已选
            let options = []; // 数据源
            let indeterminate = false; // 有选中但没全选样式
            let checkAll = false; // 全选样式
            let arr = {};
            let name = {};
            let last = {};
            options = item.roleList.map(val => {
              hasCheckList.forEach(ele => {
                if (val.roleID === ele) {
                  checkedList.push(val.roleName);
                }
              });
              return val.roleName;
            });

            name = item.roleList.map(val => {
              hasCheckList.forEach(ele => {
                if (val.roleID === ele) {
                  last[val.roleID] = val.roleName;
                }
              });
              arr[val.roleID] = val.roleName;
              return arr;
            });
            if (checkedList.length === options.length && checkedList.length > 0) {
              checkAll = true;
            }
            if (checkedList.length < options.length && checkedList.length > 0) {
              indeterminate = true;
            }
            return {
              options,
              checkedList,
              checkAll,
              name,
              last,
              arr,
              indeterminate,
              visibleTitle: item.visibleTitle,
            };
          });
          console.log(list, 'list');
          setRoleList(list);
        }
      });
      console.log(selectValue, 'selectValue');
    } else {
      setRoleList([]);
    }
  }, [visible]);
  // 多选change事件
  const onCheckAllChange = (e, index) => {
    let newCheckList = JSON.parse(JSON.stringify(roleList));
    let aa = {};
    if (e.target.checked) {
      newCheckList[index].options.map(j => {
        Object.keys(newCheckList[index].arr).forEach(i => {
          if (newCheckList[index].arr[i] == j) {
            aa[i] = j;
          }
        });
      });
      newCheckList[index].last = aa;
    } else {
      newCheckList[index].last = {};
    }
    newCheckList[index].checkedList = e.target.checked ? newCheckList[index].options : [];
    newCheckList[index].indeterminate = false;
    newCheckList[index].checkAll = e.target.checked;
    setRoleList(newCheckList);
  };
  // 单选change事件
  const onChange = (list, index) => {
    let newCheckList = JSON.parse(JSON.stringify(roleList));
    let aa = {};
    list.map(j => {
      Object.keys(newCheckList[index].arr).forEach(i => {
        if (newCheckList[index].arr[i] == j) {
          aa[i] = j;
        }
      });
    });
    newCheckList[index].last = aa;
    newCheckList[index].checkedList = list;
    newCheckList[index].indeterminate =
      !!list.length && list.length < newCheckList[index].options.length;
    newCheckList[index].checkAll = list.length === newCheckList[index].options.length;
    setRoleList(newCheckList);
  };
  return (
    <div>
      <Modal
        title="关联角色"
        visible={visible}
        onOk={() => rolCallBack(roleList)}
        width="900px"
        onCancel={onCancel}
        maskClosable={false}
        destroyOnClose
        centered
      >
        <Spin spinning={isLoading}>
          <div className={styles.checkContainer}>
            {roleList.map((item, index) => (
              <div className={styles.checkContent} key={item.visibleTitle}>
                <div className={styles.topCheckbox}>
                  <Checkbox
                    indeterminate={item.indeterminate}
                    onChange={e => onCheckAllChange(e, index)}
                    checked={item.checkAll}
                  >
                    {item.visibleTitle}
                  </Checkbox>
                </div>
                <div className={styles.bottomCheckbox}>
                  <CheckboxGroup
                    value={item.checkedList}
                    onChange={list => onChange(list, index)}
                    style={{ display: 'flex', flexWrap: 'wrap' }}
                  >
                    {item.options.map(val => (
                      <Checkbox key={val} value={val}>
                        {val}
                      </Checkbox>
                    ))}
                  </CheckboxGroup>
                </div>
              </div>
            ))}
          </div>
        </Spin>
      </Modal>
    </div>
  );
};

export default RoleModal;