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

import axios from "axios";
import CheckProfile from '../Component/ProfileModal/Profile';

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: "排序",
      priority_ids: "优先级",
      select_params: {
        status_type: "1", //开启中和关闭中，默认为开启中的
        assigned_to_id: undefined, // 指派人
        fixed_version_id: undefined,
        priority_id: undefined,
        order_name: undefined,
        order_type: undefined,
        search: undefined,
        page: 1,
        limit: 15,
      },
    };
  }

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

  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 = () => {
    const { select_params } = this.state;
    const { projectsId , owner } = this.props.match.params;
    const url = `/${owner}/${projectsId}/pulls.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 className="orderCondition">
        <Menu.Item key={"all"} onClick={(e) => this.getOption(e, id, name)}>
          {name}
        </Menu.Item>
        {array && array.length > 0 && array.map((item, key) => {
            return (
              ((!item.permission) || (item.permission && item.permission !== "Reporter")) &&
              <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) => {
    this.setState({
      isSpin: true,
    });
    this.setState({
      status_type: type,
      issue_tag_ids: "标记",
      fixed_version_ids: "里程碑",
      assigned_to_ids: "审查人员",
      paix: "排序",
      priority_ids: "优先级",
    });
    this.state.select_params.status_type = type;
    this.state.select_params.page=1;
    this.state.select_params.limit=15;
    
    this.getIssueList();
  };

  checkOperation() {
    const { projectsId,owner } = this.props.match.params;
    this.props.history.push(`/${owner}/${projectsId}/compare/master...master`);
  }
  render() {
    const { projectsId , owner } = this.props.match.params;
    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>
    );
    return (
      <div className="main" style={{padding:"0px"}}>
        <div className="topWrapper" style={{borderBottom:"none",padding:"20px"}}>
          <div className="target-detail-search">
            <Search
              placeholder="输入关键字搜索合并请求"
              enterButton
              onSearch={this.searchFunc}
              style={{ width: 300 }}
            />
          </div>
          {
            data && data.user_admin_or_developer &&
            <CheckProfile {...this.props} className="topWrapper_btn ml10" sureFunc={() => this.checkOperation()}>
              +&nbsp;新建合并请求
            </CheckProfile>
          }
        </div>
        <div className="f-wrap-between screenWrap">
          <div className="df">
            <ul className="searchBanner">
              <li
                className={!status_type ? "active" : ""}
                onClick={() => this.openorder(undefined)}
              >
                <label>搜索结果</label>
                <span>{data && data.search_count}</span>
              </li>
              <li
                className={status_type === "1" ? "active" : ""}
                onClick={() => this.openorder("1")}
              >
                <i className="iconfont icon-hebingqingqiu1 font-14 mr3 i_open"></i>
                <label>开启的</label>
                <span>{data && data.open_count}</span>
              </li>
              <li
                className={status_type === "11" ? "active" : ""}
                onClick={() => this.openorder("11")}
              >
                <i className="iconfont icon-hebingqingqiu1 font-14 mr3 i_merged"></i>
                <label>已合并</label>
                <span>{data && data.merged_issues_size}</span>
              </li>
              <li
                className={status_type === "2" ? "active" : ""}
                onClick={() => this.openorder("2")}
              >
                <i className="iconfont icon-hebingqingqiu1 font-14 mr3 i_closed"></i>
                <label>已拒绝</label>
                <span>{data && data.close_count}</span>
              </li>
            </ul>
          </div>
          <ul className="topWrapper_select">
            <li>
              <Dropdown
                className="topWrapperSelect"
                overlay={this.renderMenu(
                  issue_chosen && issue_chosen.priority,
                  "优先级",
                  "priority_id"
                )}
                trigger={["click"]}
                placement="bottomCenter"
              >
                <span>
                  {this.state.priority_ids}
                  <Icon type="caret-down" className="ml5" />
                </span>
              </Dropdown>
            </li>
            <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,
                  "审查人员",
                  "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.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={menu}
                trigger={["click"]}
                placement="bottomCenter"
              >
                <span>
                  {this.state.paix}
                  <Icon type="caret-down" className="ml5" />
                </span>
              </Dropdown>
            </li>
          </ul>
        </div>
        <div style={{minHeight:"470px"}}>
          <Spin spinning={isSpin}>
            {data && data.search_count && data.search_count > 0 ? (
              <div>
                <MergeItem
                  issues={issues}
                  search_count={search_count}
                  page={select_params.page}
                  limit={select_params.limit}
                  project_name={data.project_name}
                  project_author_name={data.project_author_name}
                  {...this.props}
                  {...this.state}
                  user_admin_or_developer={data && data.user_admin_or_developer}
                ></MergeItem>
              </div>
            ):""}
            {search_count > select_params.limit ? (
              <div className="mt30 mb50 edu-txt-center">
                <Pagination
                  simple
                  current={select_params.page}
                  total={search_count}
                  pageSize={select_params.limit}
                  onChange={this.ChangePage}
                ></Pagination>
              </div>
            ) : (
              ""
            )}
            { data && data.issues && data.issues.length === 0 ? <NoneData _html="暂时还没有相关数据!" projectsId={projectsId} owner={owner} /> :""}
          </Spin>
        </div>
      </div>
    );
  }
}
export default merge;
