import React , { Component } from "react";
import {Link} from 'react-router-dom';
import { Input ,Dropdown , Menu , Icon } from 'antd';
import './order.css';

import Nav from './Nav';

import axios from 'axios';

const Search = Input.Search;

class order extends Component{
  constructor(props){
    super(props);
    this.state={
      issue_chosen:undefined
    }
  }

  componentDidMount=()=>{
    this.getSelectList();
    this.getIssueList();
  }

  getSelectList=()=>{
    const { projectsId } = this.props.match.params;

    const url = `/projects/${projectsId}/issues/index_chosen.json`;
    axios.get(url).then((result)=>{
      if(result){
        this.setState({
          issue_chosen:result.data.issue_chosen
        })
      }
    }).catch((error)=>{
      console.log(error);
    })
  }

  getIssueList=()=>{
    const { projectsId } = this.props.match.params;

    const url = `/projects/${projectsId}/issues.json`;
    axios.get(url,{
      params:{}
    }).then((result)=>{
      if(result){

      }
    }).catch((error)=>{
      console.log(error);
    })
  }

  getOption=(e)=>{
    console.log(e);
  }
  renderMenu =(array,name)=>{
    return(
      <Menu>
        <Menu.Item key="0" onClick={this.getOption}>{name}</Menu.Item>
        {
          array && array.length > 0 && array.map((item,key)=>{
            return(
              <Menu.Item key={item.id} onClick={this.getOption}>{item.name}</Menu.Item>
            )
          })
        }
      </Menu>
    )
  }
  render(){

    const { issue_chosen } = this.state;

    return(
      <div className="main">
        <div className="topWrapper">
          <Nav />
          <Link to={``} className="topWrapper_btn">创建工单</Link>
        </div>
        <div className="topWrapper" style={{borderBottom:"none"}}>
          <p className="topWrapper_nav">
            <span>2个开启中</span>
            <span>100个已关闭</span>
          </p>
          <div>
            <Search
              placeholder="搜索"
              enterButton
              onSearch={value => console.log(value)}
              style={{ width: 300 }}
            />
          </div>
        </div>
        <div className="f-wrap-between mb20">
          <ul className="topWrapper_type">
            <li className="active">全部</li>
            <li>指派给我</li>
            <li>由我创建</li>
            <li>@我的</li>
          </ul>
          <ul className="topWrapper_select">
            <li>
              <Dropdown className="topWrapperSelect" overlay={this.renderMenu(issue_chosen && issue_chosen.issue_tag,'标签')} trigger={['click']} placement="bottomCenter">
                <span>标签<Icon type="caret-down" className="ml5" /></span>
              </Dropdown>
            </li>
            <li>
              <Dropdown className="topWrapperSelect" overlay={this.renderMenu(issue_chosen && issue_chosen.issue_type,'所有类型')} trigger={['click']} placement="bottomCenter">
                <span>类型<Icon type="caret-down" className="ml5" /></span>
              </Dropdown>
            </li>
            <li>
              <Dropdown className="topWrapperSelect" overlay={this.renderMenu(issue_chosen && issue_chosen.tracker,'所有分类')} trigger={['click']} placement="bottomCenter">
                <span>分类<Icon type="caret-down" className="ml5" /></span>
              </Dropdown>
            </li>
            <li>
              <Dropdown className="topWrapperSelect" overlay={this.renderMenu(issue_chosen && issue_chosen.assign_user,'发布人')} trigger={['click']} placement="bottomCenter">
                <span>发布人<Icon type="caret-down" className="ml5" /></span>
              </Dropdown>
            </li>
            <li>
              <Dropdown className="topWrapperSelect" overlay={this.renderMenu(issue_chosen && issue_chosen.assign_user,'指派人')} trigger={['click']} placement="bottomCenter">
                <span>指派人<Icon type="caret-down" className="ml5" /></span>
              </Dropdown>
            </li>
            <li>
              <Dropdown className="topWrapperSelect" overlay={this.renderMenu(issue_chosen && issue_chosen.priority,'优先度')} trigger={['click']} placement="bottomCenter">
                <span>优先度<Icon type="caret-down"  className="ml5"/></span>
              </Dropdown>
            </li>
            <li>
              <Dropdown className="topWrapperSelect" overlay={this.renderMenu(issue_chosen && issue_chosen.done_ratio,'完成度')} trigger={['click']} placement="bottomCenter">
                <span>完成度<Icon type="caret-down" className="ml5" /></span>
              </Dropdown>
            </li>
          </ul>
        </div>
        <div>
          <div className="issueItem">
            <div className="flex-1">
              <p className="mb15 df">
                <span className="issueNo">#10</span>
                <span className="flex-1 hide-1 font-16 color-grey-3 lineh-30">forge重构：issue列表issue列表issue列表issue列表</span>
              </p>
              <p className="color-grey-6">
                <span>1小时前创建</span>
                <span className="ml20"><i className="iconfont icon-pinglun1 mr3 font-16"></i>3</span>
              </p>
            </div>
            <ul className="topWrapper_select">
              <li>release</li>
              <li>普通</li>
              <li>缺陷</li>
              <li>猜猜</li>
              <li>猜猜猜</li>
              <li>高</li>
              <li>0%</li>
            </ul>
          </div>
        </div>
    </div>
    )
  }
}
export default order;