import React, { useState, useEffect } from 'react';
import { Spin, Checkbox, Button, Empty } from 'antd';
import _ from 'lodash';
import ListCardItem from './ItemCard';
import styles from './ItemCard.less';

const tip = 'loading...';

export const getId = item =>
  item.userID || item.roleID || item.stationID || item.id;
export const checkIsGroup = node =>
  ['widgetGroup'].includes(node?.type || node) && node.children?.length > 0;

// 递归遍历节点的方法
export const checkChildrenByCondition = (
  item,
  fn,
  withGroup = true,
  method = 'every',
) => {
  if (!checkIsGroup(item)) {
    return fn(item);
  }
  const childrenResults = item.children[method](t =>
    checkChildrenByCondition(t, fn, withGroup, method),
  );
  return withGroup ? [fn(item), ...childrenResults] : [...childrenResults];
};

const ListCard = props => {
  console.log(props, 'props');
  const {
    ouid,
    searchWord,
    onCommit = () => {},
    dataList,
    onChange,
    checkList,
    btnLoading = false,
    loading,
  } = props;
  const [valueList, setValueList] = useState([]);
  const [changedItem, setChangedItem] = useState({ item: {} });

  useEffect(() => {
    setValueList(checkList);
  }, [dataList, loading, checkList]);

  const updateValueList = (checkedKeys, childrenKeys, sourceItem) => {
    // eslint-disable-next-line no-console
    // console.time('updateValueList:');
    const removekeys = _.difference(childrenKeys, checkedKeys);
    let result = _.uniq(_.union(checkedKeys, valueList));
    _.remove(result, v => removekeys.includes(v));
    setValueList(result);
    if (sourceItem) setChangedItem(sourceItem);
    // eslint-disable-next-line no-unused-expressions
    onChange && onChange(result);
    // eslint-disable-next-line no-console
    // console.timeEnd('updateValueList:');
  };

  const checkAll = e => {
    if (e.target.checked) {
      const result = dataList.map(item => getAllID(item)).flat(Infinity);
      setValueList(result);
      // eslint-disable-next-line no-unused-expressions
      onChange && onChange(result);
    } else {
      setValueList([]);
      // eslint-disable-next-line no-unused-expressions
      onChange && onChange([]);
    }
  };

  const getAllID = item => {
    let result = [];
    const haveChildren =
      Array.isArray(item.children) && item.children.length > 0;
    // 统一使用 getId
    result.push(getId(item));
    if (haveChildren) {
      // 每次递归result被置空,所以要另外保存
      result = [...item.children.map(i => getAllID(i)), ...result];
    }
    return result;
  };

  return (
    <div>
      {loading ? (
        <Spin
          size="large"
          spinning={loading}
          tip={tip}
          style={{
            position: 'absolute',
            top: '30%',
            left: '0',
            right: '0',
            bottom: '0',
          }}
        />
      ) : (
        <>
          <Checkbox onChange={checkAll}>全选/全不选</Checkbox>
          {dataList && dataList.length > 0 ? (
            dataList
              .filter(d => d.type === 'widgetGroup' || 'widget')
              .map((item, index) => (
                <ListCardItem
                  item={item}
                  ouid={ouid}
                  changedItem={changedItem}
                  updateValueList={updateValueList}
                  valueList={valueList}
                  key={`item${index}key`}
                  searchWord={searchWord}
                  {...props}
                />
              ))
          ) : (
            <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
          )}
        </>
      )}
      {true && !loading && dataList && dataList.length > 0 && (
        <div className={styles.btnBox}>
          <Button
            type="primary"
            onClick={() => onCommit(valueList.filter(Boolean))}
            loading={btnLoading}
          >
            提交
          </Button>
        </div>
      )}
    </div>
  );
};

export default ListCard;