import React, { useRef, useEffect, useState } from 'react';
import { Card, Row, Col, Select, Progress, Button, Tag } from 'antd';
import ReactECharts from 'echarts-for-react';
import { CheckCircleOutlined } from '@ant-design/icons';
import './ProductWaste.less';
import ledgerIcon from '@/assets/business_envmonitoring/ledger_icon.svg';
import alarmIcon from '@/assets/business_envmonitoring/alarm_icon.svg';
import warningIcon from '@/assets/business_envmonitoring/warning_icon.svg';
import normalIcon from '@/assets/business_envmonitoring/normal_icon.svg';
const ProductWaste = () => {
    const leftRef = useRef(null);
    const [leftHeight, setLeftHeight] = useState('auto');
    useEffect(() => {
        function updateHeight() {
            if (leftRef.current) {
                setLeftHeight(leftRef.current.offsetHeight);
            }
        }
        updateHeight();
        window.addEventListener('resize', updateHeight);
        return () => window.removeEventListener('resize', updateHeight);
    }, []);
    const yearOptions = [
        { label: '2024', value: '2024' },
        { label: '2023', value: '2023' },
    ];

    const timeTypeOptions = [
        { label: '月', value: 'month' },
        { label: '季度', value: 'quarter' },
        { label: '年', value: 'year' },
    ];

    const monthOptions = [
        { label: '本月', value: 'month' },
        { label: '本季度', value: 'quarter' },
        { label: '本年', value: 'year' },
    ];

    // 折线图 option
    const lineOption = {
        tooltip: { trigger: 'axis' },
        legend: {
            data: ['产废量', '贮存量', '处置量'],
            top: 0,
            itemWidth: 18, // 图标宽度
            itemHeight: 8  // 图标高度
        },
        grid: { left: 40, right: 20, top: 30, bottom: 20 },
        xAxis: {
            type: 'category',
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisLine: {
                lineStyle: {
                    color: '#D5E2FF'
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                color: '#333'
            }
        },
        yAxis: {
            type: 'value',
            name: '(吨)',
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: '#D5E2FF'
                }
            }
        },
        series: [
            { name: '产废量', type: 'line', smooth: false, data: [20, 25, 18, 22, 30, 15, 28, 19, 24, 21, 27, 23], lineStyle: { color: '#FF8800', width: 1 }, itemStyle: { color: '#FF8800' } },
            { name: '贮存量', type: 'line', smooth: false, data: [30, 28, 32, 25, 20, 27, 22, 29, 26, 31, 24, 28], lineStyle: { color: '#FFC403', width: 1 }, itemStyle: { color: '#FFC403' } },
            { name: '处置量', type: 'line', smooth: false, data: [15, 10, 12, 18, 20, 13, 17, 14, 16, 11, 19, 12], lineStyle: { color: '#00AAFA', width: 1 }, itemStyle: { color: '#00AAFA' } },
        ],
    };

    // 南丁格尔玫瑰图 option（数值大的扇叶半径更大）
    const pieOption = {
        color: ['#32AEED', '#4FD884', '#6D59FF', '#FF685D', '#D25BDD', '#FFB800'],
        legend: {
            orient: 'vertical',
            right: '10%',
            top: 'center',
            itemWidth: 13,
            itemHeight: 4,
            textStyle: {
                fontSize: 12,
                color: '#333'
            }
        },
        series: [{
            name: '固废种类构成',
            type: 'pie',
            // radius: ['20%', '70%'],
            center: ['30%', '45%'],
            // roseType: 'radius', // 南丁格尔玫瑰图，扇区半径根据数值大小变化
            avoidLabelOverlap: false,
            label: {
                show: true,
                position: 'inside',
                formatter: '{d}%',  // 显示占比百分数
                fontSize: 12,
                color: '#ffffff',
                fontWeight: 'bold'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '14',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: true,
                length: 10,
                length2: 5,
                lineStyle: {
                    color: '#999',
                    width: 1
                }
            },
            data: [
                { value: 45, name: '危险废物' },
                { value: 10, name: '一般固废' },
                { value: 13, name: '建筑垃圾' },
                { value: 15, name: '医疗废物' },
                { value: 8, name: '电子废物' },
                { value: 9, name: '其他' }
            ]
        }]
    };

    // 危固废占比
    const dangerPercent = 88;

    // 固废点情况
    const pointStatus = [
        { type: '超期库存点', value: 8, color: '#FF6B6B', btn: '详情' },
        { type: '预警库存点', value: 12, color: '#FFD666', btn: '详情' },
        { type: '正常库存点', value: 8, color: '#52C41A', btn: '详情' },
    ];

    // 单位产废排名 option
    const rankData = [
        { name: 'xxx单位', value: 50.21 },
        { name: 'xxx单位', value: 50.00 },
        { name: 'xxx单位', value: 48.52 },
        { name: 'xxx单位', value: 45.03 },
        { name: 'xxx单位', value: 30.25 },
        { name: 'xxx单位', value: 30.00 },
        { name: 'xxx单位', value: 20.02 },
        { name: 'xxx单位', value: 30.25 },
    ];

    const maxValue = Math.max(...rankData.map(item => item.value));

    // 各类别固废量 option
    const categoryBarOption = {
        grid: { left: 40, right: 20, top: 10, bottom: 20 },
        xAxis: {
            type: 'category',
            data: ['xxx类', 'xxx类', 'xxx类', 'xxx类', 'xxx类', 'xxx类', 'xxx类', 'xxx类', 'xxx类', 'xxx类', 'xxx类', 'xxx类'],
            axisTick: { show: false },
            axisLine: { show: false }
        },
        yAxis: {
            type: 'value',
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: '#E9EBF1',
                    width: 1
                }
            }
        },
        series: [{
            type: 'bar',
            data: [20, 25, 18, 22, 30, 15, 28, 19, 24, 21, 27, 23],
            barWidth: 10,
            itemStyle: {
                color: '#9F92FF',
                barBorderRadius: [10, 10, 0, 0] // 顶部圆弧，底部直角
            }
        }]
    };

    // 台账信息管理按钮
    const ledgerBtns = [
        '产废单位及产废信息',
        '危固废单位及产废信息',
        '贮废点及贮废信息',
        '固废种类信息',
        '固废利用处置明细',
        '固废运输单位',
    ];
    return (
        <div className="productWasteDashboard">
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'stretch', marginBottom: 8 }}>
                {/* 左侧容器 */}
                <div style={{ width: '80%', marginRight: 8 }} ref={leftRef}>
                    <Row style={{ marginBottom: 8 }}>
                        {/* 顶部折线图+右侧单位产废排名 */}
                        <Col span={24}>
                            <Card className="pw-card pw-card-top">
                                <div className="pw-card-header">
                                    <span className="pw-title pw-title-blue">固定产、存、处趋势分析</span>
                                    <div className="pw-select-group">
                                        <Select size="small" options={timeTypeOptions} defaultValue={'year'} className="pw-select" style={{ width: 60, marginRight: 10 }} />
                                        <Select size="small" options={yearOptions} defaultValue={'2024'} className="pw-select" />
                                    </div>
                                </div>
                                <ReactECharts option={lineOption} className="pw-echarts-line" style={{ height: 200 }} />
                            </Card>
                        </Col>
                    </Row>
                    <Row gutter={[8, 16]} className="pw-row-middle">
                        {/* 左侧危固废占比+中间饼图+右侧固废点情况 */}
                        <Col span={8}>
                            <Card className="pw-card pw-card-middle">
                                <div className="pw-card-header">
                                    <span className="pw-title pw-title-blue">危固废占比</span>
                                    <div className="pw-select-group">
                                        <Select size="small" options={timeTypeOptions} defaultValue={'year'} className="pw-select" style={{ width: 60, marginRight: 10 }} />
                                        <Select size="small" options={yearOptions} defaultValue={'2024'} className="pw-select" />
                                    </div>
                                </div>
                                <div className="pw-progress-circle-wrap">
                                    <Progress
                                        type="circle"
                                        percent={dangerPercent}
                                        width={120}
                                        strokeColor={{ '0%': '#FF6B6B', '100%': '#FFD666' }}
                                        format={p => (
                                            <>
                                                <div style={{ fontSize: 18, whiteSpace: 'pre-line', lineHeight: '18px', fontWeight: 'bold' }}>{`${p}%`}</div>
                                                <div style={{ fontSize: 12, whiteSpace: 'pre-line', lineHeight: '18px' }}>危固废</div>
                                            </>

                                        )}
                                    />
                                </div>
                            </Card>
                        </Col>
                        <Col span={8} style={{ padding: 0 }}>
                            <Card className="pw-card pw-card-middle">
                                <div className="pw-card-header">
                                    <span className="pw-title pw-title-blue">固废种类构成</span>
                                    <div className="pw-select-group">
                                        <Select size="small" options={timeTypeOptions} defaultValue={'year'} className="pw-select" style={{ width: 60, marginRight: 10 }} />
                                        <Select size="small" options={yearOptions} defaultValue={'2024'} className="pw-select" />
                                    </div>
                                </div>
                                <ReactECharts option={pieOption} className="pw-echarts-pie" style={{ height: 160 }} />
                            </Card>
                        </Col>
                        <Col span={8}>
                            <Card className="pw-card pw-card-middle">
                                <span className="pw-title pw-title-blue">贮废点情况</span>
                                <div className="pw-point-status-new-wrap">
                                    {/* 超限库存点 */}
                                    <div className="pw-point-status-new pw-point-status-over">
                                        <div className="pw-point-status-left">
                                            <span className="pw-point-status-icon">
                                                <img src={alarmIcon} alt="超限库存点" />
                                            </span>
                                            <span className="pw-point-status-type">超限库存点</span>
                                            <span className="pw-point-status-value">8</span>
                                        </div>
                                        <Button size="small" className="pw-point-status-btn pw-point-status-btn-over">详情</Button>
                                    </div>
                                    {/* 预警库存点 */}
                                    <div className="pw-point-status-new pw-point-status-warning">
                                        <div className="pw-point-status-left">
                                            <span className="pw-point-status-icon">
                                                <img src={warningIcon} alt="预警库存点" />
                                            </span>
                                            <span className="pw-point-status-type">预警库存点</span>
                                            <span className="pw-point-status-value">12</span>
                                        </div>
                                        <Button size="small" className="pw-point-status-btn pw-point-status-btn-warning">详情</Button>
                                    </div>
                                    {/* 正常库存点 */}
                                    <div className="pw-point-status-new pw-point-status-normal">
                                        <div className="pw-point-status-left">
                                            <span className="pw-point-status-icon">
                                                <img src={normalIcon} alt="正常库存点" />
                                            </span>
                                            <span className="pw-point-status-type">正常库存点</span>
                                            <span className="pw-point-status-value">8</span>
                                        </div>
                                        <Button size="small" className="pw-point-status-btn pw-point-status-btn-normal">详情</Button>
                                    </div>
                                </div>
                            </Card>
                        </Col>
                    </Row>
                </div>
                {/* 右侧容器 */}
                <div style={{ width: '20%', overflow: 'auto' }}>
                    <Card className="pw-card pw-card-middle">
                        <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
                            <span className="pw-title pw-title-blue">单位产废排名</span>
                            <Select size="small" options={monthOptions} defaultValue={'month'} className="pw-select" style={{ width: 70}}/>
                        </div>
                        <div className="pw-rank-list">
                            {rankData.map((item, idx) => (
                                <div className="pw-rank-item" key={idx}>
                                    <div className="pw-rank-row">
                                        <span className="pw-rank-name">{item.name}</span>
                                        <span className="pw-rank-value">{item.value}吨</span>
                                    </div>
                                    <Progress
                                        percent={Math.round((item.value / maxValue) * 100)}
                                        showInfo={false}
                                        strokeColor="#5B8FF9"
                                        trailColor="#E9EBF1"
                                        style={{ marginBottom: 8 }}
                                        size="small"
                                    />
                                </div>
                            ))}
                        </div>
                    </Card>
                </div>

            </div>
            <Row className="pw-row-bottom">
                {/* 下方左侧各类别固废量+右侧台账信息管理 */}
                <Col span={13} style={{ paddingRight: 8 }}>
                    <Card className="pw-card pw-card-bottom">
                        <div className="pw-card-header">
                            <span className="pw-title pw-title-blue">各类固废量</span>
                            <div className="pw-select-group">
                                <Select size="small" options={timeTypeOptions} defaultValue={'year'} className="pw-select" style={{ width: 60, marginRight: 10 }} />
                                <Select size="small" options={yearOptions} defaultValue={'2024'} className="pw-select" />
                            </div>
                        </div>
                        <ReactECharts option={categoryBarOption} className="pw-echarts-bar" style={{ height: 160 }} />
                    </Card>
                </Col>
                <Col span={11}>
                    <Card className="pw-card pw-card-bottom">
                        <span className="pw-title pw-title-blue">台账信息管理</span>
                        <div className="pw-ledger-grid">
                            {ledgerBtns.map((btn, idx) => (
                                <div className="pw-ledger-item" key={idx}>
                                    <span className="pw-ledger-icon">
                                        <img src={ledgerIcon} style={{ width: '32px' }} alt="ledger icon" />
                                    </span>
                                    <span className="pw-ledger-text">{btn}</span>
                                </div>
                            ))}
                        </div>
                    </Card>
                </Col>
            </Row>
        </div>
    );
};

export default ProductWaste;