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('|') : [];
      console.log(hasCheckList, 'hasCheckList');
      RoleGroupList().then(res => {
        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);
              });
            }
          });

          let list = roleListData.map(item => {
            let checkedList = []; // 已选
            let options = []; // 数据源
            let indeterminate = false; // 有选中但没全选样式
            let checkAll = false; // 全选样式
            options = item.roleList.map(val => {
              let value = JSON.stringify({ value: Number(val.roleID), label: val.roleName });
              hasCheckList.forEach(ele => {
                if (value === ele) {
                  checkedList.push(ele);
                }
              });
              return value;
            });
            // console.log(options, 'options');
            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) => (
            <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}>
                      {JSON.parse(val).label}
                    </Checkbox>
                  ))}
                </CheckboxGroup>
              </div>
            </div>
          ))}
        </div>
      </Modal>
    </div>
  );
};

export default RoleModal;