import React,{useState , useEffect} from 'react';
import AgreementModal from './agreementModal';

function Main(props){
  const [ visible , setVisible ] =  useState(false);
  const { owner , projectsId } = props.match.params;
  const [ has_trace_user , setHas_trace_user ] = useState(false);

  const { current_user , resetUserInfo } = props;

  useEffect(()=>{
    if(current_user){
      setHas_trace_user(current_user.has_trace_user);
    }
  },[current_user])

  function onOk(){
    setVisible(false);
    resetUserInfo && resetUserInfo();
    props.history.push(`/${owner}/${projectsId}/server/1`);
  }

  function openDetail(){
    if(!has_trace_user){
      setVisible(true);
    }else{
      props.history.push(`/${owner}/${projectsId}/server/1`);
    }
  }
  return(
    <div>
      <AgreementModal visible={visible} onCancel={()=>setVisible(false)} onOk={onOk}/>
      <ul className="serverlist">
        <li>
          <span className="servername">
            <img src={require('./img/logo.png')} alt=""/>
            <a onClick={openDetail}>重晴鸟代码溯源系统</a>
          </span>
          <p className="task-hide-2 serverdesc">支持软件源代码的溯源分析、自主度评估、开源漏洞检测、开源许可证合规性分析等</p>
          <span className="serverbtn">
            <a onClick={openDetail} className="btnhover">查看详情</a>
          </span>
        </li>
      </ul>
    </div>
  )
}
export default Main;