import React, { useEffect, useState } from 'react';
import { FlexAJ  } from '../Component/layout';
import { Divider } from 'antd';
import axios from 'axios';

function LanguagePower({owner,projectsId}){
  const [ array , setArray ] = useState(undefined);


  useEffect(()=>{
    getData();
  },[])

  function getData(){
    const url = `/${owner}/${projectsId}/languages.json`;
    axios.get(url).then(result=>{
      if(result){
        let languages = result.data;
        if(languages){
          let arr = [];
          Object.keys(languages).map((item,key)=>{
            arr.push({name:item,percent:languages[item],color:getColor()});
          })
          setArray(arr);
        }
      }
    }).catch(error=>{})
  }

  // useEffect(()=>{
  //   if(languages){
  //     let arr = [];
  //     Object.keys(languages).map((item,key)=>{
  //       arr.push({name:item,percent:languages[item],color:getColor()});
  //     })
  //     setArray(arr);
  //   }
  // },[languages])

   function getColor(){
      let str = "#";
      let arr = ["1","2","3","4","4","5","6","7","8","9","a","b","c","d","e","f"];
      for(var i=0;i<6;i++){
        let num = parseInt(Math.random() * 16);
        str+=arr[num];
      }
      return str;
    }
  return(
    (array && array.length > 0) ?
    <div>
      <Divider />
      <p className="font-16 color-ooo aboutSubTitle">开发语言</p>
      <div className="progress">
        {
          array && array.map((item,key)=>{
            return(
              <span style={{width:item.percent,backgroundColor:item.color}}></span>
            )
          })
        }
      </div>
      {
        array && array.length > 0 &&
        <FlexAJ className="progresstip">
          {
            array.map((item,key)=>{
              return(
                <span><i className="zero" style={{backgroundColor:`${item.color}`}}></i><span>{item.name}</span><span>{item.percent}</span></span>
              )
            })
          }
        </FlexAJ>
      }
    </div>:""
  )
}
export default LanguagePower;