import React from 'react';
import ReactECharts from 'echarts-for-react';
import styles from './CurveAnalysis.less';

const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];

const trendOption = {
    color: ['#f2637b', '#f6b64d', '#5fa2e0', '#2fc25b'],
    tooltip: { trigger: 'axis' },
    legend: {
        top: 10,
        data: ['重大风险', '较大风险', '一般风险', '低风险']
    },
    grid: { left: 40, right: 20, top: 50, bottom: 40 },
    xAxis: {
        type: 'category',
        data: months,
        boundaryGap: false
    },
    yAxis: {
        type: 'value',
        name: '风险值'
    },
    series: [
        { name: '重大风险', type: 'line', smooth: true, data: [8, 14, 7, 15, 6, 10, 12, 5, 8, 6, 12, 16] },
        { name: '较大风险', type: 'line', smooth: true, data: [16, 11, 14, 18, 12, 16, 14, 12, 20, 14, 18, 20] },
        { name: '一般风险', type: 'line', smooth: true, data: [12, 13, 11, 12, 10, 12, 10, 9, 12, 11, 10, 12] },
        { name: '低风险', type: 'line', smooth: true, data: [10, 12, 9, 10, 8, 9, 8, 7, 9, 8, 7, 8] }
    ]
};

const levelBoard = [
    { name: '重大风险', value: 4, color: '#f2637b' },
    { name: '较大风险', value: 10, color: '#f6b64d' },
    { name: '一般风险', value: 4, color: '#5fa2e0' },
    { name: '低风险', value: 4, color: '#2fc25b' }
];

const levelOption = {
    color: levelBoard.map(i => i.color),
    tooltip: { trigger: 'item' },
    legend: { bottom: 0, icon: 'circle' },
    series: [
        {
            name: '风险等级分布',
            type: 'pie',
            radius: ['35%', '60%'],
            center: ['50%', '45%'],
            data: levelBoard.map(i => ({ name: i.name, value: i.value })),
            label: { formatter: '{b}: {d}%' }
        }
    ]
};

const typeOption = {
    color: ['#f2637b', '#f6b64d', '#5fa2e0', '#2fc25b'],
    tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
    legend: { top: 10, data: ['重大风险', '较大风险', '一般风险', '低风险'] },
    grid: { left: 50, right: 10, top: 50, bottom: 40 },
    xAxis: { type: 'category', data: ['设备故障', '操作违规', '环境泄露', '管理缺陷', '其他'] },
    yAxis: { type: 'value', name: '数量' },
    series: [
        { name: '重大风险', type: 'bar', stack: 'total', data: [18, 12, 16, 14, 10] },
        { name: '较大风险', type: 'bar', stack: 'total', data: [22, 16, 20, 18, 15] },
        { name: '一般风险', type: 'bar', stack: 'total', data: [20, 14, 18, 16, 12] },
        { name: '低风险', type: 'bar', stack: 'total', data: [16, 10, 14, 12, 8] }
    ]
};

const gaugeOption = {
    title: { text: '风险处理率', left: 'center', top: '5%', textStyle: { fontSize: 14, fontWeight: 600 } },
    series: [
        {
            type: 'gauge',
            startAngle: 220,
            endAngle: -40,
            radius: '80%',
            progress: { show: true, width: 18, itemStyle: { color: '#2fc25b' } },
            axisLine: { lineStyle: { width: 18, color: [[1, '#e6f7ff']] } },
            splitLine: { show: false },
            axisTick: { show: false },
            axisLabel: { show: false },
            pointer: { show: false },
            detail: {
                valueAnimation: true,
                formatter: '88%',
                color: '#2fc25b',
                fontSize: 28,
                offsetCenter: [0, '0%']
            },
            data: [{ value: 88 }]
        }
    ]
};

const CurveAnalysis = () => {
    return (
        <div className={styles.container}>
            <div className={styles.filtersRow}>
                <div className={styles.checkGroup}>
                    <span>风险等级</span>
                    {['红色', '橙色', '黄色', '蓝色'].map(label => (
                        <label key={label}>
                            <input type="checkbox" defaultChecked /> {label}
                        </label>
                    ))}
                </div>
                <div className={styles.filterItem}>
                    <span>时间范围</span>
                    <select>
                        <option>近12个月</option>
                        <option>近6个月</option>
                        <option>近3个月</option>
                    </select>
                </div>
                <div className={styles.filterItem}>
                    <span>分析对象</span>
                    <select>
                        <option>全厂</option>
                        <option>生产车间</option>
                        <option>仓储区</option>
                    </select>
                </div>
                <div className={styles.filterItem}>
                    <span>风险类型</span>
                    <select>
                        <option>全部</option>
                        <option>安全</option>
                        <option>环保</option>
                    </select>
                </div>
            </div>

            <div className={styles.topRow}>
                <div className={styles.panel}>
                    <div className={styles.panelHeader}>月度风险趋势分析</div>
                    <ReactECharts option={trendOption} style={{ height: 320 }} notMerge lazyUpdate />
                </div>
                <div className={styles.panel}>
                    <div className={styles.panelHeader}>风险等级分布</div>
                    <ReactECharts option={levelOption} style={{ height: 320 }} notMerge lazyUpdate />
                </div>
            </div>

            <div className={styles.bottomRow}>
                <div className={styles.panel}>
                    <div className={styles.panelHeader}>风险类型分布</div>
                    <ReactECharts option={typeOption} style={{ height: 280 }} notMerge lazyUpdate />
                </div>
                <div className={styles.panel}>
                    <ReactECharts option={gaugeOption} style={{ height: 280 }} notMerge lazyUpdate />
                </div>
            </div>
        </div>
    );
};

export default CurveAnalysis;
