import React , { useState } from 'react';
import { AutoComplete , Pagination } from 'antd';
import { Banner , Blueline , FlexAJ , Greenback , Redback } from '../../Component/layout';
import styled from 'styled-components';

const Option = AutoComplete.Option;
const Div =  styled.div`{
  padding:18px 30px;
}`;
const LIMIT = 15;
const demoData=[{name:"Python相关",id:1},{name:"Python相关",id:2}];
export default ()=>{
  const [ searchKey , setSearchKey ] = useState(undefined);
  const [ page , setPage ] = useState(1);
  const [ total , setTotal ] = useState(0);

  function changeInputUser(){}
  function selectInputUser(){}

  // 切换分页
  function ChangePage(page){
    setPage(page);
  }
  const source = demoData && demoData.map((item,key)=>{
    return(
    <Option key={key} value={`${item.id}`}>{item.name}</Option>
    )
  })
  return(
    <div>
      <Banner>团队项目管理</Banner>
      <Div>
        <FlexAJ className="actionNav">
          <div>
            <AutoComplete
              dataSource={source}
              value={searchKey}
              style={{ width: 270 }}
              onChange={changeInputUser}
              onSelect={selectInputUser}
              placeholder="搜索项目…"
            />
            <Blueline className="ml30">+&nbsp;添加项目</Blueline>
          </div>
          <span>
            <Greenback>添加所有</Greenback>
            <Redback className="ml20">移除所有</Redback>
          </span>
        </FlexAJ>
        <div className="GSlist">
          <div>
            <span>
              caishi/前端v0.1
            </span>
            <a style={{color:"#F73030"}}>移除</a>
          </div>
        </div>
        {
          total > LIMIT ? 
          <div className="edu-txt-center mt30 mb20">
            <Pagination simple defaultCurrent={page} total={total} pageSize={LIMIT} onChange={ChangePage}></Pagination>
          </div>:""
        }
      </Div>
    </div>
  )
}