import React, { Component } from "react";
import { Link } from 'react-router-dom';
import NoneData from '../Nodata';
import './version.css';
import { getImageUrl } from 'educoder';
import axios from 'axios';

/**
 * issue_chosen:下拉的筛选列表,
 * data:列表接口返回的所有数据,
 * issues:列表数组,
 * isSpin:加载中,
 */
class version extends Component {
  constructor(props) {
    super(props);
    this.state = {
      issue_chosen: undefined,
      data: undefined,
      releases:undefined,
      issues: undefined,
      isSpin: false,
      search: undefined,
      search_count: undefined,
    }
  }

  componentDidMount = () => {
    this.getIssueList();
  }
  // 获取列表数据
  getIssueList = () => {
    const { projectsId, owner } = this.props.match.params;
    const url = `/${owner}/${projectsId}/releases.json`;
    axios.get(url).then((result) => {
      if (result) {
        this.setState({
          data: result.data,
          releases:result.data.releases,
          issues: result.data.issues,
          isSpin: false
        })
      }
    }).catch((error) => {
      console.log(error);
    })
  }

  // 显示版本描述
  showBody=(key,flag)=>{
    let { releases } = this.state;
    releases[key].bodyshow = !flag;
    this.setState({
      releases
    })
  }

  renderList = (releases) => {
    const { projectsId , owner } = this.props.match.params;
    if (releases && releases.length > 0) {
      return (
        <div>
        {
          releases.map((item, key) => {
            return (
              <div className="versionInfo" key={key}>
                <span className="versionInfo_left">
                  <span className={`${item.draft === "稳定" ?"versionTag green":"versionTag yellow"}`}>{item.draft}</span>
                  <span className="mt10">{item.created_at}</span>
                  <span className="color-grey-8">
                    <i className="iconfont icon-biaoqian3 mr3 font-14"></i>
                    {item.tag_name}
                  </span>
                </span>
                <div className="versionInfo_right">
                  <span className="versionName">
                    <span className="task-hide">{item.name}</span>
                    <Link to={`/projects/${owner}/${projectsId}/releases/${item.version_id}/update`} className="color-blue ml3 font-12">（编辑）</Link>
                  </span>
                  <span className="color-grey-3">
                    <i className={`${item.bodyshow ? "iconfont icon-sanjiaoxing-down color-grey-8 mr3 font-14":"iconfont icon-triangle color-grey-8 mr3 font-14"}`} onClick={()=>this.showBody(key,item.bodyshow)}></i>
                    {item.user_name}:<span className="color-grey-8">发布了这个版本，并在发布后提交给{item.target_commitish}</span>
                  </span>
                  {
                    item.bodyshow && <p className="mt10">{item.body}</p>
                  }
                  <p className="mt10 pl3">
                    <a href={item.tarball_url} style={{color:"#4CC1DA"}} className="mr30"><i className="iconfont icon-TAR font-18 mr5"></i>TAR</a>
                    <a href={item.zipball_url} style={{color:"#28BD6C"}}><i className="iconfont icon-ZIP font-18 mr5"></i>ZIP</a>
                  </p>
                </div>
              </div>
            )
          })
        }
        </div>
      )
    } else {
      return (
        <NoneData _html="暂时还没有相关数据哦!" />
      )
    }
  }

  render() {
    const { projectsId ,owner } = this.props.match.params;
    const { data , releases } = this.state

    return (
      <div className="main">
        <div className="topWrapper">
          <span className="font-18 color-grey-3">版本发布</span>
          {
            data && data.user_permission ?
              <Link to={`/projects/${owner}/${projectsId}/releases/new`} className="topWrapper_btn_new">+ 发布新版</Link>
              : ''
          }
        </div>
        <div className="releasesVersion">
          {this.renderList(releases)}
        </div>

      </div>
    )
  }
}
export default version;