import React, { useState, useEffect } from 'react';
import {
  Row,
  Col,
  Card,
  Input,
  Tooltip,
  Button,
  notification,
  Spin,
  List,
  Space,
  Checkbox,
  Pagination,
  Empty,
} from 'antd';
import lodash, { clone } from 'lodash';
import {
  DoubleLeftOutlined,
  DoubleRightOutlined,
  UserOutlined,
} from '@ant-design/icons';
import PageContainer from '@/components/BasePageContainer';
import {
  getWebModuleTree,
  chooseUserToStation,
  getAllGroup,
  getUserByStation,
  getStationUserList,
  groupUserPagingList,
} from '@/services/userCenter/siteManage/api';
// import ListCard, {
//   checkChildrenByCondition,
//   getId,
// } from '@/components/CheckGroup';
import styles from '@/pages/userCenter/siteManage/SiteManage.less';
import qs from 'qs';
import { appConnector } from '@/containers/App/store';
import classnames from 'classnames';
import AddModal from './AddModal';
import DelModal from './DelModal';
import EditModal from './EditModal';
import userStyles from '@/pages/userCenter/userManage/UserManage.less';

const { Search } = Input;

const placeholder = '请输入机构名称';
const SiteManage = props => {
  const { userMode } = props;
  const [treeData, setTreeData] = useState([]); // 树结构数据
  const [currentStation, setCurrentStation] = useState(''); // 当前选中站点
  const [visibleParams, setvisibleParams] = useState({
    modalVisible: false, // 新增弹窗
    delVisible: false, // 删除弹窗
    editVisible: false, // 修改弹窗
    spinLoading: false, // 加载弹窗
    btnLoading: false,
    loading: false,
    checkBoxLoading: false,
  });
  const [flag, setFlag] = useState(1);
  const [dataList, setdataList] = useState([]);
  const [mulu, setMulu] = useState(true);
  const [selectList, setSelectList] = useState([]); // 选择列表数据
  const [total, setTotal] = useState(0); // 分页总数
  const [page, setPage] = useState({ pageNum: 1, pageSize: 5 });
  const [update, setUpdate] = useState(1);
  const [update1, setUpdate1] = useState(1);
  const [name, setName] = useState('');
  // 侧边栏站点
  useEffect(() => {
    handleShowModal('spinLoading', true);
    getWebModuleTree({
      userMode: userMode || 'super',
      select: '',
      node: -2,
    })
      .then(res => {
        handleShowModal('spinLoading', false);
        let arr = [];
        if (code===0) {
          arr.push(res.find(item => item.id === 'Web4StationRoot'));
        }
        if (arr[0]) {
          const stations = arr[0].children || [];
          setTreeData(stations);
          if (stations.length > 0) {
            if (!currentStation.stationID) {
              setCurrentStation(stations[0]);
            } else {
              setCurrentStation(
                stations.find(s => s.stationID === currentStation.stationID) ||
                  stations[0],
              );
            }
          } else {
            setdataList([]);
          }
        }
      })
      .catch(err => {
        handleShowModal('spinLoading', false);
        console.error(err);
      });
  }, [flag]);
  // 右边对应的机构
  useEffect(() => {
    if (!currentStation.stationID) return;
    handleShowModal('loading', true);
    getList();
  }, [update, name]);
  useEffect(() => {
    if (!currentStation.stationID) return;
    handleShowModal('loading', true);
    getAllcheckList();
  }, [currentStation, update1]);
  const getAllcheckList = async () => {
    let res = await getUserByStation({
      stationID: currentStation.stationID,
      _version: 9999,
      _dc: new Date().getTime(),
    });
    if (res.length > 0) {
      // 还原从后台返回的数据 选中的列表
      let list = [];
      // console.log(res);
      res.forEach(item => {
        if (item.userList.length > 0) {
          item.userList.forEach(value => {
            // console.log(value);
            if (
              value.isChecked &&
              list.findIndex(
                v => +v.GroupId === +item.OUID && +v.userID === +value.userID,
              ) === -1
            ) {
              list.push({
                GroupId: +item.OUID,
                GroupName: item.OUName,
                userName: value.userName,
                userID: value.userID,
              });
            }
          });
        }
      });
      setSelectList(lodash.cloneDeep(list));
      setUpdate(update + 1);
    }
  };
  const getList = () => {
    let params = {
      stationId: +currentStation.stationID || '',
      PageIndex: +page.pageNum,
      PageSize: +page.pageSize,
    };
    if (name) params = { ...params, name };
    groupUserPagingList(params).then(res => {
      if (res.code === 0 && res.data) {
        let { list } = res.data;
        // 还原选择的数据
        if (selectList.length > 0) {
          selectList.forEach(item => {
            list.forEach((value, index) => {
              if (item.GroupId === value.GroupId) {
                list[index].Users.forEach((user, userIndex) => {
                  if (user.userID === item.userID) {
                    list[index].Users[userIndex].isChecked = true;
                  }
                });
                let checkedLen = list[index].Users.filter(v => v.isChecked)
                  .length;
                if (checkedLen === list[index].Users.length) {
                  list[index].isChecked = true;
                }
              }
            });
          });
        }
        handleShowModal('loading', false);
        setdataList(lodash.cloneDeep(list));
        setTotal(res.data.TotalCount);
      } else {
        handleShowModal('loading', false);
        setdataList(lodash.cloneDeep([]));
      }
    });
  };
  // 弹出模态框
  const handleShowModal = (key, value) => {
    setvisibleParams({ ...visibleParams, [key]: value });
  };
  // 获取搜索框的值
  const handleSearch = value => {
    setName(value);
    // getList(value);
  };
  const confirmModal = e => {
    handleShowModal('modalVisible', false);
    setFlag(flag + 1);
  };
  const delModal = () => {
    handleShowModal('delVisible', false);
    setFlag(flag + 1);
  };
  const editModal = () => {
    handleShowModal('editVisible', false);
    setFlag(flag + 1);
  };
  const handleHide = () => {
    setMulu(!mulu);
  };
  const renderListItem = items =>
    items.map(t => (
      <List.Item
        onClick={() => {
          // setSelectList(lodash.cloneDeep([]));
          setPage({ pageNum: 1, pageSize: 5 });
          setCurrentStation(t);
        }}
        key={t.id}
        className={classnames({
          [styles.listItem]: true,
          [styles.selected]: currentStation.id === t.id,
        })}
      >
        {t.text}
      </List.Item>
    ));
  const handleChangeCollpase = (groupId, isShow) => {
    let index = dataList.findIndex(item => item.GroupId === groupId);
    if (dataList[index].children && dataList[index].children.length > 0) {
      setdataList(lodash.cloneDeep(dataList));
      return;
    }
    handleShowModal('loading', true);
    getStationUserList({ stationID: currentStation.stationID, groupId }).then(
      res => {
        if (res.code === 0 && res.data) {
          handleShowModal('loading', false);
          dataList[index].children = res.data;
          setdataList(lodash.cloneDeep(dataList));
        }
      },
    );
  };
  // 每组全选全不选
  const handleChangeAll = (e, index) => {
    dataList[index].isChecked = e.target.checked;
    dataList[index].Users.forEach(item => {
      item.isChecked = e.target.checked;
      let delIndex = selectList.findIndex(
        v => v.GroupId === dataList[index].GroupId && v.userID === item.userID,
      );
      if (e.target.checked) {
        if (delIndex === -1) {
          selectList.push({
            GroupId: dataList[index].GroupId,
            GroupName: dataList[index].GroupName,
            userName: item.userName,
            userID: item.userID,
          });
        }
      }
      if (!e.target.checked) {
        selectList.splice(delIndex, 1);
      }
    });

    setSelectList(lodash.cloneDeep(selectList));
    setdataList(lodash.cloneDeep(dataList));
  };
  // 单个选择checkbox
  const handleChangeSignel = (e, index, vIndex) => {
    dataList[index].Users[vIndex].isChecked = e.target.checked;
    let checked = isAllChecked(index);
    let hasIndex = selectList.findIndex(
      item =>
        item.userID === dataList[index].Users[vIndex].userID &&
        item.GroupId === dataList[index].GroupId,
    );
    dataList[index].isChecked = checked;
    if (e.target.checked && hasIndex === -1) {
      selectList.push({
        GroupId: dataList[index].GroupId,
        GroupName: dataList[index].GroupName,
        userName: dataList[index].Users[vIndex].userName,
        userID: dataList[index].Users[vIndex].userID,
      });
    } else {
      selectList.splice(hasIndex, 1);
    }
    setdataList(lodash.cloneDeep(dataList));
  };
  const isAllChecked = index =>
    dataList[index].Users.filter(item => item.isChecked).length ===
    dataList[index].Users.length;
  // 删除已选列表
  const handleDel = index => {
    let { GroupId, userID } = selectList[index];
    let outerIndex = dataList.findIndex(item => item.GroupId === GroupId);
    if (outerIndex > -1) {
      let innerIndex = dataList[outerIndex].Users.findIndex(
        item => item.userID === userID,
      );
      dataList[outerIndex].Users[innerIndex].isChecked = false;
      dataList[outerIndex].isChecked = isAllChecked(outerIndex);
    }
    selectList.splice(index, 1);
    setSelectList(lodash.cloneDeep(selectList));
    setdataList(lodash.cloneDeep(dataList));
  };
  // 提交
  const handleCommitBtn = () => {
    handleShowModal('btnLoading', true);
    let result = [];
    let obj = {};
    selectList.forEach(item => {
      if (obj[item.GroupId]) {
        obj[item.GroupId].push(item.userID);
      } else {
        obj[item.GroupId] = [item.userID];
      }
    });
    dataList.forEach(item => {
      if (obj[item.GroupId] && item.Users.length === obj[item.GroupId].length) {
        obj[item.GroupId].push(item.GroupId);
      }
    });
    result = Object.values(obj);
    // 数据处理成后台需要的格式
    if (result.length === 0)
      return notification.warning({
        message: '提示',
        description: '请至少选择选择一个用户!',
      });
    chooseUserToStation(
      qs.stringify({
        userList: String(result.flat()),
        stationID: currentStation.stationID,
      }),
      {
        headers: {
          'content-type': 'application/x-www-form-urlencggoded;charset=UTF-8',
        },
      },
    )
      .then(res => {
        handleShowModal('btnLoading', false);

        if (res.code===0) {
          setSelectList([]);
          setUpdate1(update1 + 1);
          notification.success({
            message: '提示',
            duration: 3,
            description: '设置成功',
          });
        } else {
          notification.error({
            message: '提示',
            duration: 15,
            description: res.message,
          });
        }
      })
      .catch(err => {
        handleShowModal('btnLoading', false);
        console.log(err);
      });
  };
  // 分页
  const handleChangePage = (pageNum, pageSize) => {
    setPage({ pageNum, pageSize });
    setUpdate(update + 1);
  };
  return (
    <PageContainer>
      <div className={styles.content}>
        <Card
          className={classnames({
            [styles.cardBox]: true,
            [styles.hideBox]: !mulu,
          })}
        >
          <Spin
            tip="loading...."
            spinning={visibleParams.spinLoading}
            style={{ marginTop: '20px' }}
          >
            <div className={userStyles.siteTitle}>
              <span>选择站点:</span>
            </div>
            <List>{renderListItem(treeData)}</List>
          </Spin>
          <AddModal
            visible={visibleParams.modalVisible}
            onCancel={() => handleShowModal('modalVisible', false)}
            confirmModal={confirmModal}
          />
          <DelModal
            visible={visibleParams.delVisible}
            stationId={currentStation.stationID}
            onCancel={() => handleShowModal('delVisible', false)}
            confirmModal={delModal}
          />
          <EditModal
            visible={visibleParams.editVisible}
            stationObj={currentStation}
            onCancel={() => handleShowModal('editVisible', false)}
            confirmModal={editModal}
          />
          <div>
            {mulu && (
              <Tooltip title="隐藏站点" className={styles.hide}>
                <DoubleLeftOutlined onClick={() => handleHide()} />
              </Tooltip>
            )}
            {!mulu && (
              <Tooltip title="显示站点" className={styles.hide}>
                <DoubleRightOutlined onClick={() => handleHide()} />
              </Tooltip>
            )}
          </div>
        </Card>
        {/* <div>
            {mulu && (
              <Tooltip title="隐藏站点" className={styles.hide}>
                <DoubleLeftOutlined onClick={() => handleHide()} />
              </Tooltip>
            )}
            {!mulu && (
              <Tooltip title="显示站点" className={styles.hide}>
                <DoubleRightOutlined onClick={() => handleHide()} />
              </Tooltip>
            )}
          </div> */}
        {/* </Col> */}
        {/* <Col span={mulu ? 0 : 1}>
          {mulu && (
            <Tooltip title="隐藏站点" className={styles.hide}>
              <DoubleLeftOutlined onClick={() => handleHide()} />
            </Tooltip>
          )}
          {!mulu && (
            <Tooltip title="显示站点" className={styles.hide}>
              <DoubleRightOutlined onClick={() => handleHide()} />
            </Tooltip>
          )}
        </Col> */}
        {/* <Col span={mulu ? 20 : 23}> */}
        <div
          className={classnames({
            [styles.boxR]: true,
            [styles.boxH]: mulu,
          })}
        >
          <Card
            className={classnames({
              [styles.cardBoxTop]: true,
              [styles.boxH]: mulu,
            })}
          >
            <Row align="middle">
              <Col span={1}>搜索</Col>
              <Col span={8}>
                <Search
                  allowClear
                  placeholder={placeholder}
                  onSearch={handleSearch}
                  // onChange={handleChange}
                  enterButton
                />
              </Col>
              <Col span={3} />
              <Col span={8}>
                <Space size="large">
                  <Button
                    type="primary"
                    onClick={() => {
                      handleShowModal('modalVisible', true);
                    }}
                  >
                    新增
                  </Button>
                  <Button
                    type="primary"
                    onClick={() => {
                      handleShowModal('editVisible', true);
                    }}
                    disabled={
                      !currentStation.stationID || visibleParams.spinLoading
                    }
                  >
                    编辑
                  </Button>
                  <Button
                    danger
                    type="primary"
                    onClick={() => {
                      handleShowModal('delVisible', true);
                    }}
                    disabled={
                      !currentStation.stationID || visibleParams.spinLoading
                    }
                  >
                    删除
                  </Button>
                </Space>
              </Col>
            </Row>
          </Card>
          <div style={{ background: '#fff' }}>
            <Card
              className={classnames({
                [styles.boxH]: mulu,
                [styles.cardBoxR]: true,
              })}
            >
              {/* <Checkbox className={styles.siteAll}>全选/反选</Checkbox> */}
              <Spin spinning={visibleParams.loading}>
                {dataList.map((item, index) => (
                  <Panels
                    {...item}
                    index={index}
                    key={item.GroupId}
                    handleChangeCollpase={handleChangeCollpase}
                    handleChangeAll={handleChangeAll}
                    handleChangeSignel={handleChangeSignel}
                  />
                ))}
              </Spin>
              {dataList.length > 0 && !visibleParams.loading ? (
                <>
                  <div style={{ textAlign: 'right' }}>
                    <Pagination
                      size="small"
                      total={total}
                      current={page.pageNum}
                      defaultPageSize="5"
                      onChange={handleChangePage}
                      pageSizeOptions={['5']}
                    />
                  </div>
                  <p className={styles.siteline}>已选择列表:</p>
                  <div className={styles.siteSelectList}>
                    <ul className={styles.siteSelectUl}>
                      {selectList.map((item, index) => (
                        <li
                          key={`${item.userName}${item.GroupId}${index}`}
                          onClick={() => handleDel(index)}
                        >
                          {`${item.userName}(${item.GroupName})`}
                        </li>
                      ))}
                    </ul>
                  </div>
                </>
              ) : (
                <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
              )}
            </Card>
            <div className={styles.siteBtn}>
              <Button
                type="primary"
                className={styles.siteCommit}
                onClick={handleCommitBtn}
              >
                提交
              </Button>
            </div>
          </div>
        </div>
      </div>
    </PageContainer>
  );
};

const Panels = React.memo(props => {
  let { index, GroupId, GroupName, Users, isChecked, isShow, color } = props;
  return (
    <div className={styles.sitePanel} key={GroupId} id={`siteId${GroupId}`}>
      {/* onClick={() => props.handleChangeCollpase(GroupId, isShow)} */}
      <div className={styles.sitePanelHead}>
        {/* {isShow ? (
          <UpOutlined className={styles.siteIcon} />
        ) : (
          <DownOutlined className={styles.siteIcon} />
        )} */}
        {/* <UpOutlined className={styles.siteIcon} /> */}
        <UserOutlined className={styles.siteIcon} />
        <p style={{ color }}>{GroupName}</p>
      </div>
      <div className={styles.sitePanelCon}>
        <Checkbox
          key="0"
          className={styles.siteList}
          checked={isChecked}
          onClick={e => props.handleChangeAll(e, index)}
        >
          全选
        </Checkbox>
        {Users.length > 0 &&
          Users.map((v, vIndex) => (
            <CheckBoxRow
              {...v}
              index={index}
              vIndex={vIndex}
              key={v.userID}
              handleChangeSignel={props.handleChangeSignel}
            />
          ))}
      </div>
    </div>
  );
});

const CheckBoxRow = React.memo(props => {
  let { vIndex, index, isChecked, userName } = props;
  return (
    <Checkbox
      className={styles.siteList}
      checked={isChecked}
      onClick={e => props.handleChangeSignel(e, index, vIndex)}
    >
      {userName}
    </Checkbox>
  );
});

export default React.memo(appConnector(SiteManage));