import React, { Component } from "react";
import { Input, Dropdown, Menu, Icon, Pagination, Spin } from 'antd';
import './merge.css';
import '../Order/order.css';
import NoneData from '../Nodata';
import OrderItem from './MergeItem';


import axios from 'axios';

const Search = Input.Search;
/**
 * issue_chosen:下拉的筛选列表,
 * data:列表接口返回的所有数据,
 * issues:列表数组,
 * isSpin:加载中,
 * search:搜索关键字,
 * author_id:发布者id,
 * assigned_to_id:指派给。。。的id，
 * limit:每页条数,
 * page:当前页,
 * search_count:列表总条数
 * issue_type:搜索条件
 */
class merge extends Component {
  constructor(props) {
    super(props);
    this.state = {
      issue_chosen: undefined,
      data: undefined,
      issues: undefined,
      isSpin: false,
      search: undefined,
      author_id: undefined,
      assigned_to_id: undefined,
      // limit: 15,
      // page: 1,
      search_count: undefined,
      issue_type: undefined,
      status_type: '1',
      //设置选择高亮
      openselect: 1,
      closeselect: undefined,
      issue_tag_ids: '标签',
      fixed_version_ids: '里程碑',
      assigned_to_ids: '指派人',
      paix: '排序',
      select_params: {
        status_type: "1", //开启中和关闭中，默认为开启中的
        assigned_to_id: undefined, // 指派人
        fixed_version_id: undefined,
        order_name: undefined,
        order_type: undefined,
        search: undefined,
        page: 1,
        limit: 15,
      },

    }
  }

  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 { select_params } = this.state;
    const { projectsId } = this.props.match.params;
    const url = `/projects/${projectsId}/pull_requests.json`;
    axios.get(url, {
      params: select_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);
    })
  }

  getMenu = (e, id, name) => {
    this.setState({
      isSpin: true,
    });
    let key_name = e.key.split("-");
    if (key_name[0] === "created_on") {
      if (e.item.props.value === "desc") {
        this.setState({
          paix: "最新创建",
        });
      } else {
        this.setState({
          paix: "最早创建",
        });
      }
      this.state.select_params.order_name = e.key;
    } else if (key_name[0] === "updated_on") {
      if (e.item.props.value === "desc") {
        this.setState({
          paix: "最新更新",
        });
      } else {
        this.setState({
          paix: "最早更新",
        });
      }
    }
    this.state.select_params.order_name = key_name[0];
    this.state.select_params.order_type = e.item.props.value;
    this.state.select_params.page = 1;
    this.getIssueList();
  };

  getOption = (e, id, name) => {
    this.setState({
      isSpin: true,
    });
    let option_id = e.key === "all" ? undefined : e.key;
    this.setState({
      ["${id}s"]: name,
    });
    this.state.select_params[`${id}`] = option_id;
    this.state.select_params.page = 1;
    this.state[`${id}s`] = name;
    this.getIssueList();
  }

  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({
      isSpin: true,
    });
    this.state.select_params.page = page;
    this.getIssueList();
  }

  // 搜索
  searchFunc = (value) => {
    this.setState({
      search: value,
      isSpin: true,
    });
    this.state.select_params.search = value;
    this.state.select_params.page = 1;
    this.getIssueList();
  }

  openorder = (type) => {
    // if (type) {
    //   if (type === 1) {
    //     this.setState({
    //       status_type: '1',
    //       closeselect: undefined,
    //       openselect: '123',
    //       issue_tag_ids: '标签',
    //       fixed_version_ids: '里程碑',
    //       assigned_to_ids: '指派人',
    //       paix: '排序'
    //     })
    //     this.getIssueList("", "", "", "", "", 1, "");

    //   } else {
    //     this.setState({
    //       status_type: '2',
    //       openselect: undefined,
    //       closeselect: '123',

    //       issue_tag_ids: '标签',
    //       fixed_version_ids: '里程碑',
    //       assigned_to_ids: '指派人',
    //       paix: '排序'
    //     })
    //     this.getIssueList("", "", "", "", "", 2, "");
    //   }
    // }

    this.setState({
      isSpin: true,
    });
    if (type) {
      this.setState({
        status_type: type,
        issue_tag_ids: '标签',
        fixed_version_ids: '里程碑',
        assigned_to_ids: '指派人',
        paix: '排序'
      });
      this.state.select_params = {
        status_type: type,
        search: undefined,
        page: 1,
        limit: 15,
      };
      this.getIssueList();
  }}


  islogin() {
    const { projectsId } = this.props.match.params;
    if (this.props.checkIfLogin() === false) {
      this.props.showLoginDialog()
      return
    } else {
      this.props.history.push(`/projects/${projectsId}/merge/new`);
    }
  }
  render() {
    const { issue_chosen, issues, limit, page, search_count, data, isSpin, status_type, select_params } = this.state;
    const menu = (
      <Menu onClick={(e) => this.getMenu(e)}>
        <Menu.Item key={"created_on-desc"} value="desc">
          最新创建
        </Menu.Item>
        <Menu.Item key={"created_on-asc"} value="asc">
          最早创建
        </Menu.Item>
        <Menu.Item key={"updated_on-desc"} value="desc">
          最新更新
        </Menu.Item>
        <Menu.Item key={"updated_on-asc"} value="asc">
          最早更新
        </Menu.Item>
      </Menu>
    );

    const Paginations = (
      <React.Fragment>
        {
          search_count > limit ?
            <div className="mt30 mb50 edu-txt-center">
              <Pagination simple defaultCurrent={page} total={search_count} pageSize={limit} onChange={this.ChangePage}></Pagination>
            </div> : ""
        }
      </React.Fragment>
    )
    return (
      <div className="main">
        <div className="topWrapper" style={{ borderBottom: "none" }}>
          <p className="topWrapper_type">
            <li className={status_type === "1" ? "active" : ""} onClick={() => this.openorder("1")}>{data && data.open_count ? data.open_count : 0}个开启中</li>
            <li className={status_type === "2" ? "active" : ""} onClick={() => this.openorder("2")}>{data && data.close_count ? data.close_count : 0}个已关闭</li>
          </p>

          <div className="topWrapper_select">
            <div>
              <Search
                placeholder="搜索"
                enterButton
                onSearch={this.searchFunc}
                style={{ width: 300 }}
              />
            </div>
            <a className="topWrapper_btn ml10" onClick={() => this.islogin()}>创建合并请求</a>
          </div>
        </div>
        <div className="f-wrap-between mb20">
          <div></div>
          <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.issue_version, '里程碑', 'fixed_version_id')} trigger={['click']} placement="bottomCenter">
                <span>{this.state.fixed_version_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={menu} trigger={['click']} placement="bottomCenter">
                <span>{this.state.paix}<Icon type="caret-down" className="ml5" /></span>
              </Dropdown>
            </li>
          </ul>
        </div>
        {
          data && data.search_count && data.search_count > 0 ?
            <div>
              <Spin spinning={isSpin}>
                <OrderItem issues={issues} search_count={search_count} page={select_params.page} limit={select_params.limit} {...this.props} {...this.state}></OrderItem>
                {Paginations}
              </Spin>
            </div>
            :
            <NoneData _html="暂时还没有相关数据哦!" />
        }

      </div>
    )
  }
}
export default merge;

