import React from 'react';
import './index.less';
import PieChart from '@src/components/PieChart';

function makePie(text, subtext, color, data) {
  return {
    title: {
      text,
      textAlign: 'center',
      textVerticalAlign: 'middle',
      textStyle: { fontSize: 14, color: '#686872' },
      subtext,
      subtextStyle: { fontSize: 16, color: '#303036' },
      top: '28%',
      left: '45%',
    },
    color,
    series: [
      {
        type: 'pie',
        radius: ['85%', '100%'],
        hoverAnimation: false,
        animation: false,
        label: {
          show: false,
        },
        data,
      },
    ],
  };
}
export default function Ratio(props) {
  const { text, subtext, values, size = 'basic' } = props;
  return (
    <div className={`ratio-pie ${size}`}>
      <PieChart
        width={size === 'small' ? 80 : 110}
        height={size === 'small' ? 80 : 110}
        option={makePie(text, subtext, values.map(item => item.color), values.map(item => item.value))}
      />
      <div className="label-list">
        {values.map(item => {
          return (
            <div className="item">
              <i style={{ backgroundColor: item.color }} />
              {item.label}
            </div>
          );
        })}
      </div>
    </div>
  );
}