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

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

  useEffect(() => {
    if (visible) {
      let hasCheckList = selectValue ? selectValue.split(',') : [];
      RoleGroupList().then(res => {
        if (res.code === 0) {
          let roleListData = JSON.parse(JSON.stringify(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);
          //     });
          //   }
          // });
          // 假设 roleListData 是您的原始数组
          let newRoleListData = []; // 创建新数组来存放最终的结果

          roleListData.forEach((item) => {
            newRoleListData.push(item); // 将当前父元素添加到新数组中
            if (item.child && item.child.length > 0) {
              item.child.forEach((val) => {
                val.visibleTitle = `${item.visibleTitle}(${val.visibleTitle})`;
                newRoleListData.push(val); // 将子元素添加到新数组中，紧跟在父元素之后
              });
            }
          });

          // 此时 newRoleListData 就是按照您要求的顺序排列的数组

          roleListData = newRoleListData;
          
          console.log(roleListData, 'roleListData');
          let list = roleListData.map(item => {
            let checkedList = []; // 已选
            let options = []; // 数据源
            let indeterminate = false; // 有选中但没全选样式
            let checkAll = false; // 全选样式
            options = item.roleList.map(val => {
              hasCheckList.forEach(ele => {
                if (val.roleName === ele) {
                  checkedList.push(ele);
                }
              });
              return val.roleName;
            });
            if (checkedList.length === options.length && checkedList.length > 0) {
              checkAll = true;
            }
            if (checkedList.length < options.length && checkedList.length > 0) {
              indeterminate = true;
            }
            return {
              options,
              checkedList,
              checkAll,
              indeterminate,
              visibleTitle: item.visibleTitle,
            };
          });
          console.log(list, 'list');
          setRoleList(list);
        }
      });
      console.log(selectValue, 'selectValue');
    }
  }, [visible]);
  // 多选change事件
  const onCheckAllChange = (e, index) => {
    let newCheckList = JSON.parse(JSON.stringify(roleList));
    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));
    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
      >
        <div className={styles.checkContainer}>
          {roleList.map((item, index) => (
            item.options.length ? <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> : null
          ))}
        </div>
      </Modal>
    </div>
  );
};

export default RoleModal;
