import React , {Component} from 'react';

import axios from 'axios';

import{ Form , Table , Spin } from 'antd'
import { getImageUrl } from 'educoder';
import {Link} from "react-router-dom";
import { truncateCommitId} from '../common/util';
class MergeSubmit extends Component{
  constructor(props){
    super(props);
    this.state={
      data:undefined,
      isShow:false,
      imgsrc:'',
      journalsdata:undefined,
      //图片区域是否显示 none 隐藏 block 显示
      display:'none',
      titledisplay:'none',
      countvalue:'',
      //是否需要编辑
      isedit:'block',
      limit:50,
      page:1,
      titledata:undefined,
      isSpin:true
    }
  }
  
  componentDidMount=()=>{
    const { data } = this.props;
    const { page , limit } = this.state;
    this.setState({
      isSpin:true
    })
    this.getCommitList( data && data.pull_request.base , page , limit );
  }

  getDetail=()=>{
    const { projectsId , mergeId, owner} = this.props.match.params;
    const url = `/projects/${owner}/${projectsId}/pull_requests/${mergeId}.json`;
    axios.get(url).then((result)=>{
      if(result){
        this.setState({
          data:result.data,
        })
        
      }
    }).catch((error)=>{
      console.log(error);
    })
  }

 //获取提交列表
  getCommitList=(branch , page , limit)=>{
    const { projectsId , owner } = this.props.match.params;
    const url = `/${owner}/${projectsId}/commits.json`;
    axios.get(url,{
      params:{
        sha:branch,
        page,
        limit
      }
    }).then((result)=>{
      if(result){
        const array = [];
        result.data && result.data.commits.length > 0 && result.data.commits.map((item,key)=>{
          array.push({
            name:item.author && item.author.name,
            login: item.author && item.author.login,
            image_url:item.author && item.author.image_url,
            sha:item.sha,
            time_from_now:item.time_from_now,
            message:item.message
          })
        })
        this.setState({
          titledata:array,
          dataCount:result.data.total_count,
          isSpin:false
        })
      }
    }).catch((error)=>{console.log(error)})
  }

  title =()=>{
    return(
      <div className="f-wrap-between" style={{alignItems:"center"}}>
        <span className="font-16">提交列表</span>
      </div>
    )
  }

  render(){
    const { projectsId , owner } = this.props.match.params;
    const { titledata } = this.state;
    const columns=[{
        title:"作者",
        dataIndex: 'name',
        width:"10%",
        render: (text,item) => (
          <span className="f-wrap-alignCenter">
            <Link to={`/${item.login}`} className="show-user-link">
                <img src={getImageUrl(`/${item.image_url}`)} alt="" width="28px" height="28px" className="mr3 radius"/>
          <label className="hide-1" style={{maxWidth:"75px",verticalAlign:'middle'}}>{text}</label>
          </Link>
          </span>
        ),
      },{
        title:"SHA",
        dataIndex: 'sha',
        render: (text) => (
          <Link to={`/${owner}/${projectsId}/commits/${truncateCommitId(`${text}`)}`} className="commitKey">{text}</Link>
        )
      },{
        title:"备注",
        dataIndex: 'message',
        render: (text) => (
          <span>{text}</span>
        )
      },{
        title:"提交时间",
        className:"edu-txt-right",
        dataIndex: 'time_from_now',
        render: (text) => (
          <span>{text}</span>
        )
      }]

    return(
      <Spin spinning={this.state.isSpin}>
        <Table
          className="mt20 wrap-commit-table"
          columns={columns}
          dataSource={titledata}
          showHeader={false}
          size="small"
          pagination={false}
          title={() => this.title()}
        />
      </Spin>
    )
  }
}

const WrappedMergeSubmitForm = Form.create({ name: 'MergeSubmitForm' })(MergeSubmit);
export default WrappedMergeSubmitForm;