import React, { useEffect, useRef } from 'react';
import './style.less';

const CustomComplexChart: React.FC = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (!canvas) return;

    const ctx = canvas.getContext('2d');
    if (!ctx) return;

    let animationId: number;
    let progress = 0;

    const draw = () => {
      // 获取设备像素比
      const dpr = window.devicePixelRatio || 1;
      // 设置画布的尺寸
      canvas.width = canvas.clientWidth * dpr;
      canvas.height = canvas.clientHeight * dpr;
      ctx.scale(dpr, dpr);

      // 清除画布
      ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);

      // 尺寸
      const chartWidth = canvas.clientWidth;
      const chartHeight = canvas.clientHeight;
      const leftPadding = chartWidth * 0.2;
      const rightPadding = chartWidth * 0.15;
      const bottomPadding = chartHeight * 0.2;
      const topPadding = chartHeight * 0.1;
      const totalBars = 19;
      const barWidth = (chartWidth - leftPadding - rightPadding) / (totalBars * 1.2);
      const barSpacing = barWidth * 0.2;
      const maxBarHeight = chartHeight - topPadding - bottomPadding;
      const maxDataValue = 250;

      const labels = ['1#', '2#', '3#', '4#', '5#', '6#', '7#', '8#', '9#', '10#', '11#', '12#', '13#', '14#', '15#', '16#', '17#', '18#', '19#'];
      const barData = [30, 100, 100, 50, 80, 100, 120, 100, 150, 200, 250, 100, 200, 180, 160, 150, 100, 80, 50];

      // 绘制y轴标签和网格线
      const yLabels = [0, 50, 100, 150, 200, 250];
      yLabels.forEach(value => {
        const y = chartHeight - bottomPadding - (value / maxDataValue) * maxBarHeight;
        // 网格线
        ctx.strokeStyle = '#3e4b5b';
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.moveTo(leftPadding, y);
        ctx.lineTo(chartWidth - rightPadding, y);
        ctx.stroke();
        // y轴标签
        ctx.fillStyle = '#FFFFFF';
        ctx.textAlign = 'right';
        ctx.font = `${chartHeight * 0.03}px Arial`;
        ctx.fillText(`${value}`, leftPadding - 10, y + 3);
      });

      // 绘制柱形图
      barData.forEach((value, index) => {
        const barHeight = (value / maxDataValue) * maxBarHeight * progress;
        const x = leftPadding + index * (barWidth + barSpacing);
        const y = chartHeight - bottomPadding - barHeight;

        // 创建渐变颜色
        const gradient = ctx.createLinearGradient(x, y, x, y + barHeight);
        if (index < 10) {
          gradient.addColorStop(0, 'rgba(77, 182, 225, 1)');
          gradient.addColorStop(1, 'rgba(77, 182, 225, 0)');
        } else {
          gradient.addColorStop(0, 'rgba(255, 215, 0, 1)');
          gradient.addColorStop(1, 'rgba(255, 215, 0, 0)');
        }

        // 绘制柱子
        ctx.fillStyle = gradient;
        ctx.fillRect(x, y, barWidth, barHeight);
        ctx.fillStyle = '#FFFFFF';
        ctx.textAlign = 'center';
        ctx.font = `${chartHeight * 0.03}px Arial`; // 增大字体
        ctx.fillText(`${value}`, x + barWidth / 2, y - 10);
      });

      // 绘制x轴标签
      labels.forEach((label, index) => {
        const x = leftPadding + index * (barWidth + barSpacing) + barWidth / 2;
        ctx.fillStyle = '#FFFFFF';
        ctx.textAlign = 'center';
        ctx.font = `${chartHeight * 0.04}px Arial`; // 增大字体
        ctx.fillText(label, x, chartHeight - bottomPadding + 30); // 调整位置
      });

      // 绘制左右两侧的柱状图
      const leftBarWidth = leftPadding * 0.3;
      const rightBarWidth = rightPadding * 0.3;
      const leftBarHeight = (30 / 100) * (chartHeight - topPadding - bottomPadding);
      const rightBarHeight = (45 / 100) * (chartHeight - topPadding - bottomPadding);

      // 左侧柱状图
      ctx.fillStyle = '#4DB6E1';
      ctx.fillRect(10, chartHeight - bottomPadding - leftBarHeight, leftBarWidth
        , leftBarHeight);
      ctx.fillStyle = '#FFFFFF';
      ctx.textAlign = 'center';
      ctx.font = `${chartHeight * 0.06}px Arial`; // 墛字体
      ctx.fillText('030', 10 + leftBarWidth / 2, chartHeight - bottomPadding - leftBarHeight - 10);
      ctx.font = `${chartHeight * 0.04}px Arial`; // 墛字体
      ctx.fillText('待配预警（人）', 25 + leftBarWidth / 2, chartHeight - bottomPadding + 30); // 调整位置

      // 右侧柱状图
      ctx.fillStyle = '#FFD700';
      ctx.fillRect(chartWidth - rightPadding + 40, chartHeight - bottomPadding - rightBarHeight, rightBarWidth+10, rightBarHeight);
      ctx.fillStyle = '#FFFFFF';
      ctx.textAlign = 'center';
      ctx.font = `${chartHeight * 0.06}px Arial`; // 墛字体
      ctx.fillText('045', chartWidth - rightPadding + 45 + rightBarWidth / 2, chartHeight - bottomPadding - rightBarHeight - 10);
      ctx.font = `${chartHeight * 0.04}px Arial`; // 墛字体
      ctx.fillText('待发预警（人）', chartWidth - rightPadding + 30 + rightBarWidth / 2, chartHeight - bottomPadding + 30); // 调整位置

      // 动画效果
      if (progress < 1) {
        progress += 0.01;
        animationId = requestAnimationFrame(draw);
      } else {
        cancelAnimationFrame(animationId);
      }
    };

    const resizeCanvas = () => {
      const canvasWidth = canvas.clientWidth;
      const canvasHeight = canvas.clientHeight;
      canvas.width = canvasWidth;
      canvas.height = canvasHeight;
      draw();
    };

    resizeCanvas();
    window.addEventListener('resize', resizeCanvas);
    animationId = requestAnimationFrame(draw);
    return () => {
      window.removeEventListener('resize', resizeCanvas);
      cancelAnimationFrame(animationId);
    };
  }, []);

  return <canvas ref={canvasRef} className="complex-chart" />;
};

export default CustomComplexChart;
