import React, { useState, useEffect, useRef, useLayoutEffect } from 'react';
import { Checkbox, Row, Col } from 'antd';
import styles from './ListCardItem.less';

const CheckGroup = Checkbox.Group;

const ListCardItem = props => {
  const {
    getValueCallback,
    itemid,
    userList,
    OUName,
    searchWord,
    multiRoleList,
    multistationList,
    mult,
  } = props;
  const [indeterminate, setIndeterminate] = useState(false);
  const [allChecked, setAllChecked] = useState(false); // 全选状态
  const [checkList, setCheckList] = useState([]); // 复选框列表选中的值
  const [defaultList, setDefaultList] = useState([]); // 默认的选项
  const [submitArr, setSubmitArr] = useState([]); // 提交的数组
  const authority = JSON.parse(localStorage.getItem('panda-oms-authority'));

  // const submitArr = [];

  useEffect(() => {
    let arr = [];
    userList.map((item, index) => {
      let obj = { ...item };
      obj.label = (
        <span
          className={
            searchWord && obj.userName.includes(searchWord)
              ? styles.isSearch
              : ''
          }
        >
          {obj.userName || obj.roleName || obj.stationName}
        </span>
      );
      obj.value = obj.userID || obj.roleID || obj.stationID;
      arr.push(obj);
    });
    setDefaultList(arr);
  }, [searchWord]);

  useEffect(() => {
    if (mult == 'Yes') {
      console.log(multiRoleList);
      console.log(multistationList);
      let arr2 = [];
      if (multiRoleList != undefined) {
        multiRoleList.map((item, index) => {
          arr2.push(item);
        });
      }
      if (multistationList != undefined) {
        multistationList.map((item1, index) => {
          arr2.push(item1);
        });
      }
      console.log(arr2);
      console.log(userList);
      console.log(itemid);

      // 勾选展示
      let flag = 0;
      let aa = [];
      userList.map((item, index) => {
        if (item.roleID != undefined) {
          if (arr2.indexOf(item.roleID) != -1) {
            flag += 1;
            aa.push(item.roleID);
          }
        }
        if (item.stationID != undefined) {
          if (arr2.indexOf(item.stationID) != -1) {
            flag += 1;
            aa.push(item.stationID);
          }
        }
      });
      console.log(aa);
      console.log(userList.length);
      console.log(flag);
      if (flag == userList.length) {
        setIndeterminate(false);
        setAllChecked(true);
      }
      if (flag < userList.length && flag > 0) {
        setIndeterminate(true);
        setAllChecked(false);
      }
      if (flag == 0) {
        setIndeterminate(false);
        setAllChecked(false);
      }
      // eslint-disable-next-line no-unused-expressions
      getValueCallback && getValueCallback(aa, itemid);
      setCheckList(arr2);
    } else {
      let arr2 = [];
      userList.map((item, index) => {
        if (item.isChecked) {
          arr2.push(item.userID || item.roleID || item.stationID);
        }
      });
      // eslint-disable-next-line no-unused-expressions
      getValueCallback && getValueCallback(arr2, itemid);
      const all = userList.every(u => u.isChecked);
      setIndeterminate(!all && userList.some(u => u.isChecked));
      setAllChecked(all);
      setCheckList(arr2);
    }
  }, [userList]);

  const handleAllChecked = e => {
    const { checked } = e.target;
    setAllChecked(checked);
    let arr = [];
    if (checked) {
      arr = defaultList.map(item => item.value);
    }
    setIndeterminate(false);
    setCheckList(arr);
    // eslint-disable-next-line no-unused-expressions
    getValueCallback && getValueCallback(arr, itemid);
  };

  const handleChecked = e => {
    setCheckList(e);
    setAllChecked(e.length === defaultList.length);
    setIndeterminate(!!e.length && e.length < defaultList.length);
    getValueCallback(e, itemid);
  };
  if (defaultList.length === 0) {
    return null;
  }
  return (
    <div
      style={{
        display:
          OUName === '运维管理' && authority[1] !== 'super' ? 'none' : 'block',
      }}
    >
      <div className={`${styles.divBox}`}>
        <div className={styles.topCheckbox}>
          <Checkbox
            indeterminate={indeterminate}
            checked={allChecked}
            onChange={e => {
              handleAllChecked(e);
            }}
          >
            {OUName}
          </Checkbox>
        </div>
        <div style={{ width: '100%' }} className={styles.checkdiv}>
          {defaultList && defaultList.length > 0 && (
            <CheckGroup
              className={styles.check}
              onChange={e => {
                handleChecked(e);
              }}
              value={checkList}
              options={defaultList}
            />
          )}
        </div>
      </div>
    </div>
  );
};

export default ListCardItem;
