import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Dropdown, Icon, Menu, Pagination, Popconfirm, Spin, Button, Tooltip } from 'antd';
import emp from '../../forge/Issues/Img/emp.png';
import axios from 'axios';
import './milepost.scss';
class Milepost extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: undefined,
      limit: 10,
      page: 1,
      order_type: undefined,
      // 里程碑 开启/关闭 状态
      status: 'open',
      order_name: undefined,
      spinings: true,
      // tooltip显隐
      visible: false
    }
  }
  componentDidUpdate(){
    this.updateDocumentTitle();
  }

  componentDidMount = () => {
    this.getList(1, this.state.limit, this.state.status);
    this.updateDocumentTitle();
  }

  // 更新网页标题
  updateDocumentTitle(){
    const {projectDetail} = this.props;
    if(projectDetail){
      const { author, name} = projectDetail;
      document.title = `里程碑-${author.name}/${name}`;
    }
  }

  getList = (page, limit, category, sort_by, sort_direction) => {
    const { projectsId ,owner } = this.props.match.params;
    const url = `/v1/${owner}/${projectsId}/milestones.json`;
    axios.get(url, {
      params: {
        page, limit: limit, category, sort_by, sort_direction
      }
    }).then((result) => {
      if (result) {
        this.setState({
          data: result.data,
          spinings: false
        })
      }
    }).catch((error) => {
      console.log(error);
    })
  }

  opneMilelist = (type) => {
    if (type) {
      this.setState({
        status: type === 1 ? 'open' : 'closed'
      })
      this.getList(1, this.state.limit, type === 1 ? 'open' : 'closed', this.state.order_name, this.state.order_type);
    }
  }

  updatestatusemile = (status, arr) => {
    const { projectsId , owner } = this.props.match.params;
    const url = `/${owner}/${projectsId}/milestones/${arr.id}/update_status.json`;
    axios.post(url, {
      project_id: projectsId,
      id: arr.id,
      status: status
    }).then(result => {
      if (result) {
        this.getList(1, this.state.limit, this.state.status, this.state.order_name, this.state.order_type);
        const { getDetail } = this.props;
        getDetail && getDetail();
      }
    }).catch(error => {
      console.log(error);
    })
  }

  closemile = (arr) => {
    const { projectsId , owner } = this.props.match.params;
    const url = `/${owner}/${projectsId}/milestones/${arr.id}.json`;
    axios.delete(url, {
      data: {
        project_id: projectsId,
        id: arr.id
      }
    }).then((result) => {
      if (result) {
        this.getList(1, this.state.limit, this.state.status, this.state.order_name, this.state.order_type);
        const { getDetail } = this.props;
        getDetail && getDetail();
      }
    }).catch((error) => {
      console.log(error);
    })
  }

  ChangePage = (page) => {
    document.body.scrollIntoView();
    this.setState({
      page
    })
    this.getList(page, this.state.limit, this.state.status, this.state.order_name, this.state.order_type);
  }

  // 排序
  arrayList = (e) => {
    const name = e.key !== 'order' ? e.key : undefined;
    const type = e.item.props.value !== 'order' ? e.item.props.value : undefined;
    this.setState({
      order_name: name,
      order_type: type
    })
    this.getList(1, this.state.limit, this.state.status, name, type);
  }

  // 分页组件
  onShowSizeChange = (current, pageSize) =>{
    this.setState({
      page: 1,
      limit: pageSize
    })
    this.getList(1, pageSize, this.state.status, this.state.order_name, this.state.order_type);
  }

  // tooltip判断是否显示
  // onVisibleChange = (visible, value) => {
  //   console.log('visible, value', visible, value);
  //   this.setState({
  //     visible: value.length >24 ? visible : false
  //   })
  // }

  render() {
    const { data, limit, page, spinings, status, order_name, order_type, visible } = this.state;
    const { projectsId , owner } = this.props.match.params;
    const { isManager, isDeveloper} = this.props;
    const menu = (
      <Menu className="orderCondition milepostSort" onClick={this.arrayList}>
        <Menu.Item key={'order'} value={'order'}>默认排序</Menu.Item>
        <Menu.Item key={'effective_date'} value="desc">到期日从后到先</Menu.Item>
        <Menu.Item key={'effective_date'} value="asc">到期日从先到后</Menu.Item>
        <Menu.Item key={'percent'} value="asc">完成度从低到高</Menu.Item>
        <Menu.Item key={'percent'} value="desc">完成度从高到低</Menu.Item>
        <Menu.Item key={'issues_count'} value="desc">任务从多到少</Menu.Item>
        <Menu.Item key={'issues_count'} value="asc">任务从少到多</Menu.Item>
      </Menu>
    )

    // 排序字段 选中显示文本
    const sortByMile = {
      'effective_date':{
        'desc': '到期日从后到先',
        'asc': '到期日从先到后'
      },
      'percent':{
        'desc': '完成度从低到高',
        'asc': '完成度从高到低'
      },
      'issues_count':{
        'desc': '任务从多到少',
        'asc': '任务从少到多'
      },
      'order':{
        'order': '排序'
      }
    }

    return (
      <Spin spinning={spinings}>
        <div className="main milepostBox">
          {/* 创建里程碑按钮 */}
          {/* <div className='createMilepost mb25'>
            {(isManager || isDeveloper) && <Button type='primary' onClick={() => {this.props.history.push(`/${owner}/${projectsId}/milestones/new`)}} className='createMilepostBtn'>+ 创建里程碑</Button>}
          </div> */}
          {/* 里程碑列表表头 */}
          <div className='milepostHead flexSpaceBetween'>
            <div>
              <span className={`pointBox font-15 postStatus ${status === "closed" ? "" : "active"}`} onClick={() => this.opneMilelist(1)}>开启中<span className='statusCount font-13'>{data && data.opening_milestone_count}</span></span>
              <span className={`pointBox ml35 font-15 postStatus ${status === "closed" ? "active" : ""}`} onClick={() => this.opneMilelist(2)}>已关闭<span className='statusCount font-13'>{data && data.closed_milestone_count}</span></span>
            </div>
            <div>
            {(isManager || isDeveloper) && <Button type='primary' onClick={() => {this.props.history.push(`/${owner}/${projectsId}/milestones/new`)}} className='createMilepostBtn mr20'>+ 创建里程碑</Button>}
            <Dropdown className="topWrapperSelect" overlay={menu} trigger={['click']} placement="bottomCenter">
              <span className='pointBox'>{order_name ? sortByMile[order_name][order_type] : '排序'}<Icon type="caret-down" className="ml5"/></span>
            </Dropdown>
            </div>
          </div>
          {/* 里程碑列表展示 */}
          {data && data.milestones &&  data.milestones.length === 0 && <div className="milestonesNoDate"><img src={emp} alt=""/></div>}
          {data && data.milestones && data.milestones.length > 0 && <div className='milepostList'>
            {data.milestones.map((item, key)=>{
              return <div className='flexSpaceBetween milepostItemBox'>
                <div>
                  <div className="flexSpaceBetween">
                    <i className="iconfont icon-lichengbeiicon1 font-12 mr10 primaryColor"></i>
                    <Link to={`/${owner}/${projectsId}/milestones/${item.id}`} className="font-16 task-hide milepostInfo">{item.name}</Link>
                  </div>
                  {item.description && item.description.length > 44 ? <Tooltip title={item.description} placement={'topLeft'} overlayStyle={{width: '600px'}}><span className='color-grey-89 task-hide milepostInfo'>{item.description}</span></Tooltip> : <span className='color-grey-89 milepostInfo'>{item.description}</span>}
                </div>
                <div className="flexSpaceBetween actionMileBox">
                  <div className="grid-item effectiveDate">
                    <i className={`iconfont icon-a-31shijian font-15 mr10 ${item.effective_date ? "effectiveDate" : "color-grey-89"}`}></i>
                    <span className={`${item.effective_date ? "" : "color-grey-89"} ${item.effective_date && status !== 'closed' && new Date().getTime()-new Date(`${item.effective_date} 24:0`).getTime() > 0 ? 'outTime' : ''}`}>{item.effective_date || "暂无截止时间"}</span>
                  </div>
                  <div className="mr10 effectiveDate">
                    <span>{item.opened_issues_count || 0}个开启</span>
                    <span className='color-grey-89'> | </span>
                    <span>{item.close_issues_count || 0}个关闭</span>
                  </div>
                  {
                    (isManager || isDeveloper) && <div className="flexSpaceBetween">
                      <Link to={`/${owner}/${projectsId}/milestones/${item.id}/edit`} className="primaryColor"><i className="iconfont icon-a-bianji12 font-14 mr5 primaryColor"></i>编辑</Link>
                      <div className="grid-item ml15">
                        <i className={`effectiveDate iconfont font-14 mr5 ${item.status === "closed" ? "icon-gouxuan":"icon-shanchu8"}`}></i>
                        <a onClick={() => this.updatestatusemile(item.status === "closed" ? "open" : "closed", item)} className="effectiveDate">{item.status === "closed" ? "开启" : "关闭"}</a>
                      </div>
                      <div className="grid-item ml15">
                        <i className="iconfont icon-fuzhi-shanchu font-14 mr5 colorRed" ></i>
                        <Popconfirm placement="bottom" title={'是否删除里程碑？'} okText="是" cancelText="否" onConfirm={() => this.closemile(item)}>
                          <a className="colorRed">删除</a>
                        </Popconfirm>
                      </div>
                    </div>
                  }
                </div>
              </div>
            })}
          </div>}
          {
            data && data.total_count > limit ?
              <div className="mt30 mb50 edu-txt-right">
                <Pagination current={page} total={data && data.total_count} pageSize={limit} onChange={this.ChangePage} showQuickJumper showSizeChanger onShowSizeChange={this.onShowSizeChange}></Pagination>
              </div> : ""
          }
        </div>
      </Spin>
    )
  }
}
export default Milepost;