import React, { useEffect, useRef, useState } from 'react';
import { Card, Select, Button, Table, Tag, Input, Form, Row, Col, Pagination, Space } from 'antd';
import { EyeOutlined, SettingOutlined, PlusOutlined } from '@ant-design/icons';
import * as echarts from 'echarts';
import styles from './WastewaterMonitoring.less';
import viewIcon from '@/assets/business_envinformation/viewicon.svg';
const pollutantOptions = [
    { value: '全部', label: '全部污染物' },
    { value: 'COD', label: 'COD' },
    { value: '氨氮', label: '氨氮' },
];
const monitorPointOptions = [
    { value: '全部', label: '全部监测点' },
    { value: '点1', label: '点1' },
    { value: '点2', label: '点2' },
];
const dateOptions = [
    { value: '本月', label: '本月' },
    { value: '本周', label: '本周' },
    { value: '今日', label: '今日' },
];
const statData = [
    { w: 'COD', s: '山顶点', v: '490mg/L', d: '2025-09-11', st: '正常' },
    { w: 'COD', s: '山顶点', v: '490mg/L', d: '2025-09-11', st: '正常' },
    { w: 'COD', s: '山顶点', v: '490mg/L', d: '2025-09-11', st: '正常' },
    { w: 'COD', s: '山顶点', v: '490mg/L', d: '2025-09-11', st: '正常' },
    { w: 'COD', s: '山顶点', v: '490mg/L', d: '2025-09-11', st: '超标' },
    { w: 'COD', s: '山顶点', v: '490mg/L', d: '2025-09-11', st: '正常' },
    { w: 'COD', s: '山顶点', v: '490mg/L', d: '2025-09-11', st: '正常' },
    { w: 'COD', s: '山顶点', v: '490mg/L', d: '2025-09-11', st: '报警' },
    { w: 'COD', s: '山顶点', v: '490mg/L', d: '2025-09-11', st: '正常' },
    { w: 'COD', s: '山顶点', v: '490mg/L', d: '2025-09-11', st: '超标' },
];
const alarmTableColumns = [
    { title: '序号', dataIndex: 'index', width: 60, render: (_, __, i) => i + 1 },
    { title: '报警时间', dataIndex: 'time' },
    { title: '监测站点', dataIndex: 'point' },
    { title: '污染物名称', dataIndex: 'name' },
    { title: '超标情况(%)', dataIndex: 'percent' },
    { title: '负责人', dataIndex: 'person' },
    { title: '报警短信', dataIndex: 'sms', render: v => v === '已发送' ? <span style={{ background: '#FAFAFA', color: '#333333', border: '1px solid #D9D9D9', borderRadius: 4, padding: '2px 12px', fontSize: 13 }}>已发送</span> : <span style={{ background: '#FFEAE9', color: '#FF0000', border: '1px solid #FFBEBE', borderRadius: 4, padding: '2px 12px', fontSize: 13 }}>未发送</span> },
    { title: '处理情况', dataIndex: 'status', render: v => v === '已处理' ? <span style={{ background: '#F6FFED', color: '#52C41A', border: '1px solid #B7EB8F', borderRadius: 4, padding: '2px 12px', fontSize: 13 }}>已处理</span> : v === '未处理' ? <span style={{ background: '#FFF2E8', color: '#FA541C', border: '1px solid #FFBB96', borderRadius: 4, padding: '2px 12px', fontSize: 13 }}>未处理</span> : <span style={{ background: '#FFFBE6', color: '#FAAD14', border: '1px solid #FFE58F', borderRadius: 4, padding: '2px 12px', fontSize: 13 }}>处理中</span> },
    {
        title: '操作', dataIndex: 'action', align: 'center', render: (_, record) => (
            <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '14px' }}>
                <img
                    src={viewIcon}
                    alt="查看"
                    style={{ width: 16, height: 16, cursor: 'pointer' }}
                />
            </div>
        ),
    },
];
const alarmTableData = [
    { time: '2025-08-27 07:12', point: 'xxxxx', name: 'hto', percent: 26, person: '负责人', sms: '已发送', status: '已处理' },
    { time: '2025-08-27 07:12', point: 'xxxxx', name: 'dfadf', percent: 58, person: '负责人', sms: '未发送', status: '未处理' },
    { time: '2025-08-27 07:12', point: 'xxxxx', name: 'dfadf', percent: 52, person: '王华俊', sms: '已发送', status: '已处理' },
    { time: '2025-08-27 07:12', point: 'xxxxx', name: 'dfadf', percent: 43, person: '赵荣堂', sms: '已发送', status: '已处理' },
    { time: '2025-08-27 07:12', point: 'xxxxx', name: 'dfadf', percent: 43, person: '赵荣堂', sms: '已发送', status: '已处理' },
    { time: '2025-08-27 07:12', point: 'xxxxx', name: 'dfadf', percent: 43, person: '赵荣堂', sms: '已发送', status: '已处理' },
    { time: '2025-08-27 07:12', point: 'xxxxx', name: 'dfadf', percent: 43, person: '赵荣堂', sms: '已发送', status: '已处理' },
];

const OnlineMonitoring = () => {
    const chartRef = useRef(null);
    const [monitorPoint, setMonitorPoint] = useState('全部');
    const [pollutant, setPollutant] = useState('全部');
    const [dateRange, setDateRange] = useState('本月');
    const [pagination, setPagination] = useState({
        current: 1,
        pageSize: 5,
        total: 0,
    });
    const [alarmPage, setAlarmPage] = useState(1);
    const ALARM_PAGE_SIZE = 7;
    const ALARM_TOTAL = 85; // 真实总数

    useEffect(() => {
        if (chartRef.current) {
            const chart = echarts.init(chartRef.current);
            chart.setOption({
                grid: { left: 40, right: 20, top: 20, bottom: 40 },
                xAxis: {
                    type: 'category',
                    data: ['05-01', '05-05', '05-09', '05-13', '05-17', '05-21', '05-25', '05-29', '05-31'],
                    boundaryGap: false,
                    axisLine: { show: false },
                    axisTick: { show: false },
                    axisLabel: { color: '#A3ACB7', fontSize: 13, margin: 16 },
                    splitLine: { show: false }, // 竖线不显示
                },
                yAxis: {
                    type: 'value',
                    min: 0,
                    max: 900,
                    splitNumber: 9,
                    axisLine: { show: false },
                    axisTick: { show: false },
                    axisLabel: { color: '#A3ACB7', fontSize: 13, margin: 16 },
                    splitLine: { show: true, lineStyle: { color: '#E9F0F5', type: 'dashed' } }, // 横线为虚线
                },
                series: [{
                    data: [400, 500, 700, 800, 600, 700, 500, 400, 450],
                    type: 'line',
                    smooth: true,
                    symbol: 'none',
                    lineStyle: { color: '#00C48F', width: 2 },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0, y: 0, x2: 0, y2: 1,
                            colorStops: [
                                { offset: 0, color: 'rgba(0,196,143,0.15)' },
                                { offset: 1, color: 'rgba(0,196,143,0.00)' }
                            ]
                        }
                    },
                }],
                tooltip: {
                    trigger: 'axis',
                    backgroundColor: '#fff',
                    borderColor: '#E9F0F5',
                    borderWidth: 1,
                    textStyle: { color: '#222', fontSize: 13 },
                    axisPointer: { type: 'line', lineStyle: { color: '#00C48F', width: 1 } },
                },
                markLine: {
                    symbol: 'none',
                    data: [
                        {
                            yAxis: 700,
                            lineStyle: { color: '#FF8A00', type: 'dashed', width: 2 },
                            label: {
                                show: true,
                                position: 'start',
                                color: '#fff',
                                backgroundColor: '#FF8A00',
                                borderRadius: 4,
                                padding: [2, 8],
                                fontSize: 13,
                                fontWeight: 500,
                                formatter: '700',
                                distance: 10
                            }
                        },
                        {
                            yAxis: 700,
                            lineStyle: { color: 'transparent' },
                            label: {
                                show: true,
                                position: [0, 18],
                                color: '#FF8A00',
                                backgroundColor: 'transparent',
                                fontSize: 12,
                                formatter: '严重超标',
                                distance: 0
                            }
                        },
                        {
                            yAxis: 500,
                            lineStyle: { color: '#FFB800', type: 'dashed', width: 2 },
                            label: {
                                show: true,
                                position: 'start',
                                color: '#fff',
                                backgroundColor: '#FFB800',
                                borderRadius: 4,
                                padding: [2, 8],
                                fontSize: 13,
                                fontWeight: 500,
                                formatter: '500',
                                distance: 10
                            }
                        },
                        {
                            yAxis: 500,
                            lineStyle: { color: 'transparent' },
                            label: {
                                show: true,
                                position: [0, 18],
                                color: '#FFB800',
                                backgroundColor: 'transparent',
                                fontSize: 12,
                                formatter: '报警线',
                                distance: 0
                            }
                        }
                    ]
                },
            });
        }
    }, [monitorPoint, pollutant, dateRange]);

    return (
        <div className={styles.Ocontainer}>
            <div className={styles.pageMainRow}>
                {/* 左侧主区 */}
                <div className={styles.pageMainColLeft}>
                    <div className={styles.trendCard}>
                        <div className={styles.trendHeader}>
                            <div className={styles.trendTitle}>
                                <div className={styles.trendTitleBar}></div>
                                污染物排放趋势
                            </div>
                            <div className={styles.trendSelects}>
                                <Select value={monitorPoint} onChange={setMonitorPoint} options={monitorPointOptions} className={styles.trendSelect} />
                                <Select value={pollutant} onChange={setPollutant} options={pollutantOptions} className={styles.trendSelect} />
                                <Select value={dateRange} onChange={setDateRange} options={dateOptions} className={styles.trendSelect} />
                            </div>
                        </div>
                        <div ref={chartRef} className={styles.trendChart} />
                    </div>
                    <div className={styles.alarmTableCard}>
                        <div className={styles.alarmTableHeader}>
                            <div className={styles.alarmTableTitle}>
                                <div className={styles.alarmTableTitleBar}></div>
                                报警信息
                            </div>
                            <div className={styles.alarmTableSelects}>
                                <Select defaultValue="全部" options={monitorPointOptions} className={styles.alarmTableSelect} dropdownStyle={{ minWidth: 100 }} />
                                <Select defaultValue="全部" options={pollutantOptions} className={styles.alarmTableSelect} dropdownStyle={{ minWidth: 100 }} />
                                <Select defaultValue="本月" options={dateOptions} className={styles.alarmTableSelect} dropdownStyle={{ minWidth: 100 }} />
                                <Button className={styles.alarmTableAddBtn}><PlusOutlined /></Button>
                            </div>
                        </div>
                        <div className={styles.alarmTableWrap}>
                            <Table
                                columns={alarmTableColumns}
                                dataSource={alarmTableData.slice((alarmPage - 1) * ALARM_PAGE_SIZE, alarmPage * ALARM_PAGE_SIZE)}
                                size="small"
                                pagination={{
                                    pageSize: ALARM_PAGE_SIZE,
                                    total: ALARM_TOTAL,
                                    current: alarmPage,
                                    showTotal: (total) => `共 ${total} 条`,
                                    onChange: (page) => setAlarmPage(page),
                                    showSizeChanger: false,
                                    showQuickJumper: true,
                                    position: ['bottomRight'],
                                }}
                                rowKey={(_, i) => i + (alarmPage - 1) * ALARM_PAGE_SIZE}
                                scroll={{ x: 'max-content' }}
                                bordered={false}
                                className={styles.alarmTable}
                                tableLayout="fixed"
                            />
                        </div>
                    </div>
                </div>
                <div style={{ width: 420, display: 'flex', flexDirection: 'column', gap: 10 }}>
                    <div className={styles.statCard}>
                        <div className={styles.statHeader}>
                            <div className={styles.trendTitle}>
                                <div className={styles.trendTitleBar}></div>
                                污染物排放统计
                            </div>
                            <Button className={styles.statAddBtn}>手动添加</Button>
                        </div>
                        <div className={styles.statTableWrap}>
                            <Table
                                className={styles.statTable}
                                columns={[
                                    {
                                        title: '污染物',
                                        dataIndex: 'w',
                                        width: 100,
                                    },
                                    { title: '站点', dataIndex: 's', width: 120 },
                                    { title: '排放量', dataIndex: 'v', width: 120 },
                                    { title: '日期', dataIndex: 'd', width: 140 },
                                    {
                                        title: '状态',
                                        dataIndex: 'st',
                                        width: 120,
                                    },
                                ]}
                                dataSource={statData.slice((alarmPage - 1) * ALARM_PAGE_SIZE, alarmPage * ALARM_PAGE_SIZE)}
                                size="small"
                                pagination={{
                                    pageSize: 10,
                                    total: 10,
                                    current: 1,
                                    showTotal: () => `共 10 条`,
                                    onChange: (page) => setAlarmPage(page),
                                    showSizeChanger: false,
                                    showQuickJumper: true,
                                    position: ['bottomRight'],
                                }}
                                rowKey={(r, i) => i + (alarmPage - 1) * ALARM_PAGE_SIZE}
                                scroll={{ x: 'max-content' }}
                                bordered={false}
                                tableLayout="fixed"
                                rowClassName={(_, idx) => idx % 2 === 0 ? '' : 'table-row-alt'}
                                onRow={() => ({ style: { height: 20 } })}
                                components={{
                                    body: {
                                        wrapper: (props) => {
                                            // 过滤掉第一个tr
                                            const { children, ...rest } = props;
                                            return (
                                                <tbody {...rest}>
                                                    {React.Children.toArray(children).slice(1)}
                                                </tbody>
                                            );
                                        }
                                    }
                                }}
                            />
                        </div>
                    </div>
                    {/* 短信区块 */}
                    <div style={{ background: '#fff', boxShadow: 'none', padding: 0 }}>
                        <div className={styles.smsCard}>
                            <div className={styles.smsHeader}>
                                <div className={styles.trendTitle}>
                                    <div className={styles.trendTitleBar}></div>
                                    报警短信
                                </div>
                                <div className={styles.smsHeaderBtns}>
                                    <Button className={styles.smsTplBtn}>设置模板</Button>
                                    <Button type="primary" className={styles.smsSendBtn}>发送</Button>
                                </div>
                            </div>
                            <Form layout="vertical" className={styles.smsForm}>
                                <div className={styles.smsFormRow} style={{ display: 'flex', alignItems: 'center', marginTop: 20 }}>
                                    <span className={styles.smsFormLabel} style={{ minWidth: 70 }}>收  件  人</span>
                                    <Select className={styles.smsFormInput} value="xxx" options={[{ value: 'xxx', label: 'xxx' }]} style={{ width: 320 }} />
                                </div>
                                <div className={styles.smsFormRow} style={{ display: 'flex', alignItems: 'center', marginTop: 20 }}>
                                    <span className={styles.smsFormLabel} style={{ minWidth: 70 }}>手机号码</span>
                                    <Input className={styles.smsFormInput} placeholder="请输入" style={{ width: 320 }} />
                                </div>
                                <div className={styles.smsFormRow} style={{ display: 'flex', alignItems: 'flex-start', marginTop: 20 }}>
                                    <span className={styles.smsFormLabel} style={{ minWidth: 70, marginTop: 8 }}>短信内容</span>
                                    <div style={{ width: 320 }}>
                                        <Input.TextArea className={styles.smsFormTextarea} value="xxx" rows={5} style={{ resize: 'none' }} />
                                    </div>
                                </div>
                            </Form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default OnlineMonitoring;
