import React, { useState, useEffect, useCallback, useRef } from 'react';
import { Modal, Input, Button, message, Spin, Pagination, Table, Tooltip, Space } from 'antd';
import { GetGroupUserTree } from '@/services/messagemanage/messagemanage';
import { getStationUsers, chooseUserToStation } from '@/services/siteManage/api';
import { DeleteOutlined } from '@ant-design/icons';
import styles from './SelectUser.less';
import CardCheck from './CardCheck';

const NewSelectUser = props => {
  const { confirmModal, onCancel, visible, itemObj } = props;
  const [allList, setAllist] = useState([]); // 用于展示得数据
  const [checkList, setCheckList] = useState([]); // 选中得数据集合
  const [loading, setLoading] = useState(false);
  const [total, setTotal] = useState();
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [searchName, setSearchName] = useState();
  const [deleKey, setDeleKey] = useState(); // 删除用户的key值
  const [delFlag, setDelFlag] = useState(0); // 删除标识每次删除后加一
  useEffect(() => {
    console.log(itemObj);
    console.log(visible);
    setCheckList([]);
    setSearchName('');
    setCurrentPage(1);
    getInitialData();
    // getData(searchName, 1, pageSize);
  }, [itemObj]);
  // 选中后得回调函数
  const checkCallBack = useCallback(newCheckList => {
    if (newCheckList) {
      setCheckList(newCheckList);
    }
  });

  // 监听分页
  const paginationChange = (page, pageSizes) => {
    setCurrentPage(page);
    setPageSize(pageSizes);
    getData(searchName, page, pageSizes);
  };
  // 获取初始数据
  const getInitialData = () => {
    console.log(itemObj);
    let p1 = getStationUsers({ stationId: itemObj.roleID });
    let p2 = GetGroupUserTree({
      key: '',
      pageSize: 10,
      PageIndex: 1,
    });
    setLoading(true);
    Promise.all([p1, p2]).then(res => {
      setLoading(false);
      if (res[0].code === 0 && res[1].code === 0) {
        setTotal(res[1].data.count);
        let listCheck = res[0].data.map(item => ({
          label: item.userName,
          value: item.userID,
          groupName: item.OUName,
        }));

        setCheckList(listCheck);
        // 数据处理成checkbox组件需要得形式
        let list = res[1].data.data.map(item => {
          let indeterminate = false;
          let checkedList = [];
          let checkAll = false;
          let options = item.users.map(val => {
            listCheck.forEach(ele => {
              if (val.userId === ele.value) {
                checkedList.push(ele.value);
              }
            });
            return {
              label: val.userName,
              value: val.userId,
              groupName: item.groupName,
              level: item.level,
            };
          });
          if (checkedList.length === options.length && checkedList.length > 0) {
            checkAll = true;
          }
          if (checkedList.length < options.length && checkedList.length > 0) {
            indeterminate = true;
          }
          return {
            groupName: item.groupName,
            level: item.level,
            groupId: item.groupId,
            indeterminate,
            checkAll,
            checkedList,
            plainOptions: options,
          };
        });
        setAllist(list);
      } else if (res[0].code !== 0) {
        message.error(res[0].msg);
      } else {
        message.error(res[1].msg);
      }
    });
  };
  // 提交勾选人员
  const onFinish = () => {
    chooseUserToStation({
      userList: String(checkList.map(item => item.value)),
      stationID: itemObj.roleID,
    })
      .then(res => {
        if (res.code === 0) {
          // confirmModal();
          message.success('关联成功');
        } else {
          message.error(res.msg);
        }
      })
      .catch(() => {
        message.error('网络异常，请稍后再试');
      });
  };
  // 搜索
  const onSearch = () => {
    setCurrentPage(1);
    getData(searchName, 1, pageSize);
  };
  // 重置
  const onReset = () => {
    setCurrentPage(1);
    getData('', 1, pageSize);
    setSearchName('');
  };
  // 搜索框监听
  const searchChange = e => {
    setSearchName(e.target.value);
  };
  // 获取数据
  const getData = (username, page, pageSizes) => {
    setLoading(true);
    GetGroupUserTree({
      key: username,
      pageSize: pageSizes,
      PageIndex: page,
    })
      .then(res => {
        setLoading(false);
        if (res.code === 0) {
          setTotal(res.data.count);
          // 数据处理成checkbox组件需要得形式
          let list = res.data.data.map(item => {
            let indeterminate = false;
            let checkedList = [];
            let checkAll = false;
            let options = item.users.map(val => {
              checkList.forEach(ele => {
                if (val.userId === ele.value) {
                  checkedList.push(ele.value);
                }
              });
              return {
                label: val.userName,
                value: val.userId,
                groupName: item.groupName,
                level: item.level,
              };
            });
            if (checkedList.length === options.length && checkedList.length > 0) {
              checkAll = true;
            }
            if (checkedList.length < options.length && checkedList.length > 0) {
              indeterminate = true;
            }
            return {
              groupName: item.groupName,
              level: item.level,
              groupId: item.groupId,
              indeterminate,
              checkAll,
              checkedList,
              plainOptions: options,
            };
          });
          setAllist(list);
        } else {
          message.error(res.msg);
        }
      })
      .catch(() => {
        setLoading(false);
        message.error('网络异常，请稍后再试');
      });
  };
  // 删除角色
  const deleteRol = key => {
    const dataSource = [...checkList];
    setCheckList(dataSource.filter(item => item.value !== key));
    setDeleKey(key);
    setDelFlag(delFlag + 1);
  };
  const columns = [
    {
      title: '已选用户',
      dataIndex: 'label',
      key: 'label',
      width: 220,
      ellipsis: {
        showTitle: true,
      },
      render: (text, record) => (
        <span>
          <Tooltip placement="topLeft" title={`${record.label}(${record.groupName})`}>
            {record.label}({record.groupName})
          </Tooltip>
        </span>
      ),
    },
    {
      title: '操作',
      align: 'center',
      ellipsis: true,
      width: 80,
      render: record => (
        <>
          <Space>
            <Tooltip title="清除关联用户">
              <DeleteOutlined
                onClick={() => deleteRol(record.value)}
                style={{ fontSize: '16px', color: '#e86060' }}
              />
            </Tooltip>
          </Space>
        </>
      ),
    },
  ];
  return (
    <>
      {/* <Modal
        title="关联用户"
        visible={visible}
        onOk={onFinish}
        width="900px"
        onCancel={onCancel}
        maskClosable={false}
        destroyOnClose
        centered
      > */}
      <div className={styles.pushTestContent}>
        <div className={styles.leftContent}>
          {/* 头部搜索框 */}
          <div className={styles.searchHeader}>
            <Input.Search
              value={searchName}
              placeholder="请输入部门或用户"
              onChange={searchChange}
              onSearch={onSearch}
              enterButton
              style={{ width: '300px', marginRight: '15px' }}
            />
            <Button type="primary" htmlType="submit" onClick={onReset}>
              重置
            </Button>
          </div>
          {/* 复选框模块 */}
          <div className={styles.checkScrollBox}>
            {/* <Spin spinning={loading}> */}
            <div className={styles.checkContainer}>
              {allList.map((item, index) => (
                <div className={styles.checkBoxContent} key={item.groupId}>
                  <CardCheck
                    cardMsg={item}
                    cardIndex={index}
                    callback={(val, newCheckList) => checkCallBack(val, newCheckList)}
                    checkList={checkList}
                    deleKey={deleKey}
                    delFlag={delFlag}
                  />
                </div>
              ))}
            </div>
            {/* </Spin> */}
          </div>
        </div>
        <div className={styles.tableRight}>
          <Table
            bordered
            style={{ width: '400px', height: '100%', overflowX: 'hidden' }}
            rowKey={record => record.value}
            columns={columns}
            dataSource={checkList}
            pagination={false}
            size="small"
            scroll={{ y: 'calc(100% - 40px)' }}
          />
        </div>
      </div>
      {/* 分页 */}
      <Pagination
        total={total}
        showTotal={(totals, range) => `第${range[0]}-${range[1]} 条/共 ${totals} 条`}
        defaultPageSize={pageSize}
        pageSizeOptions={[10, 20]}
        defaultCurrent={1}
        current={currentPage}
        onChange={paginationChange}
        style={{ marginBottom: '10px' }}
        size="small"
        showQuickJumper
      />
      <Button onClick={onFinish} type="primary" htmlType="submit" style={{ float: 'right' }}>
        提交
      </Button>
      {/* </Modal> */}
    </>
  );
};

export default NewSelectUser;
