import React, { useState, useCallback } from 'react';
import { Modal, Spin, Tabs, notification, message } from 'antd';
import {
  setUserRelation,
  setUserRelations,
} from '@/services/userCenter/userManage/api';
import ListCardItem from '../../orgnazation/listCardItem';

const RelateRoleModal = props => {
  const {
    currentUser,
    currentSelectOrg,
    userIDs,
    visible,
    rolelist,
    stationlist,
    multiRelateRoles,
    onCancel,
    onSelect,
    loading,
  } = props;
  const { TabPane } = Tabs;
  const [roleValueList, setRoleValueList] = useState({}); // 勾选的角色列表
  const [stationValueList, setStationValueList] = useState({}); // 勾选的站点列表

  const getRoleValueCallback = useCallback((value, index) => {
    roleValueList[index] = value;
    setRoleValueList({ ...roleValueList });
  }, []);

  const getStationValueCallback = useCallback((value, index) => {
    stationValueList[index] = value;
    setStationValueList({ ...stationValueList });
  }, []);

  // 提交-关联角色
  const submitRole = () => {
    setUserRelation(
      currentUser.userID,
      Object.keys(roleValueList)
        .map(k => roleValueList[k])
        .flat(),
      Object.keys(stationValueList)
        .map(k => stationValueList[k])
        .flat(),
    )
      .then(res => {
        if (res.success) {
          onCancel();
          // 跳转到新组织机构下的用户表
          onSelect([`${currentUser.OUID}`]);
          // setExpandedKeys([`${currentUser.OUID}`]);
          notification.success({
            message: '提交成功',
            duration: 2,
          });
        } else {
          notification.error({
            message: '提交失败',
            description: res.message,
          });
        }
      })
      .catch(err => {
        message.error(err);
      });
  };
  // 提交-批量关联角色
  const submitRoles = () => {
    setUserRelations(
      userIDs,
      Object.keys(roleValueList)
        .map(k => roleValueList[k])
        .flat()
        .toString(),
      Object.keys(stationValueList)
        .map(k => stationValueList[k])
        .flat()
        .toString(),
    )
      .then(res => {
        if (res.code === 0) {
          onCancel();
          // 跳转到组织重新请求改机构下用户数据,查找用户时currentSelectOrg为空数组,不需要重新请求
          if (currentSelectOrg.length !== 0) {
            onSelect([currentSelectOrg]);
          }
          notification.success({
            message: '提交成功',
            duration: 2,
          });
        } else {
          notification.error({
            message: '提交失败',
            description: res.msg,
          });
        }
      })
      .catch(err => {
        message.error(err);
      });
  };
  return (
    <Modal
      title="关联角色"
      visible={visible}
      onOk={multiRelateRoles ? submitRoles : submitRole}
      onCancel={onCancel}
      okText="确认"
      cancelText="取消"
      width="920px"
    >
      <Spin spinning={loading} tip="loading">
        <Tabs defaultActiveKey="1" style={{ marginTop: '-16px' }}>
          <TabPane tab="角色" key="1">
            {visible &&
              rolelist.map((role, index) => (
                <ListCardItem
                  itemid={index}
                  key={`item${index}key`}
                  userList={role.roleList}
                  OUName={role.visibleTitle}
                  getValueCallback={getRoleValueCallback}
                />
              ))}
          </TabPane>
          <TabPane tab="站点" key="2">
            {visible &&
              stationlist.map((station, index) => (
                <ListCardItem
                  itemid={index}
                  key={`item${index}key`}
                  userList={station.stationList}
                  OUName={station.visibleTitle}
                  getValueCallback={getStationValueCallback}
                />
              ))}
          </TabPane>
        </Tabs>
      </Spin>
    </Modal>
  );
};

export default RelateRoleModal;