import {Col, List, Pagination, Row, Table, Layout, Select, Typography, Tag} from "antd";
import MyCard, {Tips} from "@/pages/hrefficiency_hiddentrouble/component/MyCard";
import {useEffect, useRef, useState} from "react";
import * as echarts from 'echarts';
import {DownOutlined} from "@ant-design/icons";
import G6 from '@antv/g6';
import cloud from '../../../../assets/img/cloud.png'
const {Title}=Typography
const {Content}=Layout
const GetBarChart=()=>{
    const chartRef=useRef(null)
    const chartInstance = useRef(null);
    useEffect(()=>{
        chartInstance.current=echarts.init(chartRef.current)
        const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
        const data={
            '设备故障类':[100, 150, 300, 400, 350, 250, 200, 220, 200, 150, 80, 50],
            '安全防护类': [200, 250, 300, 250, 200, 150, 200, 250, 300, 350, 250, 180],
            '电气隐患类': [450, 400, 300, 200, 350, 550, 450, 350, 400, 500, 400, 350],
            '操作规范类': [300, 200, 150, 200, 300, 400, 450, 480, 450, 400, 300, 200]
        };
        const option={
            //图例
            legend:{
                data:['设备故障类', '安全防护类', '电气隐患类', '操作规范类'],
                top:0
            },
            grid:{
                left:'3%',
                right: '4%',
                bottom: '0%',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: months
            },
            yAxis: {
                type: 'value',
                name: '数量(个)',
                min: 0,
                max: 600,
                interval: 100
            },
            series:[
                {
                    type:'line',
                    name:'设备故障类',
                    data:data['设备故障类'],
                    symbol:'circle',
                    smooth:true,
                    symbolSize:0,
                    lineStyle:{
                        width:2,
                        color:'#f56c6c',

                    },
                    itemStyle:{
                        color:'#f56c6c',


                    },
                    areaStyle:{
                        color:new echarts.graphic.LinearGradient(0,0,0,1,[
                            { offset: 0, color: 'rgba(245, 108, 108, 0.3)' },
                            { offset: 1, color: 'rgba(245, 108, 108, 0)' }
                        ])
                    }
                },
                {
                    name: '安全防护类',
                    type: 'line',
                    data: data['安全防护类'],
                    symbol: 'circle',
                    smooth:true,
                    symbolSize: 0,
                    lineStyle: {
                        width: 2,
                        color: '#e6a23c' // 橙色系
                    },
                    itemStyle: {
                        color: '#e6a23c'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(230, 162, 60, 0.3)' },
                            { offset: 1, color: 'rgba(230, 162, 60, 0)' }
                        ])
                    }
                },
                {
                    name: '电气隐患类',
                    type: 'line',
                    data: data['电气隐患类'],
                    symbol: 'circle',
                    smooth:true,
                    symbolSize: 0,
                    lineStyle: {
                        width: 2,
                        color: '#409eff' // 蓝色系
                    },
                    itemStyle: {
                        color: '#409eff'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(64, 158, 255, 0.3)' },
                            { offset: 1, color: 'rgba(64, 158, 255, 0)' }
                        ])
                    }
                },
                {
                    name: '操作规范类',
                    type: 'line',
                    data: data['操作规范类'],
                    symbol: 'circle',
                    smooth:true,
                    symbolSize: 0,
                    lineStyle: {
                        width: 2,
                        color: '#67c23a' // 绿色系
                    },
                    itemStyle: {
                        color: '#67c23a'
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: 'rgba(103, 194, 58, 0.3)' },
                            { offset: 1, color: 'rgba(103, 194, 58, 0)' }
                        ])
                    }
                }
            ]
        }
        chartInstance.current.setOption(option);
        const handleResize=()=>{
            chartInstance.current.resize()
        }
        window.addEventListener('resize',handleResize)

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

                chartInstance.current.dispose();
                chartInstance.current = null;

            };

    },[])
    return <div>
        <div ref={chartRef} style={{width:'100%',height:'270px'}}></div>
    </div>
}
const DepartmentRateChart=()=>{
    const chartRef=useRef(null)
    const chartInstance=useRef(null)
    useEffect(()=>{
        chartInstance.current=echarts.init(chartRef.current)
        const departmentsData = {
            'departments': ['生产部', '设备部', '安全部', '后勤部', '质检部'],
            '整改率': [55, 45, 65, 42, 58],    // 蓝色柱子数据
            '按期完成率': [35, 25, 45, 55, 52]  // 绿色柱子数据
        };
        const option={
            legend: {
                data: ['整改率', '按期完成率'],
                top: 0,
                left: 'center'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true,
                top: 40  // 给图例留出空间
            },
            xAxis: {
                type: 'category',
                data: departmentsData.departments,
                axisLabel: {
                    interval: 0  // 确保所有标签都显示
                }
            },
            yAxis: {
                type: 'value',
                name: '百分比(%)',
                min: 0,
                max: 70,
                interval: 10,
                axisLabel: {
                    formatter: '{value}%'
                }
            },
            series: [
                {
                    name: '整改率',
                    type: 'bar',
                    data: departmentsData['整改率'],
                    itemStyle: {
                        color: '#409eff'  // 蓝色
                    },
                    barWidth: 30  // 柱子宽度
                },
                {
                    name: '按期完成率',
                    type: 'bar',
                    data: departmentsData['按期完成率'],
                    itemStyle: {
                        color: '#67c23a'  // 绿色
                    },
                    barWidth: 30  // 柱子宽度
                }
            ]
        }
        chartInstance.current.setOption(option);
        const handleResize = () => {
            chartInstance.current?.resize();
        };
        window.addEventListener('resize', handleResize);
        return () => {
            window.removeEventListener('resize', handleResize);
            if (chartInstance.current) {
                chartInstance.current.dispose();
                chartInstance.current = null;
            }
        };
    },[])
    return<div  style={{width:'100%',height:'100%',backgroundColor:'#fff',padding:'10px',borderRadius:'4px'}}>
        <Tips title='各部门隐患整改情况对比'></Tips>
        <div ref={chartRef} style={{width:'100%',height:'270px'}}></div>
    </div>
}
const TrendAnalysis=()=>{
    const data=[
        {name:'Q3设备故障类隐患',tip:'占比最高',num:'45%',background: '#FFF1F2',border: '1px solid #FFD2D1',color:'#FF2526'},
        {name:'Q2安全防护隐患',tip:'显著下降',num:'32%',background: '#FFF7F0',border: '1px solid #FFD7BB',color:'#FF8800'},
        {name:'Q4电器隐患',tip:'持续改善',num:'28%',background: '#FFFAEA',border: '1px solid #F8EFD0',color: '#FFC403'},
        {name:'全年平均整改周期',tip:'同比缩短',num:'7天',background: '#EBFCEE',border:' 1px solid #C3F6CC',color:'#44BB5F'},
    ]

    return(
        <div style={{backgroundColor:'#fff',padding:'15px'}}>
            <Row gutter={10}>
                <Col span={17}>
                        <Tips title='隐患数据趋势分析'></Tips>
                        <GetBarChart style={{width:'100%',height:'600px'}}></GetBarChart>
                </Col>
                <Col span={7}>
                    {data.map((item,index)=>{
                        return(
                            <div style={{display:'flex', justifyContent:'space-between',backgroundColor:item.background,margin:'10px',padding:'10px',borderRadius:'4px',border:item.border}}>
                                <div>
                                    <div style={{fontSize:'16px',fontWeight:'500',color:'#333'}}>{item.name}</div>
                                    <div style={{fontSize:'12px',color:'#666666'}}>{item.tip}</div>
                                </div>
                                <div style={{display:'flex',alignItems:'center',color:item.color}}>
                                    {item.num}
                                </div>
                            </div>
                        )
                    })}

                </Col>
            </Row>
        </div>
    )
}
const DepartmentRankingTable=()=>{
    const [sortType, setSortType] = useState('整改率'); // 排序类型
    const [currentPage, setCurrentPage] = useState(3); // 当前页码
    const totalItems = 48; // 总条数
    const pageSize = 4; // 每页条数

    const mockData = [
        {
            '排名': 1,
            '部门': '安全部',
            '隐患总数': 135,
            '已整改': 156,
            '整改率': '97.6%',
            '按期完成率': '87%',
            '状态': '优秀'
        },
        {
            '排名': 2,
            '部门': '设备部',
            '隐患总数': 135,
            '已整改': 156,
            '整改率': '97.6%',
            '按期完成率': '87%',
            '状态': '良好'
        },
        {
            '排名': 3,
            '部门': '生产部',
            '隐患总数': 135,
            '已整改': 156,
            '整改率': '97.6%',
            '按期完成率': '87%',
            '状态': '一般'
        },
        {
            '排名': 4,
            '部门': '行政部',
            '隐患总数': 135,
            '已整改': 156,
            '整改率': '97.6%',
            '按期完成率': '87%',
            '状态': '预警'
        },
        // 可以继续添加更多数据...
    ];

    // 状态标签颜色映射
    const statusColorMap = {
        '优秀': 'green',
        '良好': 'orange',
        '一般': 'gold',
        '预警': 'red'
    };
    // 表格列配置
    const columns = [
        {
            title: '排名',
            dataIndex: '排名',
            key: '排名',
            width: 80,
            align:'center',
            render: (text) => (
                <div style={{ color: '#1890ff', fontWeight: 'bold',backgroundColor:'#E9EEFF' ,borderRadius:'50%',display:'inline-block',width:'40px',height:'40px',textAlign:'center',lineHeight:'40px'}}>{text}</div>
            )
        },
        {
            title: '部门',
            dataIndex: '部门',
            key: '部门',
            width: 120,
            align:'center',
        },
        {
            title: '隐患总数',
            dataIndex: '隐患总数',
            key: '隐患总数',
            width: 100,
            align:'center',
        },
        {
            title: '已整改',
            dataIndex: '已整改',
            key: '已整改',
            width: 100,
            align:'center',
        },
        {
            title: '整改率',
            dataIndex: '整改率',
            key: '整改率',
            width: 100,
            align:'center',
            render:(text)=>{
                return <span style={{color:'#2E4CD4'}}>{text}</span>
            }
        },
        {
            title: '按期完成率',
            dataIndex: '按期完成率',
            key: '按期完成率',
            width: 120,
            align:'center',
            render:(text)=>{
                return <span style={{color:'#2E4CD4'}}>{text}</span>
            }
        },
        {
            title: '状态',
            dataIndex: '状态',
            key: '状态',
            width: 100,
            align:'center',
            render: (status) => (
                <Tag color={statusColorMap[status]}>
                    {status}
                </Tag>
            )
        }
    ];
    // 排序变更处理
    const handleSortChange = (value) => {
        setSortType(value);
        // 实际项目中这里可以添加排序逻辑
    };

    // 分页变更处理
    const handlePageChange = (page) => {
        setCurrentPage(page);
        // 实际项目中这里可以添加分页数据请求逻辑
    };
    return <div style={{width:'100%',height:'100%'}}>
        <Content style={{ padding: '10px', backgroundColor: '#fff' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
                <Tips title='部门隐患整改效能排名'></Tips>
                <Select
                    defaultValue="整改率"
                    style={{ width: 180 }}
                    onChange={handleSortChange}
                    suffixIcon={<DownOutlined />}
                >
                    <Option value="整改率">按照整改率排序</Option>
                    <Option value="按期完成率">按照按期完成率排序</Option>
                    <Option value="隐患总数">按照隐患总数排序</Option>
                </Select>
            </div>

            <Table
                columns={columns}
                dataSource={mockData}
                pagination={false} // 关闭表格自带分页，使用外部分页组件
                // bordered
                rowKey="排名"
            />

            <div style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center', marginTop: 16 }}>
                <span style={{ marginRight: 16 }}>共 {totalItems} 条</span>
                <Pagination
                    current={currentPage}
                    total={totalItems}
                    pageSize={pageSize}
                    onChange={handlePageChange}
                    showSizeChanger={false} // 不显示每页条数选择器
                    showQuickJumper
                    showTotal={(total) => `共 ${total} 条`}
                />
            </div>
        </Content>
    </div>
}
const HiddenDangerCloud=()=>{
    return <div style={{width:'100%',height:'100%',backgroundColor:'#fff',padding:'10px'}}>
        <Tips title='高频隐患类型词云图'></Tips>
        <div style={{width:'100%',marginTop:'60px'}}>
            <div style={{backgroundImage:`url(${cloud})`,width:'522px',height:'361px',margin:'auto'}}>

            </div>
        </div>
    </div>
}
const HiddenDangerCount = () => {
    const headerList = [
        {
            title: '总隐患数',
            num: '1489',
            data: '12',
            flag: 1,
            grow: 1,
            backgroundColor:'#E5EEFE',
            color:'#1269FF',
        },
        {
            title:'已整改隐患',
            num:'986',
            data:'12',
            flag:1,
            grow:1,
            backgroundColor:'#D9F8E8',
            color:'#1DCE74',
        },
        {
            title:'整改率',
            num:'86%',
            data:'8',
            flag:2,
            grow:0,
            backgroundColor:'#FFF3E9',
            color:'orange',
        },
        {
            title:'按期整改率',
            num:'89%',
            data:'2',
            flag:3,
            grow:0,
            backgroundColor:'#FFE6E8',
            color:'#FF3E48',
        }
    ]
    return (
        <>
            <header style={{overflow: 'hidden', marginBottom: '10px'}}>
                <Row gutter={10}>
                    {headerList.map((item, index) => {
                        return <Col span={6}><MyCard {...item}></MyCard></Col>
                    })}
                </Row>
            </header>
            <section style={{overflow: 'hidden', marginBottom: '10px'}}>
                <Row gutter={10}>
                    <Col span={16}>
                        <TrendAnalysis></TrendAnalysis>
                    </Col>
                    <Col span={8}>
                        <DepartmentRateChart></DepartmentRateChart>
                    </Col>
                </Row>
            </section>
            <footer style={{overflow: 'hidden'}}>
                <Row gutter={10}>
                    <Col span={15}><DepartmentRankingTable></DepartmentRankingTable></Col>
                    <Col span={9}><HiddenDangerCloud></HiddenDangerCloud></Col>
                </Row>
            </footer>
        </>
    )
}
export default HiddenDangerCount