import React, { useEffect, useState } from 'react';
import sonar from '../Images/sonar.png';
import { FlexAJ } from '../Component/layout';
import { Button } from 'antd';
import './index.scss';
import axios from 'axios';

function Index(props) {
  const [ spining , setSpining ] = useState(false);
  const [ data , setData ] = useState(null);

  const permission = props.projectDetail && props.projectDetail.permission;
  const { owner , projectsId } = props.match.params;

  useEffect(()=>{
    if(permission && permission!=="Reporter"){
      run();
    }
  },[permission])

  function startCheck() {
    setSpining(true);
    run();
  }

  function run() {
    const url = `/${owner}/${projectsId}/sonarqube.json`;
    axios.get(url).then(result=>{
      if(result){
        setSpining(false);
        setData(result.data);
      }
    }).catch(error=>{setSpining(false);})
  }

  return(
    <div className="sonarBox">
      <FlexAJ>
        <img src={sonar} alt=""/>
        <Button type={"primary"} loading={spining} onClick={startCheck} disabled={permission !== "Admin" && permission !== "Owner" && permission !== "Manager"}>{spining ? "分析中":"质量分析"}</Button>
      </FlexAJ>
      <div className="sonarDesc">
        <p>1. 基于 Sonar 的代码质量分析，支持对项目进行文件数、重复率统计、代码逻辑缺陷扫描等功能，并给出对应解决报告;</p>
        <p>2. 目前支持 Java、JavaScript、C++、Go、Python、PHP、Ruby、Groovy、Lua、TypeScript、Web、XML；</p>
        <p>3. 默认支持代码文本格式全为 UTF-8，其他编码可能会产生乱码；</p>
        <p>4. 仅保存最近一次分析结果;</p>
      </div>
      {
        data && data.length>0 && data.map((i,k)=>{
          return(
            <div className="sonarData">
              <p className="color-grey-9 font-16">分支：<span className="color-grey-6">{i.branch_name}</span></p>
              <div>
                <span className="color-grey-9 mr30">开始时间：<span className="color-grey-6">{i.created_at}</span></span>
                <span className="color-grey-9">结束时间：<span className="color-grey-6">{i.updated_at}</span></span>
              </div>
              <ul className="sonarList">
                <li>
                  <span>{i.bug_num || "0"}</span>
                  <span>bugs</span>
                </li>
                <li>
                  <span>{i.loopholes || "0"}</span>
                  <span>漏洞</span>
                </li>
                <li>
                  <span>{i.repetition_rate || "--"}</span>
                  <span>重复</span>
                </li>
                <li>
                  <span>{i.file_num || "0"}</span>
                  <span>文件数</span>
                </li>
              </ul>
            </div>
          )
        })
      }
    </div>
  )
}
export default Index;