import React from 'react';
import { Button } from 'antd';
import Search from '../Component/Search';
import Sort from '../Component/Sort';
import ListCount from '../Component/ListCount';
import Box from './Box';
import './Index.scss';
import styled from 'styled-components';

import { Menu } from 'antd';

const Span = styled.span`{
  color:#888;
  font-size:12px;
  margin-right:10px;
}`
const Align = styled.div`{
  display:flex;
  aligin:center;
}`
const ListName = styled.div`{
  font-size:14px;
  color:#333;
  margin-bottom:8px;
  height:18px;
  line-height:18px;
}`;
const ColorListName = styled.div`{
  color:#5091FF;
  font-size:14px;
  margin-bottom:8px;
  height:18px;
  line-height:18px;
}`
const Img = styled.img`{
  border-radius:50%;
  width:45px;
  height:45px;
  margin-right:12px;
}`
export default (()=>{
  function onSearch(value){

  }
  const menu=(
    <Menu>
      <Menu.Item key="updated_on">更新时间排序</Menu.Item>
      <Menu.Item key="created_on">项目数排序</Menu.Item>
    </Menu>
  )
  const menu_new=(
    <Menu>
      <Menu.Item key="updated_on">新建托管项目</Menu.Item>
      <Menu.Item key="created_on">新建镜像项目</Menu.Item>
    </Menu>
  )
  const leftList = (
    <div className="team_project">
      <p className="t_p_title">
        <span className="flex1">
          <span className="name">react项目react项目react项目react项目</span>
          <i className="iconfont icon-banbenku font-20 color-green" />
          <i className="iconfont icon-jingxiang font-18 color-green" />
          <i className="iconfont icon-fork font-18 color-orange" />
        </span>
        <ListCount fork={1} parise={0}/>
      </p>
      <div className="desc">
      用于构建用户界面的 JavaScript 库
      </div>
      <div className="infos">
        <span className="font-12 color-grey-8">更新于1天前</span>
      </div>
    </div>
  )
  return(
    <div className="list">
      <div className="list-l">
        <div className="head">
          <div style={{width:"370px"}}>
            <Search placeholder="输入仓库名称进行搜索" onSearch={onSearch}/>
          </div>
          <p>
            <Sort menu={menu_new}>
              <a className="addBtn mr30">+&nbsp;新建项目</a>
            </Sort>
            <Sort menu={menu}>
              <a className="color-blue">排序<i className="iconfont icon-sanjiaoxing-down ml3 font-14"></i></a>
            </Sort>
          </p>
        </div>
        <div className="team">
         {leftList}
        </div>
      </div>
      <div className="list-r">
        <Box name="组织成员" count={8}>
          <div className="teammembers">
            <Img src="https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1990625098,3468619056&fm=111&gp=0.jpg" alt="" className="m-img"/>
            <div>
              <ListName>陈Professer</ListName>
              <Align><i className="iconfont icon-shijian color-green mr3 font-13"></i><Span>加入时间：2020-04-28</Span></Align>
            </div>
          </div>
        </Box>
        <Box 
          name="组织团队" 
          count={3} 
          bottom={<Button type={'primary'} to={``}>新建团队</Button>}
        >
          <div className="teammembers">
            <div>
              <ColorListName>陈Professer</ColorListName>
              <Align>
                <Span>2名成员</Span>
                <Span>1个仓库</Span>
              </Align>
            </div>
          </div>
        </Box>
      </div>
    </div>
  )
})