import React, { useState, useEffect, useRef } from 'react';
import { Button } from "antd";
import * as echarts from 'echarts';
import styles from './EmergencyDrill.less';
import { Import } from '../business_hiddentrouble/component/hiddenDangerInspection/hiddenDangerInspection';
import iconDrill1 from '../../assets/business_Emergency/iconDrill1.svg';

const EmergencyDrill = () => {
  const [timeType, setTimeType] = useState('month');
  const chartRef = useRef(null);
  const chartInstanceRef = useRef(null);
  const chartRef2 = useRef(null);
  const chartInstanceRef2 = useRef(null);

  useEffect(() => {
    if (!chartRef.current) return;

    // 初始化图表
    if (!chartInstanceRef.current) {
      chartInstanceRef.current = echarts.init(chartRef.current);
    }

    // 模拟数据
    const data = [12, 18, 8, 15, 22, 10, 14, 20, 16, 11, 19, 25];

    const option = {
      grid: {
        left: '3%',
        right: '3%',
        top: '10%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        axisLabel: {
          color: '#666666',
          fontSize: 12
        },
        axisLine: {
          lineStyle: {
            color: '#E5E5E5',
            type: 'dashed'
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#E5E5E5',
            type: 'dashed'
          }
        }
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: 30,
        interval: 5,
        axisLabel: {
          color: '#666666',
          fontSize: 12
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          lineStyle: {
            color: '#E5E5E5',
            type: 'dashed'
          }
        }
      },
      series: [
        {
          data: data,
          type: 'bar',
          barWidth: 23,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#556FEB' },
              { offset: 1, color: '#8DAAF7' }
            ])
          }
        }
      ]
    };

    chartInstanceRef.current.setOption(option);

    // 窗口大小变化时重新渲染
    const handleResize = () => {
      chartInstanceRef.current?.resize();
    };
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, [timeType]);

  // 组件卸载时销毁图表
  useEffect(() => {
    return () => {
      chartInstanceRef.current?.dispose();
      chartInstanceRef2.current?.dispose();
    };
  }, []);

  // 第二个图表 - 折线图
  useEffect(() => {
    if (!chartRef2.current) return;

    // 初始化图表
    if (!chartInstanceRef2.current) {
      chartInstanceRef2.current = echarts.init(chartRef2.current);
    }

    // 模拟数据
    const plannedData = [12, 15, 10, 18, 20, 16, 14, 22, 19, 17, 21, 23]; // 计划演练
    const actualData = [10, 13, 9, 16, 18, 15, 12, 20, 17, 15, 19, 21]; // 实际完成

    const option = {
      grid: {
        left: '3%',
        right: '3%',
        top: '15%',
        bottom: '3%',
        containLabel: true
      },
      legend: {
        data: ['计划演练', '实际完成'],
        top: '5%',
        right: 'center',
        textStyle: {
          color: '#666666',
          fontSize: 12
        },
        itemWidth: 14,
        itemHeight: 8
      },
      xAxis: {
        type: 'category',
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
        axisLabel: {
          color: '#666666',
          fontSize: 12
        },
        axisLine: {
          lineStyle: {
            color: '#E5E5E5',
            type: 'dashed'
          }
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: '#E5E5E5',
            type: 'dashed'
          }
        }
      },
      yAxis: {
        type: 'value',
        min: 0,
        max: 30,
        interval: 5,
        axisLabel: {
          color: '#666666',
          fontSize: 12
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          lineStyle: {
            color: '#E5E5E5',
            type: 'dashed'
          }
        }
      },
      series: [
        {
          name: '计划演练',
          type: 'line',
          data: plannedData,
          smooth: false,
          lineStyle: {
            color: '#3CC3DF',
            width: 1
          },
          itemStyle: {
            color: '#fff',
            borderColor: '#3CC3DF',
            borderWidth: 1
          },
          symbol: 'circle',
          symbolSize: 6,
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(60, 195, 223, 0.4)' },
                { offset: 1, color: 'rgba(60, 195, 223, 0.05)' }
              ]
            }
          }
        },
        {
          name: '实际完成',
          type: 'line',
          data: actualData,
          smooth: false,
          lineStyle: {
            color: '#8979FF',
            width: 1
          },
          itemStyle: {
            color: '#fff',
            borderColor: '#8979FF',
            borderWidth: 1
          },
          symbol: 'circle',
          symbolSize: 6,
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(137, 121, 255, 0.4)' },
                { offset: 1, color: 'rgba(137, 121, 255, 0.05)' }
              ]
            }
          }
        }
      ]
    };

    chartInstanceRef2.current.setOption(option);

    // 窗口大小变化时重新渲染
    const handleResize = () => {
      chartInstanceRef2.current?.resize();
    };
    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return (
    <div className={styles.containerDrill}>
      <div className={styles.block1}>
        <div className={styles.block1_item1}>

          
          <div className={styles.item1_row1}>
            <div className={styles.row1_left}>
              <div className={styles.colorBlock}></div>
              <span className={styles.title}>预案演练</span>
            </div>
            <Button className={styles.startBtn}>
              <span className={styles.btnIcon}>▶</span>
              <span>开始演练</span>
            </Button>
          </div>

          <div className={styles.item1_row2}>
            <div className={styles.row2_left}>
              <div className={styles.row2_title}>化工事故应急预案</div>
              <div className={styles.row2_version}>最新版本:V3.2</div>
            </div>
            <div className={styles.row2_right}>
              <img src={iconDrill1} alt="drill icon" className={styles.drillIcon} />
            </div>
          </div>
          
          <div className={styles.item1_row3}>
            <div className={styles.row3_left}>
              <div className={styles.row3_title}>化工事故应急预案</div>
              <div className={styles.row3_version}>最新版本:V3.2</div>
            </div>
            <div className={styles.row3_right}>
              <img src={iconDrill1} alt="drill icon" className={styles.drillIcon} />
            </div>
          </div>

          <div className={styles.item1_row4}>
            <div className={styles.row4_left}>
              <div className={styles.row4_title}>化工事故应急预案</div>
              <div className={styles.row4_version}>最新版本:V3.2</div>
            </div>
            <div className={styles.row4_right}>
              <img src={iconDrill1} alt="drill icon" className={styles.drillIcon} />
            </div>
          </div>
        </div>
        
        <div className={styles.block1_item2}>
          <div className={styles.item2_row1}>
            <div className={styles.row1_left}>
              <div className={styles.colorBlock}></div>
              <span className={styles.title}>演练数据统计</span>
            </div>
            <div className={styles.timeBtnGroup}>
              <Button 
                className={timeType === 'month' ? 'active' : ''}
                onClick={() => setTimeType('month')}
              >
                月
              </Button>
              <Button 
                className={timeType === 'season' ? 'active' : ''}
                onClick={() => setTimeType('season')}
              >
                季
              </Button>
              <Button 
                className={timeType === 'year' ? 'active' : ''}
                onClick={() => setTimeType('year')}
              >
                年
              </Button>
            </div>
          </div>

          <div ref={chartRef} className={styles.chartContainer}></div>
        </div>

        
        <div className={styles.block1_item3}>
          <div className={styles.item3_header}>
            <div className={styles.colorBlock}></div>
            <span className={styles.title}>演练完成情况</span>
          </div>

          <div ref={chartRef2} className={styles.chartContainer}></div>
        </div>
      </div>
      
      <div className={styles.block2}>
        {/* 第二块内容区域 */}
      </div>
      
      <div className={styles.block3}>
        {/* 第三块内容区域 */}
      </div>
    </div>
  );
};

export default EmergencyDrill;
