/*
 * @Author: code4eat awesomedema@gmail.com
 * @Date: 2024-07-02 17:50:08
 * @LastEditors: code4eat awesomedema@gmail.com
 * @LastEditTime: 2024-08-29 14:49:54
 * @FilePath: /MediScreen/src/components/BarChartComponent/index.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useEffect, useState } from 'react';
import './style.less';

interface BarChartItem {
  label: string;
  value: number;
  unit: string;
}

interface BarChartComponentProps {
  data: BarChartItem[];
}

const maxBarWidth = 200; // 最大条形图宽度

const BarChartComponent: React.FC<BarChartComponentProps> = ({ data }) => {
  const [animatedWidths, setAnimatedWidths] = useState<number[]>([]);

  useEffect(() => {
    // 设置初始宽度为0
    setAnimatedWidths(new Array(data.length).fill(0));
    // 模拟数据加载并设置实际宽度
    setTimeout(() => {
      setAnimatedWidths(data.map(item => (item.value / Math.max(...data.map(d => d.value))) * maxBarWidth));
    }, 100);
  }, [data]);

  return (
    <div className="bar-chart">
      {data.map((item, index) => (
        <div className="bar-chart-item" key={index}>
          <div className="bar-chart-label">{item.label}</div>
          <div className="bar-chart-bar-wrapper">
            <div
              className="bar-chart-bar"
              style={{ width: `${animatedWidths[index]}px` }}
            ></div>
            <div className="bar-chart-value">
              {item.value.toLocaleString()}
            </div>
          </div>
        </div>
      ))}
    </div>
  );
};

export default BarChartComponent;
