/* eslint-disable no-unused-expressions */
/* eslint-disable import/order */
import React, { useState, useEffect } from 'react';
import { Checkbox } from 'antd';
import classnames from 'classnames';
import styles from './itemCard.less';
import { checkChildrenByCondition, checkIsGroup, getId } from '.';
import { FolderFilled, FileOutlined } from '@ant-design/icons';

const ListCardItem = props => {
  const { searchWord, item, valueList, updateValueList, ouid, changedItem, flag, roleID } = props;

  // id
  const id = getId(item);
  // 是否是地图组件
  const isMapWedgt = item.type === 'widgetUIPage';

  // 当前组件是否是分组id
  const isGroup = checkIsGroup(item);
  const [indeterminate, setIndeterminate] = useState(isGroup);
  const [childrenKeys, setChildrenKeys] = useState([]); // 本次循环item的全部子元素id
  const [flag1, setFlag1] = useState(); // 首次进入刷新回显

  useEffect(() => {
    setFlag1(roleID);
    // 子节点勾选状态变化时
    if (isGroup) {
      const keys = item.children
        .map(child => checkChildrenByCondition(child, c => getId(c), true, 'map'))
        .flat(Infinity);
      setChildrenKeys(keys);
    }
    // 父复选框
    if (localStorage.getItem('aa') == 1) {
      // 菜单组当前项，完整一次循环当前项不变
      if (isGroup) {
        if (childrenKeys.every(c => valueList.includes(c))) {
          // 全选
          updateValueList([id], [id], { item, value: true });
          setIndeterminate(false);
        } else if (childrenKeys.some(c => valueList.includes(c))) {
          // 半选
          valueList.includes(id) && updateValueList([], [id], { item, value: true });
          setIndeterminate(true);
        } else {
          // 零选
          valueList.includes(id) && updateValueList([], [id], { item, value: true });
          setIndeterminate(false);
        }
      }
    } else if (localStorage.getItem('aa') == 0) {
      // eslint-disable-next-line no-lonely-if
      if (
        isGroup &&
        // changedItem.item !== item &&
        // !checkIsGroup(changedItem.item) &&
        childrenKeys.includes(getId(changedItem.item)) // 判断本次item是否是改变的本次的子选项用来父级回显,全选时要取消这一限制条件
      ) {
        if (childrenKeys.every(c => valueList.includes(c))) {
          // 全选
          updateValueList([id], [id], { item, value: true });
          setIndeterminate(false);
        } else if (childrenKeys.some(c => valueList.includes(c))) {
          // 半选
          valueList.includes(id) && updateValueList([], [id], { item, value: false });
          setIndeterminate(true);
        } else {
          // 零选
          valueList.includes(id) && updateValueList([], [id], { item, value: false });
          setIndeterminate(false);
        }
      }
    }
  }, [changedItem.item, changedItem.value]);

  useEffect(() => {
    // 子节点勾选状态变化时
    if (isGroup) {
      const keys = item.children
        .map(child => checkChildrenByCondition(child, c => getId(c), true, 'map'))
        .flat(Infinity);
      setChildrenKeys(keys);
    }
    if (isGroup) {
      if (childrenKeys.every(c => valueList.includes(c))) {
        // 全选
        updateValueList([id], [id], { item, value: true });
        setIndeterminate(false);
      } else if (childrenKeys.some(c => valueList.includes(c))) {
        // 半选
        valueList.includes(id) && updateValueList([], [id], { item, value: false });
        setIndeterminate(true);
      } else {
        // 零选
        valueList.includes(id) && updateValueList([], [id], { item, value: false });
        setIndeterminate(false);
      }
    }
  }, [flag, flag1]); // 最外层全选刷新，首次进入刷新标识，点击父复选框

  // 勾选事件处理
  const handleChecked = e => {
    const { checked: v } = e.target;
    console.log(e);
    console.log(v);
    if (isGroup) {
      let aa = item.children.find(i => i.type == 'widgetGroup');
      if (aa) {
        localStorage.setItem('aa', 1);
      } else {
        localStorage.setItem('aa', 0);
      }
      const result = [...childrenKeys, id];
      updateValueList(v ? result : [], result, { item, value: v });
      setIndeterminate(false);
    } else {
      updateValueList(v ? [id] : [], [id], { item, value: v });
      localStorage.setItem('aa', 0);
    }
  };

  const renderChild = () =>
    item.children &&
    item.children.map((c, i) => (
      <ListCardItem
        item={c}
        key={`item${i}key`}
        updateValueList={updateValueList}
        valueList={valueList}
        ouid={ouid}
        roleID={roleID}
        changedItem={changedItem}
        searchWord={searchWord}
        flag={flag}
      />
    ));
  // 通过把isChecked为true的id存在valueList集合里面，递归数据当id是否被包含在valueList中时返回值来渲染true或false
  return (
    <>
      <div
        className={classnames({
          [styles.divBox]: isGroup,
          [styles.divSingle]: !isGroup,
        })}
      >
        <div className={styles.topCheckbox}>
          <Checkbox
            indeterminate={isGroup ? indeterminate : false}
            checked={valueList.includes(id)}
            onChange={handleChecked}
          >
            {isMapWedgt ? (
              <div
                style={{ display: 'inline-block' }}
                ref={r => {
                  if (r) r.innerHTML = item.text;
                }}
              />
            ) : (
              <span
                className={classnames({
                  [styles.boldLabel]: isGroup,
                  [styles.isSearch]: searchWord && item.text.includes(searchWord),
                })}
              >
                {isGroup ? (
                  <>
                    <FolderFilled
                      style={{ color: '#1890ff', verticalAlign: 'middle', marginTop: '0px' }}
                    />
                    <span style={{ marginLeft: '5px' }}>{item.text}</span>
                  </>
                ) : (
                  <>
                    <FileOutlined
                      style={{ color: '#1890ff', verticalAlign: 'middle', marginTop: '0px' }}
                    />
                    <span style={{ marginLeft: '5px' }}>{item.text}</span>
                  </>
                )}
              </span>
            )}
          </Checkbox>
        </div>
        <div style={{ width: '100%' }} className={styles.checkdiv}>
          {renderChild()}
        </div>
      </div>
    </>
  );
};

export default ListCardItem;
