import React, { useEffect, useRef, useState } from 'react';
import { Card, Result, Select, Button, Segmented, Progress, Input } from 'antd';
import { CheckCircleOutlined, ExportOutlined, HeartFilled, LineHeightOutlined, ExclamationCircleOutlined, SearchOutlined } from '@ant-design/icons';
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';
import map1 from '@/assets/safe_majorHazard/online_monitoring/map.png';
import risk1 from '@/assets/safe_majorHazard/online_monitoring/risk1.png';
import risk2 from '@/assets/safe_majorHazard/online_monitoring/risk2.png';
import risk3 from '@/assets/safe_majorHazard/online_monitoring/risk3.png';
import eqicon1 from '@/assets/business_basic/eqicon1.png';
import eqicon2 from '@/assets/business_basic/eqicon2.png';
import eqicon3 from '@/assets/business_basic/eqicon3.png';
import eqicon4 from '@/assets/business_basic/eqicon4.png';

const EvaluationReport = () => {
    const chartRef = useRef(null);
    const pieChartRef = useRef(null);
    const faultPieChartRef = 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: 8,
        total: 0,
    });
    const [searchText, setSearchText] = useState('');

    // 柱状图初始化
    useEffect(() => {
        if (pieChartRef.current) {
            const barChart = echarts.init(pieChartRef.current);

            const barOption = {
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '10%',
                    top: '20%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['灭火器', '消火栓', '报警器', '疏散灯', '排烟设备'],
                    axisLabel: {
                        fontSize: 12,
                        color: '#333',
                        interval: 0,
                        rotate: 0
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    max: 50,
                    interval: 10,
                    axisLabel: {
                        fontSize: 12,
                        color: '#666',
                        formatter: '{value}'
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#00001A26',
                            type: 'dashed'
                        }
                    }
                },
                series: [{
                    name: '使用次数',
                    type: 'bar',
                    barWidth: 27,
                    data: [35, 28, 42, 31, 38],
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [
                                { offset: 0, color: '#199BFB' },
                                { offset: 1, color: '#1373FA' }
                            ]
                        }
                    },
                    emphasis: {
                        itemStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    { offset: 0, color: '#0D7AE8' },
                                    { offset: 1, color: '#0F5BC7' }
                                ]
                            }
                        }
                    }
                }],
                legend: {
                    show: true,
                    top: '5%',
                    left: 'center',
                    itemWidth: 15,
                    itemHeight: 3,
                    textStyle: {
                        fontSize: 12,
                        color: '#333'
                    },
                    data: [{
                        name: '使用次数',
                        icon: 'rect',
                        itemStyle: {
                            color: '#4B69F1'
                        }
                    }]
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: function (params) {
                        return `${params[0].name}<br/>使用次数: ${params[0].value}`;
                    }
                }
            };

            barChart.setOption(barOption);

            // 响应式调整
            const handleBarResize = () => {
                if (barChart && !barChart.isDisposed()) {
                    barChart.resize();
                }
            };

            window.addEventListener('resize', handleBarResize);

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

    // 维护费用趋势折线图初始化
    useEffect(() => {
        if (faultPieChartRef.current) {
            const faultPieChart = echarts.init(faultPieChartRef.current);

            const faultPieOption = {

                legend: {
                    show: true,
                    top: '5%',
                    left: 'center',
                    itemWidth: 20,
                    itemHeight: 8,
                    textStyle: {
                        color: '#333',
                        fontSize: 12
                    }
                },
                grid: {
                    left: '5%',
                    right: '5%',
                    bottom: '10%',
                    top: '20%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    axisLine: {
                        lineStyle: {
                            color: '#E5E5E5'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#666',
                        fontSize: 12,
                        interval: 0
                    }
                },
                yAxis: {
                    type: 'value',
                    min: 20000,
                    max: 30000,
                    interval: 2000,
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#666',
                        fontSize: 12,
                        formatter: '¥{value}'
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#00001A26',
                            type: 'dashed'
                        }
                    }
                },
                series: [{
                    name: '费用',
                    type: 'line',
                    data: [29000, 21000, 27500, 21900, 26000, 25000, 27000, 24000, 22300, 28000, 29000, 27000],
                    smooth: false,
                    symbol: 'circle',
                    symbolSize: 6,
                    lineStyle: {
                        color: '#1269FF',
                        width: 1
                    },
                    itemStyle: {
                        color: '#fff',
                        borderColor: '#1269FF',
                        borderWidth: 1
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0,
                                color: 'rgba(18, 105, 255, 0.3)'
                            }, {
                                offset: 1,
                                color: 'rgba(18, 105, 255, 0.05)'
                            }]
                        }
                    }
                }]
            };

            faultPieChart.setOption(faultPieOption);

            // 响应式调整
            const handleFaultPieResize = () => {
                if (faultPieChart && !faultPieChart.isDisposed()) {
                    faultPieChart.resize();
                }
            };

            window.addEventListener('resize', handleFaultPieResize);

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

    useEffect(() => {
        if (chartRef.current) {
            const chart = echarts.init(chartRef.current);

            // 强制初始化时调整大小
            setTimeout(() => {
                if (chart && !chart.isDisposed()) {
                    chart.resize();
                }
            }, 100);

            const option = {
                color: ['#3C7EFF', '#FF8800', '#FFC403', '#31BCFF'],
                legend: {
                    orient: 'vertical',
                    right: '2%',
                    top: 'middle',
                    itemWidth: 14,
                    itemHeight: 5,
                    textStyle: {
                        fontSize: 10,
                        color: '#666'
                    }
                },
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}<br/>{d}%'
                },
                series: [
                    {
                        name: '设备类型占比',
                        type: 'pie',
                        radius: '70%',
                        center: ['40%', '55%'],
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 0,
                            borderColor: '#fff',
                            borderWidth: 1
                        },
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: false
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            { value: 25, name: '灭火器' },
                            { value: 30, name: '消防栓' },
                            { value: 20, name: '报警器' },
                            { value: 25, name: '烟雾探测器' }
                        ]
                    }
                ]
            };

            chart.setOption(option);

            // 响应式调整 - 使用多种方式监听容器尺寸变化
            let resizeTimer = null;
            const handleResize = () => {
                // 防抖处理，避免频繁调用resize
                if (resizeTimer) {
                    clearTimeout(resizeTimer);
                }
                resizeTimer = setTimeout(() => {
                    if (chart && !chart.isDisposed()) {
                        chart.resize();
                    }
                }, 50); // 减少延迟时间
            };

            // 监听窗口大小变化
            window.addEventListener('resize', handleResize);

            // 监听容器尺寸变化（解决菜单栏伸缩时的自适应问题）
            let resizeObserver = null;
            if (window.ResizeObserver) {
                resizeObserver = new ResizeObserver((entries) => {
                    for (let entry of entries) {
                        // 使用requestAnimationFrame确保在下一帧执行
                        requestAnimationFrame(() => {
                            handleResize();
                        });
                    }
                });
                resizeObserver.observe(chartRef.current);
            }

            // 额外监听父容器的尺寸变化
            const parentContainer = chartRef.current?.parentElement;
            let parentObserver = null;
            if (parentContainer && window.ResizeObserver) {
                parentObserver = new ResizeObserver((entries) => {
                    for (let entry of entries) {
                        requestAnimationFrame(() => {
                            handleResize();
                        });
                    }
                });
                parentObserver.observe(parentContainer);
            }

            // 使用MutationObserver监听DOM结构变化（菜单展开收起时）
            const mutationObserver = new MutationObserver((mutations) => {
                mutations.forEach((mutation) => {
                    if (mutation.type === 'attributes' &&
                        (mutation.attributeName === 'class' || mutation.attributeName === 'style')) {
                        // 延迟执行，确保DOM更新完成
                        setTimeout(() => {
                            handleResize();
                        }, 200);
                    }
                });
            });

            // 监听整个页面的class和style变化
            mutationObserver.observe(document.body, {
                attributes: true,
                attributeFilter: ['class', 'style'],
                subtree: true
            });

            return () => {
                window.removeEventListener('resize', handleResize);
                if (resizeObserver) {
                    resizeObserver.disconnect();
                }
                if (parentObserver) {
                    parentObserver.disconnect();
                }
                if (mutationObserver) {
                    mutationObserver.disconnect();
                }
                if (resizeTimer) {
                    clearTimeout(resizeTimer);
                }
                if (chart && !chart.isDisposed()) {
                    chart.dispose();
                }
            };
        }
    }, []);

    // 表格列定义
    const columns = [
        {
            title: '编号',
            dataIndex: 'id',
            key: 'id',
            width: 60,
            render: (text, record, index) => {
                const page = pagination.current || 1;
                const pageSize = pagination.pageSize || 8;
                const number = (page - 1) * pageSize + index + 1;
                return `0${number}`.slice(-2);
            }
        },
        {
            title: '设备编号',
            dataIndex: 'deviceId',
            key: 'deviceId',
            width: 140,
        },
        {
            title: '设备名称',
            dataIndex: 'deviceName',
            key: 'deviceName',
            width: 110,
        },
        {
            title: '类型',
            dataIndex: 'modelSpec',
            key: 'modelSpec',
            width: 120,
        },
        {
            title: '安装位置',
            dataIndex: 'installLocation',
            key: 'installLocation',
            width: 100,
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            width: 100,
            render: (text) => {
                const statusMap = {
                    '报废': { color: '#FF3E48', bg: '#FFE0E2' },
                    '待维修': { color: '#FF8800', bg: '#FFF3E9' },
                    '已使用': { color: '#00AAFA', bg: '#DAF3FF' },
                    '正常': { color: '#44BB5F', bg: '#D8F7DE' }
                };
                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: 'lastMaintenance',
            key: 'lastMaintenance',
            width: 150,
        },
        {
            title: '操作',
            key: 'action',
            width: 140,
            render: (_, record) => (
                <div>
                    <Button type="link" size="small" style={{
                        padding: '2px 8px',
                        fontSize: 12,
                        marginRight: 8,
                        border: '1px solid #E6E9FB',
                        backgroundColor: 'transparent',
                        borderRadius: '4px'
                    }}>
                        编辑
                    </Button>
                    <Button type="link" size="small" style={{
                        padding: '2px 8px',
                        fontSize: 12,
                        color: '#FF2526',
                        border: '1px solid #FFE0E2',
                        backgroundColor: 'transparent',
                        borderRadius: '4px'
                    }}>
                        删除
                    </Button>
                </div>
            ),
        },
    ];

    // 模拟数据
    const mockData = [
        {
            key: '1',
            id: '001',
            deviceId: 'HQ-XF-01-001',
            deviceName: '干粉灭火器',
            modelSpec: '灭火设备',
            installLocation: '1层大厅',
            status: '报废',
            lastMaintenance: '2025-09-10',
        },
        {
            key: '2',
            id: '002',
            deviceId: 'HQ-XF-02-015',
            deviceName: '室内消火栓',
            modelSpec: '灭火设备',
            installLocation: '3层东区',
            status: '已使用',
            lastMaintenance: '2025-09-10',
        },
        {
            key: '3',
            id: '003',
            deviceId: 'HQ-XF-03-007',
            deviceName: '火警报警器',
            modelSpec: '报警设备',
            installLocation: '地下一层',
            status: '正常',
            lastMaintenance: '2025-09-10',
        },
        {
            key: '4',
            id: '004',
            deviceId: 'HQ-XF-03-008',
            deviceName: '火警报警器',
            modelSpec: '报警设备',
            installLocation: '地下一层',
            status: '待维修',
            lastMaintenance: '2025-09-10',
        },
        {
            key: '5',
            id: '005',
            deviceId: 'HQ-XF-01-009',
            deviceName: '干粉灭火器',
            modelSpec: '灭火设备',
            installLocation: '地下一层',
            status: '报废',
            lastMaintenance: '2025-09-10',
        },
        {
            key: '6',
            id: '006',
            deviceId: 'HQ-XF-01-010',
            deviceName: '室内消火栓',
            modelSpec: '灭火设备',
            installLocation: '地下一层',
            status: '已使用',
            lastMaintenance: '2025-09-10',
        },
        {
            key: '7',
            id: '007',
            deviceId: 'HQ-XF-01-011',
            deviceName: '火警报警器',
            modelSpec: '报警设备',
            installLocation: '地下一层',
            status: '待维修',
            lastMaintenance: '2025-09-10',
        },
        {
            key: '8',
            id: '008',
            deviceId: 'HQ-XF-01-012',
            deviceName: '火警报警器',
            modelSpec: '报警设备',
            installLocation: '地下一层',
            status: '正常',
            lastMaintenance: '2025-09-10',
        },
        {
            key: '9',
            id: '009',
            deviceId: 'HQ-XF-01-013',
            deviceName: '干粉灭火器',
            modelSpec: '灭火设备',
            installLocation: '地下一层',
            status: '已使用',
            lastMaintenance: '2025-09-10',
        },
        {
            key: '10',
            id: '010',
            deviceId: 'HQ-XF-01-014',
            deviceName: '室内消火栓',
            modelSpec: '灭火设备',
            installLocation: '地下一层',
            status: '待维修',
            lastMaintenance: '2025-09-10',
        },
        {
            key: '11',
            id: '011',
            deviceId: 'HQ-XF-01-015',
            deviceName: '火警报警器',
            modelSpec: '报警设备',
            installLocation: '地下一层',
            status: '正常',
            lastMaintenance: '2025-09-10',
        },
        {
            key: '12',
            id: '012',
            deviceId: 'HQ-XF-01-016',
            deviceName: '火警报警器',
            modelSpec: '报警设备',
            installLocation: '地下一层',
            status: '已使用',
            lastMaintenance: '2025-09-10',
        },
        {
            key: '13',
            id: '013',
            deviceId: 'HQ-XF-01-017',
            deviceName: '干粉灭火器',
            modelSpec: '灭火设备',
            installLocation: '2层西区',
            status: '报废',
            lastMaintenance: '2024-08-15',
        },
        {
            key: '14',
            id: '014',
            deviceId: 'HQ-XF-02-018',
            deviceName: '室内消火栓',
            modelSpec: '灭火设备',
            installLocation: '4层南区',
            status: '报废',
            lastMaintenance: '2024-07-20',
        },
        {
            key: '15',
            id: '015',
            deviceId: 'HQ-XF-03-019',
            deviceName: '火警报警器',
            modelSpec: '报警设备',
            installLocation: '地下二层',
            status: '报废',
            lastMaintenance: '2024-06-10',
        },
        {
            key: '16',
            id: '016',
            deviceId: 'HQ-XF-01-020',
            deviceName: '干粉灭火器',
            modelSpec: '灭火设备',
            installLocation: '5层北区',
            status: '报废',
            lastMaintenance: '2024-05-05',
        },
    ];

    // 初始化数据
    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 handleAddDevice = () => {
        console.log('新增设备');
        // TODO: 实现新增设备逻辑
    };

    // 导出数据按钮点击事件
    const handleExportData = () => {
        console.log('导出数据');
        // TODO: 实现导出数据逻辑
    };

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

    // 搜索处理
    const handleSearchChange = (e) => {
        setSearchText(e.target.value);
        console.log('搜索:', e.target.value);
        // TODO: 实现搜索逻辑，根据设备名称、编号等筛选数据
    };

    return (
        <div className={styles.Econtainer}>
            {/* 第1个div - 高度39% */}
            <div className={styles.EcontainerMiddle}>
                <div className={styles.sectionContent}>
                    <div className={styles.middleBlock1}>
                        <div className={styles.block1Header}>
                            <div className={styles.block1Title}>
                                <div className={styles.titleIcon}></div>
                                设备使用频率分析
                            </div>
                        </div>
                        {/* 设备状态饼图 */}
                        <div className={styles.deviceStatusChart} ref={pieChartRef}>
                        </div>
                    </div>

                    <div className={styles.middleBlock12}>
                        <div className={styles.block1Header}>
                            <div className={styles.block1Title}>
                                <div className={styles.titleIcon}></div>
                                近一年维护费用趋势
                            </div>
                        </div>

                        {/* 维护费用趋势折线图 */}
                        <div className={styles.deviceStatusChart} ref={faultPieChartRef}>
                        </div>
                    </div>

                    <div className={styles.middleBlock2}>
                        <div className={styles.middleBlock2Title}>
                            <div className={styles.titleLeft}>
                                <div className={styles.titleIcon}></div>
                                <div>设备类型占比</div>
                            </div>
                        </div>
                        <div className={styles.middleBlock2Chart} ref={chartRef}>
                        </div>
                    </div>
                </div>
            </div>

            {/* 第2个div - 占满剩余位置 */}
            <div className={styles.EcontainerBottom}>
                <div className={styles.sectionContent}>
                    <div className={styles.leftBlock}>
                        <div className={styles.maintenanceStack}>
                            <div className={styles.maintenanceSection}>
                                <div className={styles.maintenanceTitle}>
                                    <div className={styles.titleIcon}></div>
                                    <div>近期维护提醒</div>
                                </div>
                                <div className={styles.maintenanceContent1}>
                                    <div className={styles.maintenanceItem}>
                                        <div className={styles.maintenanceLeft}>
                                            <div className={styles.maintenanceText1}>SH-MHQ-023-C 干粉灭火器</div>
                                            <div className={styles.maintenanceText2}>位置: 4楼办公区丨维护类型: 季度检查</div>
                                            <div className={styles.maintenanceText3}>负责人: 张三</div>
                                        </div>
                                        <div className={styles.maintenanceRight}>
                                            <div className={styles.maintenanceStatus}>3天后到期</div>
                                        </div>
                                    </div>
                                    <div className={styles.maintenanceItem}>
                                        <div className={styles.maintenanceLeft}>
                                            <div className={styles.maintenanceText1}>SH-XHS-045-D 室内消火栓</div>
                                            <div className={styles.maintenanceText2}>位置: 2楼东侧走廊丨维护类型: 水压测试</div>
                                            <div className={styles.maintenanceText3}>负责人: 李四</div>
                                        </div>
                                        <div className={styles.maintenanceRight2}>
                                            <div className={styles.maintenanceStatus}>8天后到期</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className={styles.maintenanceSection}>
                                <div className={styles.maintenanceTitle}>
                                    <div className={styles.titleIcon}></div>
                                    <div>维护任务进度</div>
                                </div>
                                <div className={styles.maintenanceContent2}>
                                    {/* 进度条区域 */}
                                    <div className={styles.progressSection}>

                                        <div className={styles.progressLabel}>月度维护计划</div>
                                        <Progress percent={75} status="active" />

                                        <div className={styles.progressLabel}>季度维护计划</div>
                                        <Progress percent={60} status="active" />


                                        <div className={styles.progressLabel}>年度维护计划</div>
                                        <Progress percent={85} status="active" />


                                        {/* 警告提示框 */}
                                        <div className={styles.warningBox}>
                                            <ExclamationCircleOutlined className={styles.warningIcon} />
                                            <span className={styles.warningText}>本月有5项维护任务即将到期</span>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className={styles.rightBlock}>
                        {/* 表格 */}
                        <div className={styles.tableHeader}>
                            <div className={styles.tableTitle}>
                                <div className={styles.titleIcon}></div>
                                <div>消防设施与器材列表</div>
                            </div>
                        </div>

             
                       {/* 操作按钮 */}
                       <div className={styles.tableActions}>
                           <div className={styles.leftActions}>
                               <Input 
                                   placeholder="搜索设备名称、编号..." 
                                   onChange={handleSearchChange}
                                   value={searchText}
                                   style={{ width: 250, fontSize: 12 }} 
                                   allowClear
                                   suffix={<SearchOutlined />}
                               />
                           </div>
                           <div className={styles.rightActions}>
                               <button className={styles.actionButton} onClick={handleAddDevice}>
                                   <span className={styles.buttonIcon}>+</span>
                                   <span>新增设备</span>
                               </button>
                               <button className={styles.actionButton} onClick={handleExportData}>
                                   <span className={styles.buttonIcon}><ExportOutlined /></span>
                                   <span>导出数据</span>
                               </button>
                           </div>
                       </div>

                        {/* 表格 */}
                        <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} 条`,
                                }}
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default EvaluationReport;
