import {Pie} from "@ant-design/charts";
import React from "react";


const ProgressItem = (props: any)=>{
  const handle = (list: any)=>{
    const newList: any = []
    if (list && list.length>0){
      list.forEach((item: any)=>{
        item.value = Number(item.value.toFixed(2))
        newList.push(item)
      })
    }
    return newList
  }
  const config = {
    appendPadding: 10,
    data:handle(props.data),
    angleField: 'value',
    colorField: 'type',
    radius: 1,
    innerRadius: 0.8,
    label: {
      type: 'inner',
      offset: '-50%',
      content: '',
      style: {
        textAlign: 'center',
        fontSize: 14,
      },
    },
    interactions: [
      {
        type: 'element-selected',
      },
      {
        type: 'element-active',
      },
    ],
    pieStyle:({type})=>{
      if (type==='完成'){
        return {
          fill: props.data[0].value>=100?'lightgray':'#1890FF'
        }
      }
        return {
          fill:  '#E6E9EC'
        }

    },
    // background:['#1890FF','#E6E9EC']

    tooltip: {
      customContent: (title, params) => {
        return (
          <div style={{padding: '10px'}}>
            <div style={{marginTop:'8px'}}>
              {
                params && params.length>0?
                  params.map((item: any)=>{
                    return (
                      <div style={{marginBottom:'8px',display:'flex',alignItems:'center',padding:'0 8px'}}>
                        <div style={{width:'8px',marginRight:'4px',height:'8px',background:item.color,borderRadius:'50%'}}></div>
                        <span style={{display:'inline-block',width:'50px',textAlign:'left'}}>{item.name}:</span>
                        <span style={{display:'inline-block',width:'20px',textAlign:'right',whiteSpace:'nowrap'}}>{item.value}%</span>
                      </div>
                    )
                  })
                  :''
              }
            </div>

          </div>
        )
      }
    },
    legend: false,
    statistic: {
      title: false,
      content: {
        style: {
          whiteSpace: 'pre-wrap',
          overflow: 'hidden',
          fontSize:'14px',
          fontWeight:'normal',
          textOverflow: 'ellipsis',
        },
        content: `${props.grogress>100?'100':props.grogress.toFixed(2)}%\n完成度`,
      },
    },
  };
  return <Pie style={{width:'140px',height:'140px'}} {...config} />;
}
export default ProgressItem
