import React, { useEffect, useRef, useState } from 'react';
import { Card, Result, CheckCircleOutlined, Button } from 'antd';
import * as echarts from 'echarts';
import StandardTable from '@/components/StandardTable';
import styles from './EvaluationReport.less';

import img1 from '@/assets/safe_majorHazard/online_monitoring/img1.png';
import img2 from '@/assets/safe_majorHazard/online_monitoring/img2.png';
import img3 from '@/assets/safe_majorHazard/online_monitoring/img3.png';


const EvaluationReport = () => {
    const trendChartRef = useRef(null);
    const pieChartRef = useRef(null);
    const barChartRef = useRef(null);
    
    // 表格相关状态
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const [selectedRows, setSelectedRows] = useState([]);
    const [loading, setLoading] = useState(false);
    const [dataSource, setDataSource] = useState([]);
    const [pagination, setPagination] = useState({
        current: 1,
        pageSize: 5,
        total: 0,
    });

    // 隐患趋势分析折线图
    useEffect(() => {
        if (trendChartRef.current) {
            const chart = echarts.init(trendChartRef.current);
            
            const option = {
                color: ['#FF4D4F', '#FAAD14', '#52C41A'],
                legend: {
                    data: ['重大隐患', '一般隐患', '轻微隐患'],
                    top: "5px",
                    left: "center",
                    itemGap: 20,
                    textStyle: {
                        fontSize: 10
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '20%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisLabel: {
                        fontSize: 10
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        fontSize: 10
                    }
                },
                series: [
                    {
                        name: '重大隐患',
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 6,
                        lineStyle: {
                            width: 2,
                            color: '#FF4D4F'
                        },
                        itemStyle: {
                            color: '#FF4D4F',
                            borderColor: '#FF4D4F',
                            borderWidth: 2
                        },
                        data: [12, 8, 15, 10, 18, 14, 20, 16, 22, 19, 25, 21]
                    },
                    {
                        name: '一般隐患',
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 6,
                        lineStyle: {
                            width: 2,
                            color: '#FAAD14'
                        },
                        itemStyle: {
                            color: '#FAAD14',
                            borderColor: '#FAAD14',
                            borderWidth: 2
                        },
                        data: [25, 30, 28, 35, 32, 38, 40, 36, 42, 38, 45, 41]
                    },
                    {
                        name: '轻微隐患',
                        type: 'line',
                        smooth: true,
                        symbol: 'circle',
                        symbolSize: 6,
                        lineStyle: {
                            width: 2,
                            color: '#52C41A'
                        },
                        itemStyle: {
                            color: '#52C41A',
                            borderColor: '#52C41A',
                            borderWidth: 2
                        },
                        data: [45, 50, 48, 55, 52, 58, 60, 56, 62, 58, 65, 61]
                    }
                ]
            };

            chart.setOption(option);

            const handleResize = () => {
                if (chart && !chart.isDisposed()) {
                    chart.resize();
                }
            };

            window.addEventListener('resize', handleResize);

            return () => {
                window.removeEventListener('resize', handleResize);
                if (chart && !chart.isDisposed()) {
                    chart.dispose();
                }
            };
        }
    }, []);

    // 隐患类型分布玫瑰饼图
    useEffect(() => {
        if (pieChartRef.current) {
            const chart = echarts.init(pieChartRef.current);
            
            const option = {
                color: ['#FF4D4F', '#FAAD14', '#52C41A', '#1890FF', '#722ED1', '#13C2C2'],
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    top: 'center',
                    textStyle: {
                        fontSize: 10
                    }
                },
                series: [
                    {
                        name: '隐患类型',
                        type: 'pie',
                        radius: ['20%', '70%'],
                        center: ['60%', '50%'],
                        roseType: 'area',
                        itemStyle: {
                            borderRadius: 5,
                            borderColor: '#fff',
                            borderWidth: 2
                        },
                        label: {
                            show: true,
                            formatter: '{b}: {c}',
                            fontSize: 10
                        },
                        data: [
                            { value: 35, name: '设备故障' },
                            { value: 28, name: '操作失误' },
                            { value: 22, name: '环境因素' },
                            { value: 18, name: '管理缺陷' },
                            { value: 15, name: '设计缺陷' },
                            { value: 12, name: '其他' }
                        ]
                    }
                ]
            };

            chart.setOption(option);

            const handleResize = () => {
                if (chart && !chart.isDisposed()) {
                    chart.resize();
                }
            };

            window.addEventListener('resize', handleResize);

            return () => {
                window.removeEventListener('resize', handleResize);
                if (chart && !chart.isDisposed()) {
                    chart.dispose();
                }
            };
        }
    }, []);

    // 隐患整改情况柱状图
    useEffect(() => {
        if (barChartRef.current) {
            const chart = echarts.init(barChartRef.current);
            
            const option = {
                color: ['#FF4D4F', '#FAAD14', '#1890FF', '#52C41A', '#722ED1'],
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    top: '10%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['待处理', '处理中', '待审核', '已完成', '已关闭'],
                    axisLabel: {
                        fontSize: 10
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLabel: {
                        fontSize: 10
                    }
                },
                series: [
                    {
                        name: '数量',
                        type: 'bar',
                        data: [25, 18, 12, 35, 8],
                        itemStyle: {
                            borderRadius: [4, 4, 0, 0]
                        },
                        barWidth: '60%'
                    }
                ]
            };

            chart.setOption(option);

            const handleResize = () => {
                if (chart && !chart.isDisposed()) {
                    chart.resize();
                }
            };

            window.addEventListener('resize', handleResize);

            return () => {
                window.removeEventListener('resize', handleResize);
                if (chart && !chart.isDisposed()) {
                    chart.dispose();
                }
            };
        }
    }, []);

    // 表格列定义
    const columns = [
        {
            title: '编号',
            dataIndex: 'id',
            key: 'id',
            width: 80,
            render: (text, record, index) => {
                const page = pagination.current || 1;
                const pageSize = pagination.pageSize || 5;
                const number = (page - 1) * pageSize + index + 1;
                return `0${number}`.slice(-2);
            }
        },
        {
            title: '报告名称',
            dataIndex: 'reportName',
            key: 'reportName',
            width: 200,
        },
        {
            title: '类型',
            dataIndex: 'type',
            key: 'type',
            width: 120,
        },
        {
            title: '上传时间',
            dataIndex: 'uploadTime',
            key: 'uploadTime',
            width: 150,
        },
        {
            title: '版本',
            dataIndex: 'version',
            key: 'version',
            width: 80,
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            width: 100,
            render: (text) => {
                const statusMap = {
                    '已完成': { color: '#52C41A', bg: '#F6FFED' },
                    '处理中': { color: '#FAAD14', bg: '#FFFBE6' },
                    '待审核': { color: '#1890FF', bg: '#E6F7FF' }
                };
                const status = statusMap[text] || { color: '#333', bg: '#F5F5F5' };
                return (
                    <span style={{ 
                        color: status.color, 
                        backgroundColor: status.bg,
                        padding: '2px 8px',
                        borderRadius: '4px',
                        fontSize: '12px'
                    }}>
                        {text}
                    </span>
                );
            }
        },
        {
            title: '上传人',
            dataIndex: 'uploader',
            key: 'uploader',
            width: 100,
        },
        {
            title: '操作',
            key: 'action',
            width: 80,
            render: (_, record) => (
                <div>
                    <Button type="link" size="small" style={{ padding: 0 }}>
                        下载
                    </Button>
                </div>
            ),
        },
    ];

    // 模拟数据
    const mockData = [
        {
            key: '1',
            id: '001',
            reportName: '2024年第一季度安全评估报告',
            type: '季度报告',
            uploadTime: '2024-01-15 08:30:25',
            version: 'V1.0',
            status: '已完成',
            uploader: '张三',
        },
        {
            key: '2',
            id: '002',
            reportName: '重大危险源专项评估报告',
            type: '专项报告',
            uploadTime: '2024-01-15 09:15:10',
            version: 'V2.1',
            status: '处理中',
            uploader: '李四',
        },
        {
            key: '3',
            id: '003',
            reportName: '年度安全风险评估报告',
            type: '年度报告',
            uploadTime: '2024-01-15 10:45:30',
            version: 'V1.5',
            status: '待审核',
            uploader: '王五',
        },
        {
            key: '4',
            id: '004',
            reportName: '设备安全评估报告',
            type: '设备报告',
            uploadTime: '2024-01-15 11:20:45',
            version: 'V1.2',
            status: '已完成',
            uploader: '赵六',
        },
        {
            key: '5',
            id: '005',
            reportName: '应急预案评估报告',
            type: '应急报告',
            uploadTime: '2024-01-15 12:10:20',
            version: 'V3.0',
            status: '已完成',
            uploader: '孙七',
        },
        {
            key: '6',
            id: '006',
            reportName: '环境安全评估报告',
            type: '环境报告',
            uploadTime: '2024-01-15 13:25:15',
            version: 'V1.8',
            status: '处理中',
            uploader: '周八',
        },
        {
            key: '7',
            id: '007',
            reportName: '人员安全培训评估报告',
            type: '培训报告',
            uploadTime: '2024-01-15 14:10:30',
            version: 'V2.3',
            status: '待审核',
            uploader: '吴九',
        },
        {
            key: '8',
            id: '008',
            reportName: '消防安全评估报告',
            type: '消防报告',
            uploadTime: '2024-01-15 15:45:20',
            version: 'V1.1',
            status: '已完成',
            uploader: '郑十',
        },
        {
            key: '9',
            id: '009',
            reportName: '化学品安全评估报告',
            type: '化学品报告',
            uploadTime: '2024-01-15 16:30:45',
            version: 'V2.0',
            status: '处理中',
            uploader: '钱十一',
        },
        {
            key: '10',
            id: '010',
            reportName: '职业健康安全评估报告',
            type: '职业健康报告',
            uploadTime: '2024-01-15 17:15:10',
            version: 'V1.6',
            status: '已完成',
            uploader: '陈十二',
        },
        {
            key: '11',
            id: '011',
            reportName: '安全管理制度评估报告',
            type: '制度报告',
            uploadTime: '2024-01-15 18:20:35',
            version: 'V1.3',
            status: '待审核',
            uploader: '刘十三',
        },
        {
            key: '12',
            id: '012',
            reportName: '安全投入评估报告',
            type: '投入报告',
            uploadTime: '2024-01-15 19:05:50',
            version: 'V1.9',
            status: '已完成',
            uploader: '黄十四',
        },
    ];

    // 初始化数据
    useEffect(() => {
        setPagination(prev => ({ ...prev, total: mockData.length }));
    }, []);

    // 根据分页获取当前页数据
    const getCurrentPageData = () => {
        const { current, pageSize } = pagination;
        const startIndex = (current - 1) * pageSize;
        const endIndex = startIndex + pageSize;
        return mockData.slice(startIndex, endIndex);
    };

    // 表格选择变化
    const onSelectChange = (newSelectedRowKeys, newSelectedRows) => {
        setSelectedRowKeys(newSelectedRowKeys);
        setSelectedRows(newSelectedRows);
    };

    // 分页变化处理
    const handleTableChange = (pagination) => {
        setPagination(prev => ({
            ...prev,
            current: pagination.current,
            pageSize: pagination.pageSize,
        }));
    };

    return (
        <div className={styles.Econtainer}>
            {/* 第一个大块 - 高度16% */}
            <div className={styles.EcontainerTop}>
                <div className={styles.sectionContent}>
                    <div className={styles.blocksContainer}>
                        {/* 块1 */}
                        <div className={styles.blockItem}>
                            <div className={styles.blockLeft}>
                                <div className={styles.blockTitle}>总危险源数量</div>
                                <div className={styles.blockNumber}>65</div>
                                <div className={styles.blockChange}>
                                    <span className={styles.arrow}>↑</span>
                                    较昨日 +2
                                </div>
                            </div>
                            <div className={styles.blockRight}>
                                <img src={img1} alt="总危险源数量" className={styles.blockImage} />
                            </div>
                        </div>

                        {/* 块2 */}
                        <div className={styles.blockItem}>
                            <div className={styles.blockLeft}>
                                <div className={styles.blockTitle}>高风险设备</div>
                                <div className={styles.blockNumber}>65</div>
                                <div className={styles.blockChange}>
                                    <span className={styles.arrow}>↑</span>
                                    较昨日 +2
                                </div>
                            </div>
                            <div className={styles.blockRight}>
                                <img src={img2} alt="高风险设备" className={styles.blockImage} />
                            </div>
                        </div>

                        {/* 块3 */}
                        <div className={styles.blockItem}>
                            <div className={styles.blockLeft}>
                                <div className={styles.blockTitle}>今日预警次数</div>
                                <div className={styles.blockNumber}>65</div>
                                <div className={styles.blockChange}>
                                    <span className={styles.arrow}>↑</span>
                                    较昨日 +2
                                </div>
                            </div>
                            <div className={styles.blockRight}>
                                <img src={img3} alt="今日预警次数" className={styles.blockImage} />
                            </div>
                        </div>

                        {/* 块4 */}
                        <div className={styles.blockItem}>
                            <div className={styles.blockLeft}>
                                <div className={styles.blockTitle}>未处理预警</div>
                                <div className={styles.blockNumber}>65</div>
                                <div className={styles.blockChange}>
                                    <span className={styles.arrow}>↑</span>
                                    较昨日 +2
                                </div>
                            </div>
                            <div className={styles.blockRight}>
                                <img src={img1} alt="未处理预警" className={styles.blockImage} />
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {/* 第二个大块 - 三个图表块 */}
            <div className={styles.EcontainerMiddle}>
                <div className={styles.sectionContent}>
                    {/* 第一个小块 - 隐患趋势分析 */}
                    <div className={styles.chartBlock}>
                        <div className={styles.chartTitle}>
                            <div className={styles.titleIcon}></div>
                            <div>隐患趋势分析</div>
                        </div>
                        <div className={styles.chartContainer} ref={trendChartRef}></div>
                    </div>

                    {/* 第二个小块 - 隐患类型分布 */}
                    <div className={styles.chartBlock}>
                        <div className={styles.chartTitle}>
                            <div className={styles.titleIcon}></div>
                            <div>隐患类型分布</div>
                        </div>
                        <div className={styles.chartContainer} ref={pieChartRef}></div>
                    </div>

                    {/* 第三小块 - 隐患整改情况 */}
                    <div className={styles.chartBlock}>
                        <div className={styles.chartTitle}>
                            <div className={styles.titleIcon}></div>
                            <div>隐患整改情况</div>
                        </div>
                        <div className={styles.chartContainer} ref={barChartRef}></div>
                    </div>
                </div>
            </div>

            {/* 第三大块 - 评估报告表格 */}
            <div className={styles.EcontainerBottom}>
                {/* 首行 左侧标题左对齐 右侧按钮右对齐 */}
                <div className={styles.tableHeader}>
                    <div className={styles.tableTitle}>
                        <div className={styles.titleIcon}></div>
                        <div>评估报告</div>
                    </div>
                </div>

                {/* 表格 5行8列 带页码 每页5条数据 */}
                <div className={styles.tableContainer}>
                    <StandardTable
                        columns={columns}
                        data={{
                            list: getCurrentPageData(),
                            pagination: pagination
                        }}
                        loading={loading}
                        selectionType="checkbox"
                        onSelectRow={onSelectChange}
                        onChange={handleTableChange}
                        pagination={{
                            ...pagination,
                            showSizeChanger: false,
                            showQuickJumper: true,
                            showTotal: (total, range) => 
                                `共 ${total} 条`,
                        }}
                        scroll={{ x: 1000 }}
                    />
                </div>
            </div>
        </div>
    );
};

export default EvaluationReport;  