import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { Popconfirm, Text } from 'antd';

class OrderItem extends Component {
  set_issue_tags = (issue_tags) => {
    if (issue_tags && issue_tags.length > 0) {
      return (
        issue_tags.map((item, key) => {
          return (
            <span className="issue-tag-show" style={{ background: item.color }}>{item.name}</span>
          )
        })
      )
    } else {
      return ("--")
    }
  }

  render() {
    const { data } = this.props;
    const { projectsId } = this.props.match.params;

    const renderList = () => {
      data.versions.map((item, key) => {
        return (
          <div style={{ display: 'block' }}>
            <div className="milepostdiv">
              <div className="milepostwidth">
                <div className="grid-item width100">
                  <i className="iconfont icon-lubiaosignpost3 font-12 mr3"></i>
                  <Link to={`/projects/${projectsId}/orders/${item.id}/MilepostDetail`} className="font-16">{item.name}</Link>
                </div>

              </div>
            </div>
            <div className="milepostdiv" style={{ marginTop: 5 }}>
              <div className="milepostrighe">

                <div className="grid-item mr10">
                  <i className="iconfont icon-rili font-14 mr5">
                  </i>
                  {
                    item.effective_date ?
                      <span className="color-red">{item.effective_date}</span>
                      :
                      <span className="color-grey-c">暂无截止时间</span>
                  }
                </div>
                <div className="grid-item mr10 color-grey-9">
                  <i className="iconfont icon-issue font-14 mr5"></i>
                  <span>
                    {item.open_issues_count}个开启
                      </span>
                </div>
                <div className="grid-item mr10 color-grey-9">
                  <i className="iconfont icon-shanchudiao font-14 mr5"></i>
                  <span>
                    {item.close_issues_count}个关闭
                      </span>
                </div>
              </div>
              {
                data && data.user_admin_or_member ?
                  <div className="milepostleft">
                    <div className="grid-item mr15 color-grey-9">
                      <i className="iconfont icon-bianji3 font-14 mr5"></i>
                      <Link to={`/projects/${projectsId}/orders/${item.id}/meilpost`} className="color-grey-9">编辑</Link>
                    </div>
                    <div className="grid-item mr15 color-grey-9">
                      <i className="iconfont icon-yiguanbi1 font-14 mr5"></i>
                      <a onClick={() => this.updatestatusemile(this.state.status === "closed" ? "open" : "closed", item)} className="color-grey-9">{this.state.status === "closed" ? "开启" : "关闭"}</a>
                    </div>
                    <div className="grid-item mr15 color-grey-9">
                      <i className="iconfont icon-lajitong font-14 mr5" ></i>
                      <Popconfirm placement="bottom" title={'是否删除里程碑？'} okText="是" cancelText="否" onConfirm={() => this.closemile(item)}>
                        <a className="color-grey-9">删除</a>
                      </Popconfirm>
                    </div>

                  </div>
                  : ''
              }

            </div>
            <div className="milepostdiv" style={{ marginTop: 5 }}>
              <div className="textwidth">
                <Text
                  type="secondary"
                  ellipsis={{ rows: 30, expandable: false, onExpand: Function }}
                >
                  {item.description}</Text>
              </div>
            </div>
          </div>
        )
      })
    }
    return (
      <div>
        {renderList()}
      </div>
    )
  }
}

export default OrderItem;