import {Button, Card, Col, Input, Row, Space, Steps, Tag} from "antd";
import MyCard, {MyTable, PieChart} from "@/pages/hrefficiency_hiddentrouble/component/MyCard";
import {useEffect, useRef} from "react";
import img1 from '../../../../assets/img/stepOne.png'
import img2 from '../../../../assets/img/stepTwo.png'
import img3 from '../../../../assets/img/stepThree.png'
import img4 from '../../../../assets/img/stepFour.png'
import * as echarts from 'echarts';

import {
    Export, Import,
    levelList,
    Select1, Select2
} from "@/pages/hrefficiency_hiddentrouble/component/hiddenDangerInspection/hiddenDangerInspection";
import styles from './hiddenDangerRighted.less'
const { Search } = Input;
const dataList=[
    {
        title:'待整改隐患',
        num:'169',
        data:'12',
        flag:1,
        grow:1,
        backgroundColor:'#E5EEFE',
        color:'#1269FF',
    },
    {
        title:'整改中隐患',
        num:'169',
        data:'12',
        flag:1,
        grow:1,
        backgroundColor:'#D9F8E8',
        color:'#1DCE74',
    },
    {
        title:'已完成整改',
        num:'169',
        data:'8',
        flag:2,
        grow:0,
        backgroundColor:'#FFF3E9',
        color:'orange',
    },
    {
        title:'整改完成率',
        num:'89%',
        data:'2',
        flag:3,
        grow:0,
        backgroundColor:'#FFE6E8',
        color:'#FF3E48',
    }
]


const columns=[
    {align:'center',title:'检查项',dataIndex:'inspectionItems',key:'inspectionItems'},
    {align:'center',title:'隐患名称',dataIndex:'name',key:'name'},
    {align:'center',title:'隐患等级',dataIndex:'level',key:'level',render:(level)=>{

            return <Tag color={levelList[level][0]} style={{color:levelList[level][1]}}>{level}</Tag>
        }},
    {align:'center',title:'登记时间',dataIndex:'createTime',key:'createTime'},
    {align:'center',title:'隐患来源',dataIndex:'source',key:'source'},
    {align:'center',title:'隐患描述',dataIndex:'description',key:'description',ellipsis:{showTitle:true}},
    {align:'center',title:'治理类型',dataIndex:'type',key:'type'},
    {align:'center',title:'治理期限',dataIndex:'deadline',key:'deadline'},
    {align:'center',title:'整改负责人',dataIndex:'head',key:'head'},
    {align:'center',title:'隐患状态',dataIndex:'state',key:'state',render:(state)=>{return <span style={{color:'green'}}>{state}</span>}},
    {align:'center',title:'验收时间',dataIndex:'acceptanceTime',key:'acceptanceTime'},
    {align:'center',title:'操作',dataIndex:'operation',key:'operation',render:(_,record)=>{
            return <div style={{display:"flex"}}>
                <Button type={"link"}>详情</Button>
                <Button type={"link"}>验收</Button>
            </div>
        }},
]

const dataSource=[
    {key:1,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述111111111111111111111111111111111111',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
    {key:2,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'中等隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
    {key:3,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'极高隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
    {key:4,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
    {key:5,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
    {key:6,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
    {key:7,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
    {key:8,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
    {key:9,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
    {key:10,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
    {key:11,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
    {key:12,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
    {key:13,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
    {key:14,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
    {key:15,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
    {key:16,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
    {key:17,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
    {key:18,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
    {key:19,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
    {key:20,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
    {key:21,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
    {key:21,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
    {key:21,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
    {key:21,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},
    {key:21,inspectionItems:'设备运行温度',name:'D10精馏车间',level:'一般隐患',createTime:'2025-03-01',source:'日常排查',description:'隐患描述',type:'限期整改',deadline:'2025-09-03',head:'张小龙',state:'已验收',acceptanceTime:'2025-09-03'},

]



const Qiu=(props)=>{
    return(
        <div className={styles['qiu']}>
            {props.num}
        </div>
    )
}
const items=[
    {'0': img1},
    {'1': img2},
    {'2': img3},
    {'3': img4},

]

const TrendChart=()=>{
    const TrendChart=useRef(null)
    useEffect(() => {
        const chart=echarts.init(TrendChart.current);
        const option={
            grid:{
                bottom:25,
                top:20,
            },
            legend:{
                show:true,
                left:'50%',
                top:0,
                icon: 'path://M0,0 L20,0',
                itemStyle:{
                    color:'#00A0E9',
                }
            },
            xAxis:{
                type:'category',
                data:['3月','4月','5月','6月','7月','8月'],
                axisLabel:{
                    color:'#000',
                },
                axisLine:{
                    lineStyle:{
                        color:'#00A0E9',
                        type:'dashed',
                    }
                },
                boundaryGap: false, // 关键
                axisTick: {
                    show: true,
                    alignWithLabel: true, // 关键
                    inside: true, // 刻度朝外
                    length: 100, // 足够长的长度（根据图表高度调整）
                    lineStyle: {
                        color: '#cccccc',
                        width: 1,
                        type: 'dashed',
                    }
                },
            },
            yAxis:{
                type:'value',
                axisLabel:{
                    color:'#000',
                    type:'dashed',
                },
                axisLine:{
                    show:true,
                    lineStyle:{
                        color:'#00A0E9',
                        type:'dashed',
                    }
                },
                splitLine:{
                    lineStyle:{
                        color:'#00A0E9',
                        type:'dashed'
                    }
                }
            },
            series:[
                {
                    name:'整改完成率',
                    data:[120,200,150,80,70,110],
                    type:'line',
                    smooth:true,
                    lineStyle:{
                        color:'#00A0E9'
                    },
                    areaStyle:{
                        color:{
                            type:'linear',
                            x:0,
                            y:0,
                            x2:0,
                            y2:1,
                            colorStops:[
                                {offset:0,color:'#00A0E9'},
                                {offset:1,color:'#99D4F5 '}
                            ]
                        }
                    },
                    symbol:'none'
                }
            ]
        }
        chart.setOption(option)
        // 响应式调整
        const handleResize = () => {
            chart.resize();
        };
        handleResize()
        window.addEventListener('resize', handleResize);

        // 清理函数
        return () => {
            window.removeEventListener('resize', handleResize);
            chart.dispose();
        };
    }, []);
    return(
        <div style={{padding:'10px',backgroundColor:'#fff',height:'100%',width:'100%'}}>
            <div style={{fontSize:'16px',fontWeight:'600'}}>
                <span style={{borderRight: '3px solid blue', marginRight: '15px'}}></span>隐患整改进度趋势
            </div>
            <div ref={TrendChart} style={{width:'100%',height:'136.86px'}} key={1}>
            </div>
        </div>
    )
}
const Workflow=()=>{
    return(
        <div style={{width: '100%', height: '100%', backgroundColor: '#fff',padding:'10px'}}>
            <div style={{fontSize: '16px', fontWeight: '600'}}>
                <span style={{borderRight: '3px solid blue', marginRight: '15px'}}></span>隐患整改流程
            </div>
            <div style={{display:'flex',justifyContent:'space-around'}}>
                {items.map((item,index)=>{
                    return (
                        <div key={index}>
                            <div className={styles['box']}>
                                <Qiu num={index+1}></Qiu>
                            </div>
                            <div style={{
                                width: '136px',
                                height: '111px',
                                backgroundImage: `url(${item[index]})`
                            }}>
                            </div>
                        </div>
                    )
                })}
            </div>
        </div>
    )
}

const HiddenDangerRighted = () => {
    return (
        <>
            <header style={{overflow: 'hidden', marginBottom: '10px'}}>
                <Row gutter={10}>
                    {dataList.map((item, index) => {
                        return <Col span={6}><MyCard {...item}></MyCard></Col>
                    })}
                </Row>
            </header>
            <section style={{overflow: 'hidden',marginBottom:'10px'}}>
                    <Row gutter={10}>
                        <Col span={15}>
                            <TrendChart></TrendChart>
                        </Col>
                        <Col span={9}>
                            <Workflow></Workflow>
                        </Col>
                    </Row>
            </section>
            <footer>
                <div style={{width: '100%', backgroundColor: '#fff', padding: '15px'}}>
                    <Space direction='vertical' size={"middle"} style={{width: '100%'}}>
                        <Row>
                            <span style={{borderRight: '3px solid blue', marginRight: '15px'}}></span>
                            <span style={{fontSize: '16px', fontWeight: '600'}}>隐患整改列表</span>
                        </Row>
                        <Row style={{display: 'flex', justifyContent: 'space-between'}}>
                            <div>
                                <Search placeholder="搜素检查项" style={{width: 300}}/>
                            </div>
                            <div>
                                <Space>
                                    <Select1></Select1>
                                    <Select2></Select2>
                                    <Import></Import>
                                    <Export></Export>
                                </Space>
                            </div>
                        </Row>
                        <Row>
                            <MyTable dataSource={dataSource} columns={columns}></MyTable>
                        </Row>
                    </Space>
                </div>
            </footer>
        </>
    )
}
export default HiddenDangerRighted;
