import React, { useEffect, useState } from "react";
import { withRouter } from "react-router-dom";
import {Button,Input} from "antd";
import NewChooseMembersModal from "@/modules/college-manage/modal/NewChooseMembersModal";
import LeftStructureTree from './LeftStructureTree';
import UserTable from './UserTable'

import "./DepartMentTabCon.less";
const { Search } = Input;
function DepartMentTabCon() {
  const [chooseMembersModalVisible,setChooseMembersModalVisible] = useState(false);

  function closeChooseMembersModal(){
    setChooseMembersModalVisible(false);
  }

  return (
    <div className="department-tab-con">
        <div className="organization">
          <div className="search-con">
            <Search
              placeholder="搜索部门/学员姓名"
              className="search search-input"
              style={{ width: 245 }}
              enterButton={<span className="icon iconfont">&#xe832;</span>}
            />
          </div>
          <LeftStructureTree treeType={'departMentTab'}/>
        </div>
        <div className="table-con">
            <div className="operate-area">
              <Button type="primary" className="add-user-btn" onClick={()=>{setChooseMembersModalVisible(true)}}>添加学员</Button>
              <Button className="del-user-btn">删除学员</Button>
              <Button className="update-user-btn">更新列表数据</Button>
              <span className="origin-text">数据来源企业微信通讯录</span>
              <span className="view-text">查看数据更新说明</span>
            </div>
            <UserTable/>
        </div>
        <NewChooseMembersModal visible={chooseMembersModalVisible} type="USER" close={()=>{closeChooseMembersModal()}}/>
    </div>
  );
}

export default withRouter(DepartMentTabCon);