import React from 'react';
import { getImageUrl } from 'educoder';
import gold from '../Img/gold.png';
import { Link } from "react-router-dom";
import Copy from '../Component/copy';
import { Tooltip } from 'antd';


// issue列表显示
function Datas({checkbox ,item , projectsId,owner}){
  
  function statusTag(name){
    switch (name) {
      case "低":
        return "status low";
      case "正常":
        return "status normals";
      case "高":
        return "status hight";
     default:
        return "status urgent";
    }
  }

  function renderName(list){
    let l = list.map(i=>{return i.name});
    return l.join(",");
  }

  return(
      <div>
        <div className="issuedetail">
          {checkbox}
          <div style={{flex:1}}>
            <div className="idetails">
                <span className={statusTag(item.priority_name)}>{item.priority_name}</span>
                {/* <img src={issue} alt="" width="16px" className="mr5" /> */}
                <Link to={`/${owner}/${projectsId}/issues/${item.project_issues_index}`} style={{maxWidth:`${item.tags ? 735 - item.tags.length*120 : 735}px`}} title={item.subject}>{item.subject}</Link>
                {
                  item.tags && item.tags.length>0?
                    item.tags.map((i,k)=>{
                      return(
                        <span style={{backgroundColor: `${i.color}`}} className="ml8 tagscolor task-hide" title={i.name}>{i.name}</span>
                      )
                    })
                  :""
                }
            </div>
            <div>
              <div className="infos">
                <div className="ilog">
                  { item.project_issues_index && 
                    <Copy value={`/${owner}/${projectsId}/issues/${item.project_issues_index}`}><span className="number">#{item.project_issues_index}</span></Copy>
                  }
                </div>
                <Link to={`/${item.author && item.author.login}`}><i className="iconfont icon-chengyuan2 mr3 font-12" style={{color:'#898d9d'}}></i></Link>
                <span className="mr12"><Link style={{color:"#898d9d"}} to={`/${item.author && item.author.login}`}>{item.author && item.author.name}</Link></span>
                <span className="mr12">{item.created_at} 发布</span>
                <span className="mr20">{item.updated_at}更新</span>
                {item.blockchain_token_num && <span className="mr30"><img src={gold} alt="" width="13px" className="mr3"/>{item.blockchain_token_num}</span>}
                {item.milestone_name && 
                  <Link to={`/${owner}/${projectsId}/milestones/${item.milestone_id}`} onClick={()=>{window.scrollTo(0,0)}} style={{maxWidth:item.blockchain_token_num ? "261px":"340px",color:"#898d9d"}} title={item.milestone_name} className="task-hide">
                    <i className="iconfont icon-lichengbeiicon1 font-12 mr3"></i>
                    {item.milestone_name}
                  </Link> 
                }
              </div>
            </div>
          </div>
        </div>
        <div className="issuecondition">
          {
            item.assigners && item.assigners.length > 0 ?
            <Tooltip title={renderName(item.assigners)} placement="bottomRight">
              <div className={item.assigners.length > 1 ?"principal hovers":"principal"}>
                {/* {
                  item.assigners.map((i,k)=>{
                    return(
                      k<5 && <Link to={`/${i.login}`} style={{right:`${(item.assigners.length-k-1)*(22-7)}px`,zIndex:k+1}}><img src={getImageUrl(i.image_url)} alt="" /></Link>
                    )
                  })
                } */}
                <span className="task-hide" style={{wordBreak:'break-all'}}>{renderName(item.assigners)}</span>
              </div>
            </Tooltip>
            :""
          }
          <div style={{color:item.status_name === "已解决" ?"#28bd6c":'#40424a'}}>{item.status_name}</div>
          <div className="commentnum">
            <Link to={`/${owner}/${projectsId}/issues/${item.project_issues_index}#commentList`}><i className="iconfont icon-a-xiaoxi1 mr5 font-15"></i>{item.comment_journals_count}</Link>
          </div>
        </div>
      </div>
  )
}
export default Datas;