import Icon from "antd/es/icon";
import {Col, Pagination, Row, Table} from "antd";
import {Descriptions} from "antd";
import * as echarts from 'echarts';
import {useEffect, useRef} from "react";

const HourglassSvg=()=>{
    return (
        <svg width="21px" height="33px" fill="currentColor" viewBox="0 0 1024 1024">
            <title>hourglass icon</title>
            <path
                d="M768 832h-512c-17.6 0-32-14.4-32-32s14.4-32 32-32h64v-192c0-52.8 33.6-99.2 84-116.8-50.4-17.6-84-64-84-116.8v-192h-64c-17.6 0-32-14.4-32-32s14.4-32 32-32h512c17.6 0 32 14.4 32 32s-14.4 32-32 32h-64v192c0 52.8-33.6 99.2-84 116.8 50.4 17.6 84 64 84 116.8v192h64c17.6 0 32 14.4 32 32s-14.4 32-32 32zM320 192v192c0 70.4 57.6 128 128 128s128-57.6 128-128v-192h-256zM448 768c-70.4 0-128-57.6-128-128v-192h256v192c0 70.4-57.6 128-128 128z"/>
        </svg>
    )
}
const HourglassIcon=(props)=>{
    return(
        <Icon component={HourglassSvg} {...props}></Icon>
    )
}

const MyCard = (props) => {
    return (
        <div style={{
            // width: '100%',
            // height: '134px',
            borderRadius: '5px',
            backgroundColor: 'white',
            padding: '20px 20px',
            boxSizing: 'border-box',
            display:'flex',
            justifyContent:'space-between'
        }}>
            <div>
                <div>{props.title}</div>
                <div style={{fontWeight: '600', fontSize: '18px', }}>{props.num}</div>
                {props.flag === 1 && <div style={{color: '#44BB5F', fontSize: '14px'}}>
                    {props.grow === 1 ? <>⬆</> : <>⬇</>}&nbsp;{props.data}%&nbsp;较上周
                </div>}
                {props.flag===2 && <div style={{color: 'orange',fontSize:'14px'}}>
                    {props.grow===1 ? <>⬆</>:<>⬇</>}&nbsp;{props.data}%&nbsp;较上周
                </div>}
                {props.flag===3 && <div style={{color: 'red',fontSize:'14px'}}>
                    {props.grow===1 ? <>⬆</>:<>⬇</>}&nbsp;{props.data}%&nbsp;较上周
                </div>}
            </div>
            <div style={{color:props.color,height:'53px',width:'53px',backgroundColor:props.backgroundColor,borderRadius:'10px',display:'flex',justifyContent:'center',alignItems: 'center'}}>
                <HourglassSvg ></HourglassSvg>
            </div>
        </div>
    )
}


// 环形图
const items = [
    {
        key: '1',
        children: '设备安全',
        color:'#868BF9',
    },
    {
        key: '2',
        children: '电气安全',
        color:'#F29629',
    },
    {
        key: '3',
        children: '消防安全',
        color:'#FFD85A',
    },
    {
        key: '4',
        children: '工艺安全',
        color:'#5ED6BE',
    },
    {
        key: '5',
        children: '储罐专业',
        color:'#00AAFF',
    },
    {
        key: '6',
        children: '其他',
        color:'#5FDCF7',
    },
];
export const PieChart=(props)=>{
    const chartRef=useRef(null)
    const data=[
        { value: 5, name: '设备安全' ,itemStyle:{color:'#868BF9'}},
        { value: 5, name: '电气安全',itemStyle:{color:'#F29629'} },
        { value: 10, name: '消防安全' ,itemStyle:{color:'#FFD85A'}},
        { value: 20, name: '工艺安全',itemStyle:{color:'#5ED6BE'} },
        { value: 30, name: '储罐专业',itemStyle:{color:'#00AAFF'} },
        { value: 30, name:'其他',itemStyle:{color:'#5FDCF7'}}
    ]
    useEffect(() => {
        const chart=echarts.init(chartRef.current)
        const option = {
            legend: {
                show:false,
                orient: 'vertical',
                x: 'left',
                data: ['设备安全', '电气安全', '消防安全', '工艺安全', '储罐专业','其他']
            },
            grid:{
                top: 20,
                bottom: 20,
                left: 20,
                right: 20,
            },
            series: [
                {
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: true,
                        formatter: '{d}%',
                        position: 'outsider',
                    },
                    labelLine: {
                        show: true
                    },
                    emphasis: {
                        label: {
                            show: true,
                            position:'center',
                            fontSize: '15',
                            fontWeight: 'bold',
                            formatter: function(params) {
                                return `${params.name}\n${params.percent}%`;
                            },

                        }
                    },
                    data:data,
                },
            ]
        };
        chart.setOption(option)
        // 响应式调整
        const handleResize = () => {
            chart.resize();
        };

        window.addEventListener('resize', handleResize);

        // 清理函数
        return () => {
            window.removeEventListener('resize', handleResize);
            chart.dispose();
        };
    }, []);

    return(
        <div style={{backgroundColor:'#fff',borderRadius:'5px',padding:'15px',boxSizing:'border-box'}}>
            <Row>
                <Col span={9}>
                    <Descriptions
                        title={<><span style={{borderRight: '3px solid blue', marginRight: '15px'}}></span> {props.title}</>}
                        column={2}
                    >
                        {items.map((item)=>{
                            return(
                                <Descriptions.Item>
                                    <div style={{display:'flex',alignItems:'center',fontSize:'12px'}}>
                                        <span style={{borderBottom:'4px solid',width:'10px',marginRight:'5px',borderBottomColor:item.color }}></span>
                                        {item.children}
                                    </div>
                                </Descriptions.Item>
                            )
                        })}


                     </Descriptions>

                </Col>
                <Col span={15}>
                    <div ref={chartRef}
                        style={{width:'100%',height:'100%',}}
                         key={2}
                    >

                    </div>
                </Col>
            </Row>
        </div>
    )
}

// 柱状图

export const BarChart=()=>{
    const chartRef=useRef(null)
    const data=[]
    useEffect(() => {
        const chart =echarts.init(chartRef.current)
        const option = {
            grid:{
                top:20,
                bottom:20,
                right:30,
                left:30,
            },
            xAxis:{
                type: 'category',
                data:['每日','每周','每月','每季度','每半年','每年','季节性','专项'],
                axisLine:{
                    show:true,
                    lineStyle:{
                        color:'#D5E2FF'
                    }
                },
                axisLabel:{
                    show:true,
                    position:'bottom',
                    color:'#333'
                },

            },
            yAxis:{
                type:'value',

                axisLine:{
                    show:true,
                    min:0,
                    lineStyle:{
                        color:'#D5E2FF'
                    }

                },
                axisLabel: {
                    show:true,
                    color:'#333'
                },
                splitLine:{
                    show:true,
                    lineStyle:{
                        color:'#D5E2FF',
                        type:'dashed'
                    }
                },
                nameTextStyle:{
                    color:'#000',
                    fontSize:16,
                    fontWeight:'600',
                }
            },
            series:[
                {
                    name: '数据系列1',
                    type: 'bar', // 柱状图
                    data: [120, 200, 150, 80, 70,123,70,90], // 数据值
                    barWidth: '20%', // 柱子宽度
                    itemStyle: {
                        color: '#007BFF', // 柱子颜色
                        borderRadius: [4, 4, 0, 0] ,// 柱子圆角
                    },
                    label: {
                        show: true,
                        position: 'top', // 数据标签位置
                        color: '#333'
                    },
                    emphasis: { // 高亮样式
                        itemStyle: {
                            color: '#7491db'
                        }
                    }
                }
            ]

        }
        chart.setOption(option)
        const handleResize = () => {
            chart.resize();
        };

        window.addEventListener('resize', handleResize);

        // 清理函数
        return () => {
            window.removeEventListener('resize', handleResize);
            chart.dispose();
        };
    })
    return(
        <div  style={{width: '100%', height: '100%', backgroundColor: '#fff',padding:'15px'}}>
            <div style={{fontSize:'16px',fontWeight:'600'}}><span style={{borderRight: '3px solid blue', marginRight: '15px'}}></span>检查频次分布</div>
            <div ref={chartRef} style={{width:'100%',height:'126.84px',}}>

            </div>
        </div>

    )
}

export const MyTable=(props)=>{
    const {dataSource,columns}=props
    return (
        <>
            <Table
                dataSource={dataSource}
                columns={columns}
                pagination={{
                    total:25,
                    showSizeChanger:true,
                    showQuickJumper:true,
                    showTotal:() => '共 25 条',
                    pageSizeOptions:[5,10,20,50,100],
                    defaultPageSize:5,
                    style:{
                        marginTop:50
                    }
                }}
                style={{width:'100%'}}
            />

        </>
    )
}
export const Tips=(props)=>{
    return <div style={{margin:'10px 0'}}>
        <span style={{borderRight:'3px solid #2E4CD4',marginRight:'15px',}}></span>
        <span style={{fontSize:'16px',fontWeight:'500'}}>{props.title}</span>
    </div>
}

export default MyCard;
