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

import NoneData from '../Nodata';
import OrderItem from './OrderItem';

import axios from 'axios';

/**
 * issue_chosen:下拉的筛选列表,
 * data:列表接口返回的所有数据,
 * issues:列表数组,
 * isSpin:加载中,
 * author_id:发布者id,
 * assigned_to_id:指派给。。。的id，
 * limit:每页条数,
 * page:当前页,
 * search_count:列表总条数
 * issue_type:搜索条件
 * status_type: issue的关闭和开启，1表示开启中的，2表示关闭的
 */
class MilepostDetail extends Component {
  constructor(props) {
    super(props);
    this.state = {
      issue_chosen: undefined,
      data: undefined,
      issues: undefined,
      isSpin: true,
      author_id: undefined,
      status_id: undefined,
      assigned_to_id: undefined,
      limit: 15,
      page: 1,
      search_count: undefined,
      issue_type: undefined,
      status_type: '1',
      //设置选择高亮
      issue_tag_ids: '标签',
      tracker_ids: '类型',
      author_ids: '发布人',
      assigned_to_ids: '负责人',
      status_ids: "状态",
      done_ratios: '完成度',
      paix: '排序'
    }
  }

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

  getSelectList = () => {
    const { projectsId , owner } = this.props.match.params;
    const url = `/${owner}/${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 = ( page , item , value , update , updateValue , type ) => {
    const { projectsId, meilid , owner } = this.props.match.params;
    const { limit , order_name , order_type , issue_tag_id , author_id , assigned_to_id , tracker_id , status_id , done_ratio , status_type } = this.state;

    const url = `/${owner}/${projectsId}/milestones/${meilid}.json`;
    let params = update ? {
      page, limit , order_name:value , order_type:updateValue , issue_tag_id , 
      author_id , assigned_to_id , tracker_id , status_id , done_ratio,
      status_type:type || status_type,
    }:{
      page, limit , order_name , order_type , issue_tag_id , 
      author_id , assigned_to_id , tracker_id , status_id , done_ratio,
      status_type:type || status_type,
      [item]:value
    }
    axios.get(url, {
      params: params
    }).then((result) => {
      if (result) {
        this.setState({
          data: result.data,
          issues: result.data.issues,
          search_count: result.data.search_count,
          isSpin: false
        })
      }
    }).catch((error) => {
      console.log(error);
    })
  }

  getOption = (e, id, name) => {
    if (e.key === "created_on") {
      if (e.item.props.value === "desc") {
        this.setState({
          paix: '最新创建'
        })
      } else {
        this.setState({
          paix: '最早创建'
        })
      }
    } else if (e.key === "updated_on") {
      if (e.item.props.value === "desc") {
        this.setState({
          paix: '最新更新'
        })
      } else {
        this.setState({
          paix: '最早更新'
        })
      }
    }
    this.setState({
      [id]: e.key,
      [id+"s"]:name,
      page:1
    })
    if (e.key === "created_on" || e.key === "updated_on") {
      this.setState({
        order_name: e.key,
        order_type: e.item.props.value
      })
      this.getIssueList(1,id,e.key,true,e.item.props.value);
    }else{
      this.getIssueList(1,id,e.key);
    }
  }

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

  // 翻页
  ChangePage = (page) => {
    this.setState({
      page,
      isSpin: true
    })
    this.getIssueList(page);
  }

  openorder = (type) => {
    this.setState({
      status_type: type,
      issue_tag_id : undefined,
      author_id : undefined,
      tracker_id : undefined,
      done_ratio : undefined,
      status_id: undefined,
      assigned_to_id: undefined,
      issue_tag_ids: '标签',
      tracker_ids: '类型',
      author_ids: '发布人',
      assigned_to_ids: '负责人',
      status_ids: "状态",
      done_ratios: '完成度',
      paix: '排序'
    },() => {
      this.getIssueList(1,undefined,undefined,undefined,undefined,type);
   });
    
  }

  render() {

    const { issue_chosen, issues, limit, page, search_count, data, isSpin , status_type } = this.state;
    const { projectsId, meilid ,owner} = this.props.match.params;

    const menu = (
      <Menu onClick={(e) => this.getOption(e)}>
        <Menu.Item key={'created_on'} value="desc">最新创建</Menu.Item>
        <Menu.Item key={'created_on'} value="asc">最早创建</Menu.Item>
        <Menu.Item key={'updated_on'} value="desc">最新更新</Menu.Item>
        <Menu.Item key={'updated_on'} value="asc">最早更新</Menu.Item>
      </Menu>
    )
    return (
      <div className="main" style={{padding:"0px"}}>
        <div className="miledetail">
          <p className="font-20">{data && data.name}</p>
          <FlexAJ>
            <span className="mt7">
              <span className="mr10">
                <i className="iconfont icon-rili font-14 mr5">
                </i>
                {
                  data && data.effective_date ?
                    <span >{data && data.effective_date}</span>
                    :
                    <span >暂无截止时间</span>
                }
              </span>
              <span className="font-weight-bold">{data && data.percent && data.percent.toFixed(2)}%完成 </span>
            </span>
            <div className="milepostdiv">
              <Link to={`/projects/${owner}/${projectsId}/milestones/${meilid}/edit`} className="topWrapper_btn" style={{ marginRight: 15 }} >编辑里程碑</Link>
              <Link to={`/projects/${owner}/${projectsId}/issues/${meilid}/new`} className="topWrapper_btn">创建任务</Link>
            </div>
          </FlexAJ>
        </div>
        
        <Spin spinning={isSpin}>
          <div className="pl20 pr20">
            <div className="f-wrap-between pt15 pb15 bor-bottom-greyE">
              <ul className="topWrapper_type_infos">
                <li className={status_type==="1" ? "active" : ""} onClick={() => this.openorder("1")}>{data && data.open_issues_count}个开启中</li>
                <li className={status_type==="2" ? "active" : ""} onClick={() => this.openorder("2")}>{data && data.close_issues_count}个已关闭</li>
              </ul>
              <ul className="topWrapper_select">
                <li>
                  <Dropdown className="topWrapperSelect" overlay={this.renderMenu(issue_chosen && issue_chosen.issue_tag, '标签', 'issue_tag_id')} trigger={['click']} placement="bottomCenter">
                    <span>{this.state.issue_tag_ids}<Icon type="caret-down" className="ml5" /></span>
                  </Dropdown>
                </li>
                <li>
                  <Dropdown className="topWrapperSelect" overlay={this.renderMenu(issue_chosen && issue_chosen.assign_user, '发布人', 'author_id')} trigger={['click']} placement="bottomCenter">
                    <span>{this.state.author_ids}<Icon type="caret-down" className="ml5" /></span>
                  </Dropdown>
                </li>
                <li>
                  <Dropdown className="topWrapperSelect" overlay={this.renderMenu(issue_chosen && issue_chosen.assign_user, '负责人', 'assigned_to_id')} trigger={['click']} placement="bottomCenter">
                    <span>{this.state.assigned_to_ids}<Icon type="caret-down" className="ml5" /></span>
                  </Dropdown>
                </li>
                <li>
                  <Dropdown className="topWrapperSelect" overlay={this.renderMenu(issue_chosen && issue_chosen.tracker, '类型', 'tracker_id')} trigger={['click']} placement="bottomCenter">
                    <span>{this.state.tracker_ids}<Icon type="caret-down" className="ml5" /></span>
                  </Dropdown>
                </li>
                <li>
                  <Dropdown className="topWrapperSelect" overlay={this.renderMenu(issue_chosen && issue_chosen.issue_status, '状态', 'status_id')} trigger={['click']} placement="bottomCenter">
                    <span>{this.state.status_ids}<Icon type="caret-down" className="ml5" /></span>
                  </Dropdown>
                </li>
                <li>
                  <Dropdown className="topWrapperSelect" overlay={this.renderMenu(issue_chosen && issue_chosen.done_ratio, '完成度', 'done_ratio')} trigger={['click']} placement="bottomCenter">
                    <span>{this.state.done_ratios}<Icon type="caret-down" className="ml5" /></span>
                  </Dropdown>
                </li>
                <li>
                  <Dropdown className="topWrapperSelect" overlay={menu} trigger={['click']} placement="bottomCenter">
                    <span>{this.state.paix}<Icon type="caret-down" className="ml5" /></span>
                  </Dropdown>
                </li>
              </ul>
            </div>
            <div className="setItemStyle">
            {
              search_count === 0 ?
                <NoneData _html="暂时还没有相关数据哦!" />
                :
                issues && issues.length>0 && issues.map((item,key)=>{
                  return(
                    <OrderItem key={key} mile item={item} search_count={search_count} page={page} limit={limit} {...this.props} {...this.state}></OrderItem>
                  )
                })
            }
            </div>
            {
              search_count > limit?
              <div className="mt30 mb10 edu-txt-center">
                <Pagination simple current={page} total={search_count} pageSize={limit} onChange={this.ChangePage}></Pagination>
              </div>:""
            }
          </div>
        </Spin>
      </div>
    )
  }
}
export default MilepostDetail;