import React, { useState } from 'react';
import { WhiteBack , Blueline , AlignCenter , FlexAJ } from '../../Component/layout';
import { Menu , Table , Pagination , Icon , Tooltip } from 'antd';
import Sort from '../../Component/Sort';
import Title from '../../Component/Title';
import Search from '../../Component/Search';
import SearchUser from '../../Component/SearchUser';
import styled from 'styled-components';
import { getImageUrl } from 'educoder';

const Img = styled.img`{
  width:30px;
  height:30px;
  border-radius:50%;
}`

const demoData = [
  {
    img:"images/avatars/User/g",
    name:"蔡世",
    email:"1149225589@qq.com",
    team:"caicaizi",
    role:"管理者",
    operation:"移除成员",
  }
]
export default (()=>{
  const [ choiceId , serChoiceId ] = useState(undefined);
  const [ page , setPage ] = useState(1);
  const [ limit , setLimit ] = useState(15);
  const [ total , setTotal ] = useState(0);
  const [ data , setData ] = useState(demoData);

  // 获取搜索用户框里面选择的用户ID，方便添加组织成员
  function getUser(id){
    console.log(id);
    serChoiceId(id);
  }
  // 搜索
  function onSearch(value){
    console.log(value);
  }
  // 切换分页
  function ChangePage(page){
    setPage(page);
  }

  const menu=(
    <Menu>
      <Menu.Item key="all">全部</Menu.Item>
      <Menu.Item key="Manager">管理员</Menu.Item>
      <Menu.Item key="Developer">开发者</Menu.Item>
      <Menu.Item key="Reporter">报告者</Menu.Item>
    </Menu>
  )
  const roleTitle = (
    <div><span className="mr3">角色</span>
      <Tooltip placement='bottom' title=
        {
        <div>
          <div className="mb3">管理员：拥有仓库设置功能、代码库读、写操作</div>
          <div className="mb3">开发人员：只拥有代码库读、写操作</div>
          <div className="mb3">报告者：只拥有代码库读操作</div>
        </div>
        }
      >
      <Icon type="question-circle"></Icon>
  </Tooltip>
  </div>
  );
  const columns = [
    {
      title: '头像',
      dataIndex: 'Img',
      width:"7%",
      render:(value,item)=>{
        return(
          <Img src={getImageUrl(item.img)}></Img>
        )
      }
    },
    {
      title: '用户名',
      dataIndex: 'name',
      width:"13%",
      align:"center"
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      width:"25%",
    },
    {
      title: '所属团队',
      dataIndex: 'team',
      width:"20%",
    },
    {
      title: roleTitle,
      dataIndex: 'role',
      width:"20%",
      render:(value,item)=>{
        return(
          item.role
        )
      }
    },
    {
      title: '操作',
      dataIndex: 'operation',
      width:"15%",
      render:(value,item)=>{
        return <a className="color-grey-8">移除成员</a>
      }
    }
  ]
  return(
    <WhiteBack>
      <Title>
        <span>组织成员管理</span>
        <AlignCenter>
          <SearchUser getUser={getUser}/>
          <Blueline className="ml30">+&nbsp;添加用户</Blueline>
        </AlignCenter>
      </Title>
      <FlexAJ className="padding20-30">
        <div style={{width:"580px"}}>
          <Search placeholder="输入用户名或邮箱、团队名搜索" onSearch={onSearch}/>
        </div>
        <Sort menu={menu}>
          <a className="color-blue">角色筛选<i className="iconfont icon-sanjiaoxing-down ml3 font-14"></i></a>
        </Sort>
      </FlexAJ>
      <div className="pl30 pr30 pb30">
        <Table 
          size="small"
          columns={columns}
          dataSource={data}
          pagination={false}
          className="teamMemberTable"
        ></Table>
        {
          total > limit ?
          <div className="edu-txt-center mt30 mb20">
            <Pagination simple defaultCurrent={page} total={total} pageSize={limit} onChange={ChangePage}></Pagination>
          </div>
          :""
        }
      </div>
    </WhiteBack>
  )
})