
import styles from './HomePage.less';
import ReactECharts from 'echarts-for-react';
import svg1 from '@/assets/img/homepageSvg1.svg'
import svg2 from '@/assets/img/homepage2.svg'
import svg3 from '@/assets/img/homepage3.svg'
import svg4 from '@/assets/img/homepage4.svg'
import svg5 from '@/assets/img/homepage5.svg'
import svg6 from '@/assets/img/homepage6.svg'
import svg7 from '@/assets/img/homepage7.svg'
import svg8 from '@/assets/img/homepage8.svg'
import svg9 from '@/assets/img/homepage9.svg'
import {Col, Row} from "antd";
import Title from './compontent/title'


const WorkStatItem = (props) => {
    return (
        <div className={styles['work-stat-item']}>
                <div>
                    <div style={{fontSize:'24px',fontWeight:'500'}}>{props.num}</div>
                    <div style={{marginTop:'10px'}}>{props.title}</div>
                </div>
                <div>
                    <img src={props.svg} alt="" />
                </div>
        </div>
    )
}

const PieChart1 = () => {
    // 饼图的配置项
    const option = {
        series: [
            {
                type: 'pie',
                radius: ['40%', '70%'], // 环形饼图（内半径、外半径）
                center: ['20%', '50%'], // 图表中心位置
                data: [
                    { name: '终端', value: 600, itemStyle: { color: '#86bbd8' } },
                    { name: '服务器', value: 500, itemStyle: { color: '#a0c4e2' } },
                    { name: '网络设备', value: 400, itemStyle: { color: '#6c96b9' } },
                    { name: '安全设备', value: 700, itemStyle: { color: '#2e8bc0' } },
                    { name: '其他', value: 452, itemStyle: { color: '#a2d5c6' } },
                    { name: '外设', value: 550, itemStyle: { color: '#d4e2d4' } },
                    { name: '附件', value: 300, itemStyle: { color: '#f3eec3' } },
                    { name: '配件', value: 200, itemStyle: { color: '#e8d4b0' } },
                    { name: '机房环境类', value: 150, itemStyle: { color: '#1a3a4d' } },
                ],
                label: {
                    show: false, // 不显示默认标签
                },
                emphasis: {
                    scale: true,
                },
            },
            {
                type: 'pie',
                radius: ['0%', '40%'], // 中间环形的大小
                center: ['20%', '50%'],
                label: {
                    show: true,
                    formatter: '3852台', // 中间显示的文本
                    fontSize: 24,
                    fontWeight: 'bold',
                    position: 'center',
                },
                labelLine: {
                    show: false,
                },
                data: [{ value: 1, itemStyle: { color: 'rgba(234, 250, 246, 1)' } }], // 白色背景
            },
        ],
        legend: {
            orient: 'vertical',
            right: 10,
            top: 'center',
            data: ['终端', '服务器', '网络设备', '安全设备', '其他', '外设', '附件', '配件', '机房环境类'],
            itemWidth: 12,
            itemHeight: 3,
            itemGap: 30,
        },
    };

    return <ReactECharts option={option} style={{ width: '100%', height: '220px' }} />;
};

const PieChart2 = () => {
    // 饼图的配置项
    const option = {
        series: [
            {
                type: 'pie',
                radius: ['40%', '70%'], // 环形饼图（内半径、外半径）
                center: ['20%', '50%'], // 图表中心位置
                data: [
                    { name: '终端', value: 600, itemStyle: { color: '#86bbd8' } },
                    { name: '服务器', value: 500, itemStyle: { color: '#a0c4e2' } },
                    { name: '网络设备', value: 400, itemStyle: { color: '#6c96b9' } },
                    { name: '安全设备', value: 700, itemStyle: { color: '#2e8bc0' } },
                    { name: '其他', value: 452, itemStyle: { color: '#a2d5c6' } },
                    { name: '外设', value: 550, itemStyle: { color: '#d4e2d4' } },
                    { name: '附件', value: 300, itemStyle: { color: '#f3eec3' } },
                    { name: '配件', value: 200, itemStyle: { color: '#e8d4b0' } },
                    { name: '机房环境类', value: 150, itemStyle: { color: '#1a3a4d' } },
                ],
                label: {
                    show: false, // 不显示默认标签
                },
                emphasis: {
                    scale: true,
                },
            },
            {
                type: 'pie',
                radius: ['0%', '40%'], // 中间环形的大小
                center: ['20%', '50%'],
                label: {
                    show: true,
                    formatter: '3852台', // 中间显示的文本
                    fontSize: 24,
                    fontWeight: 'bold',
                    position: 'center',
                },
                labelLine: {
                    show: false,
                },
                data: [{ value: 1, itemStyle: { color: 'rgba(240, 240, 240, 0.5)' } }], // 白色背景
            },
        ],
        legend: {
            orient: 'vertical',
            right: 10,
            top: 'center',
            data: ['终端', '服务器', '网络设备', '安全设备', '其他', '外设', '附件', '配件', '机房环境类'],
            itemWidth: 12,
            itemHeight: 3,
            itemGap: 30,
        },
    };

    return <ReactECharts option={option} style={{ width: '100%', height: '220px' }} />;
};


const BarChart = () => {
    const barData = [
        { name: '终端', value: 74, color: '#86bbd8' },
        { name: '服务器', value: 96, color: '#a0c4e2' },
        { name: '网络设备', value: 95, color: '#6c96b9' },
        { name: '安全设备', value: 65, color: '#2e8bc0' },
        { name: '外设', value: 47, color: '#d4e2d4' },
        { name: '附件', value: 61, color: '#f3eec3' },
        { name: '配件', value: 71, color: '#e8d4b0' },
        { name: '机房环境类', value: 45, color: '#1a3a4d' },
        { name: '其他', value: 93, color: '#a2d5c6' },
    ];
    // 创建多个系列，每个系列对应一个图例项
    const series = barData.map(item => ({
        name: item.name,
        type: 'bar',
        data: new Array(barData.length).fill(0).map((_, index) =>
            index === barData.findIndex(d => d.name === item.name) ? item.value : 0
        ),
        itemStyle: {
            color: item.color
        },
        barWidth: 20,
        barGap: 0,
        label: {
            show: true,
            position: 'top',
            formatter: '{c}'
        }
    }));
    // const color= [
    //     '#86bbd8', // 终端
    //     '#a0c4e2', // 服务器
    //     '#6c96b9', // 网络设备
    //     '#2e8bc0', // 安全设备
    //     '#d4e2d4', // 外设
    //     '#f3eec3', // 附件
    //     '#e8d4b0', // 配件
    //     '#1a3a4d', // 机房环境类
    //     '#a2d5c6', // 其他
    // ]
    const option = {
        grid:{
            left:40,
            right:'25%',
            bottom:25,
            top:30,
        },
        xAxis: {
            type: 'category',
            data: barData.map(item => item.name),
            axisLine: {
                lineStyle: {
                    color: '#ccc'
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#666',
                fontSize: 12,
                interval: 0,
                rotate: 0 // 可以根据标签长度调整旋转角度
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(204, 204, 204, 1)',
                    type: 'dashed',
                    dashOffset: 5
                }
            }
        },
        yAxis: {
            type: 'value',
            max: 100,
            min: 0,
            interval: 25,
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#ccc'
                }
            },
            axisTick: {
                show: false
            },
            splitLine: {
                lineStyle: {
                    color: '#f0f0f0',
                    type: 'dashed'
                }
            },
            axisLabel: {
                color: '#666',
                fontSize: 12,
                formatter: '{value}'
            }
        },
        series: series,
        legend: {
            orient: 'vertical',
            right: 10,
            top: 'center',
            show:true,
            icon: 'rect',
            itemWidth: 12,
            itemHeight: 3,
            itemGap: 30,
            textStyle: {
                color: '#333',
                fontSize: 12
            },
            data: barData.map(item => item.name),
        },
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(255, 255, 255, 0.9)',
            borderColor: '#ccc',
            borderWidth: 1,
            textStyle: {
                color: '#333'
            },
            formatter: (params) => {
                const data = params[0];
                return `
          <div style="font-weight: bold; margin-bottom: 5px;">${data.name}</div>
          <div>数量: ${data.value}</div>
        `;
            }
        }

    };

    return <ReactECharts option={option} style={{ width: '100%', height: '220px' }} />;
};
const HomePage = () => {
    const workStatItems = [
        {
            svg: svg2,
            title: '资产维修',
            num: '05'
        },
        {
            svg: svg3,
            title: '资产采购',
            num: '12'
        },
        {
            svg: svg4,
            title: '资产借用',
            num: '25'
        },
        {
            svg: svg5,
            title: '安装实施',
            num: '55'
        },
        {
            svg: svg6,
            title: '巡检任务',
            num: '49'
        },
        {
            svg: svg7,
            title: '资产报废',
            num: '96'
        },
        {
            svg: svg8,
            title: '工作日报',
            num: '64'
        },
        {
            svg: svg9,
            title: '资产领用',
            num: '46'
        },
    ]
    const assetShowItems = [
        {
            title: '终端',
            num: '3852',
            color:'rgba(183, 229, 213, 0.2)'
        },
        {
            title: '服务器',
            num: '123',
            color:'rgba(186, 212, 219, 1)'
        },
        {
            title: '网络设备',
            num: '3852',
            color:'rgba(94, 148, 155, 1)'
        },
        {
            title: '安全设备',
            num: '123',
            color:'rgba(16, 117, 142, 1)'
        },
        {
            title: '外设',
            num: '3852',
            color:'rgba(182, 221, 224, 1)'
        },
        {
            title: '附件',
            num: '123',
            color:'rgba(228, 234, 241, 1)'
        },
        {
            title: '配件',
            num: '3852',
            color:'rgba(198, 220, 208, 1)'
        },
        {
            title: '机房环境类',
            num: '123',
            color:'rgba(220, 225, 194, 1)'
        },

    ]
    const noticeItems = [
        {title: '核心服务器离线，请处理',isRead:false,date:'2025-10-29'},
        {title: '温湿度超阈值，触发告警',isRead:false,date:'2025-10-29'},
        {title: '巡检任务未完成，逾期提醒',isRead:true,date:'2025-10-29'},
        {title: '备件库存不足，需补货',isRead:true,date:'2025-10-29'},
        {title: '设备固件待升级，勿断电',isRead:true,date:'2025-10-29'},
    ]
    return (
        <div className={styles['homepage']}>
            <div className={styles['homepage-title']}>
                <span style={{color:'rgba(255, 37, 38, 1)'}}>紧急告警</span>：本系统将于2025年10月31进行更新，更新时暂时无法实时更新数据，请大家及时做好准备！更新后会自动更新
            </div>
            <div className={styles['homepage-content']}>
                <Row gutter={16} >
                    <Col span={10}>
                        <div className={styles['homepage-content-item1']}>
                            <div className={styles['homepage-name']}>
                                下午好，<span>Serati Ma!</span>
                            </div>
                            <div className={styles['homepage-date']}>
                                2025-10-29 星期三
                            </div>
                            <div style={{marginTop:'70px'}}>
                                <Row gutter={20}>
                                    <Col span={7}>
                                        <div className={styles['homepage-content-item1-content']}>
                                            <div>12</div>
                                            <Row gutter={10} align={'middle'} style={{marginTop:'20px'}}>
                                                <Col><img src={svg1} alt=""/></Col>
                                                <Col>待办工作</Col>
                                                <Col>&gt;</Col>
                                            </Row>
                                        </div>
                                    </Col>
                                    <Col span={7}>
                                        <div className={styles['homepage-content-item1-content']} >
                                            <div>26</div>
                                            <Row gutter={10} align={'middle'} style={{marginTop:'20px'}}>
                                                <Col><img src={svg1} alt=""/></Col>
                                                <Col>未读消息</Col>
                                                <Col>&gt;</Col>
                                            </Row>
                                        </div>
                                    </Col>
                                </Row>
                            </div>
                        </div>
                    </Col>
                    <Col span={14}>
                        <div className={styles['homepage-content-item2']}>
                            <Title title={'工作统计'}/>
                            <Row gutter={[16,16]} wrap={true} justify={'space-between'} className={styles['marginTop20']}>
                                {
                                    workStatItems.map(item=>{
                                        return(
                                            <Col span={5}>
                                                <WorkStatItem svg={item.svg} title={item.title} num={item.num}/>
                                            </Col>
                                        )
                                    })
                                }
                            </Row>
                        </div>
                    </Col>
                </Row>
                <Row gutter={16} className={styles['marginTop20']}>
                    <Col span={8}>
                        <div className={styles['content']}>
                            <Title title={'库存资产'}/>
                            <PieChart1></PieChart1>
                        </div>
                    </Col>
                    <Col span={8}>
                        <div className={styles['content']}>
                            <Title title={'故障资产'}/>
                            <PieChart2></PieChart2>
                        </div>
                    </Col>
                    <Col span={8}>
                        <div className={styles['content']}>
                            <Title title={'资产展示'}></Title>
                            <Row gutter={[20,30]} justify={'space-between'} wrap={true} className={styles['marginTop20']} >
                                {
                                    assetShowItems.map(item=>{
                                        return (
                                            <Col span={5}>
                                                <div style={{width:'52px'}}>

                                                    <div style={{
                                                        backgroundColor: item.color,
                                                        height: '52px',
                                                        width: '52px',
                                                        lineHeight: '52px',
                                                        textAlign: 'center'
                                                    }}>
                                                        {item.num}
                                                    </div>
                                                    <div style={{textAlign: 'center',marginTop:'10px',wordBreak:'keep-all'}}>
                                                        {item.title}
                                                    </div>
                                                </div>
                                            </Col>
                                        )
                                    })
                                }
                            </Row>
                        </div>
                    </Col>
                </Row>
                <Row gutter={16} className={styles['marginTop20']}>
                    <Col span={16}>
                        <div className={styles['content']}>
                            <Title title={'再用资产'}></Title>
                            <BarChart></BarChart>
                        </div>
                    </Col>
                    <Col span={8}>
                        <div className={styles['content']}>
                            <Title title={'重要通知'}></Title>
                            {noticeItems.map(item=>{
                                return(
                                    <div style={{borderBottom:'1px solid rgba(205, 205, 205, 1)',padding:'10px 0',marginTop:'10px'}}>
                                        {item.title}{!item.isRead && <span style={{color:'red',verticalAlign:'super'}}>new</span>}
                                        <div style={{float:'right',padding:'10px 0',color:'rgba(193, 193, 193, 1)'}}>{item.date}</div>
                                    </div>
                                )
                            })}
                        </div>
                    </Col>
                </Row>

            </div>
        </div>

    )
}
export default HomePage
