/* 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 } = 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([]);

  useEffect(() => {
    console.log(valueList);
    console.log(changedItem); // 改变项
    console.log(item); // 本次进循环的项
    // console.log(childrenKeys); // 本次循环item的全部子元素id
    // 子节点勾选状态变化时
    if (isGroup) {
      const keys = item.children
        .map(child => checkChildrenByCondition(child, c => getId(c), true, 'map'))
        .flat(Infinity);
      setChildrenKeys(keys);
    }
    if (
      isGroup
      // changedItem.item !== item &&
      // !checkIsGroup(changedItem.item) &&
      // childrenKeys.includes(getId(changedItem.item))
    ) {
      // console.log(childrenKeys.every(c => valueList.includes(c)));
      console.log(item);
      console.log(childrenKeys);
      if (childrenKeys.every(c => valueList.includes(c))) {
        // 全选
        console.log(2121);
        updateValueList([id], [id], { item, value: true });
        console.log(valueList);
        setIndeterminate(false);
      } else if (childrenKeys.some(c => valueList.includes(c))) {
        console.log(211231);
        console.log(valueList);
        console.log(id);
        // 半选
        // eslint-disable-next-line no-unused-expressions
        valueList.includes(id) && updateValueList([], [id], { item, value: false });
        setIndeterminate(true);
      } else {
        // 零选
        console.log(232323);
        console.log(valueList);
        console.log(id);
        // eslint-disable-next-line no-unused-expressions
        valueList.includes(id) && updateValueList([], [id], { item, value: false });
        setIndeterminate(false);
      }
    }
  }, [changedItem.item, changedItem.value, flag]);

  // 勾选事件处理
  const handleChecked = e => {
    const { checked: v } = e.target;
    if (isGroup) {
      const result = [...childrenKeys, id];
      updateValueList(v ? result : [], result, { item, value: v });
      setIndeterminate(false);
    } else {
      // console.log(item);
      // console.log(v);
      updateValueList(v ? [id] : [], [id], { item, value: v });
    }
  };

  const renderChild = () =>
    item.children &&
    item.children.map((c, i) => (
      <ListCardItem
        item={c}
        key={`item${i}key`}
        updateValueList={updateValueList}
        valueList={valueList}
        ouid={ouid}
        changedItem={changedItem}
        searchWord={searchWord}
        flag={flag}
      />
    ));
  // 通过把isChecked为true的id存在valueList集合里面，递归数据当id是否被包含在valueList中时返回值来渲染true或false
  return (
    <>
      {/* {console.log(valueList, 'valueList')} */}
      <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' }} />
                    <span style={{ marginLeft: '5px' }}>{item.text}</span>
                  </>
                ) : (
                  <>
                    <FileOutlined style={{ color: '#1890ff' }} />
                    <span style={{ marginLeft: '5px' }}>{item.text}</span>
                  </>
                )}
              </span>
            )}
          </Checkbox>
        </div>
        <div style={{ width: '100%' }} className={styles.checkdiv}>
          {renderChild()}
        </div>
      </div>
    </>
  );
};

export default ListCardItem;
