import React, { useMemo, useState } from 'react';
import { Select, Tree } from 'antd';
import { ReactComponent as Icon1 } from '@/assets/business_basic/icon1.svg';
import { ReactComponent as Icon2 } from '@/assets/business_basic/icon2.svg';
import StandardTable from '@/components/StandardTable';
import styles from './RealtimeData.less';

const buildingOptions = [
    { label: '工厂建筑', value: 'plant' },
    { label: '仓储设施', value: 'warehouse' },
];

const factoryOptions = [
    { label: '全部工厂', value: 'all' },
    { label: '上海油库', value: 'shanghai' },
    { label: '南京油库', value: 'nanjing' },
];

const rawTreeData = [
    {
        title: '上海油库',
        key: 'shanghai',
        tag: { label: '工厂', type: 'depot' },
        children: [
            {
                title: '汽油罐区',
                key: 'gasoline-area',
                tag: { label: '罐区', type: 'area' },
                children: [
                    {
                        title: '汽油调合罐组',
                        key: 'blend-group',
                        tag: { label: '罐组', type: 'group' },
                        children: [
                            {
                                title: 'T-101 汽油储罐',
                                key: 't101',
                                tag: { label: '储罐', type: 'tank' },
                                children: [
                                    {
                                        title: 'LT-101 液位变送器',
                                        key: 'lt101',
                                        tag: { label: '测点', type: 'sensor' },
                                    },
                                    {
                                        title: 'TT-101 温度变送器',
                                        key: 'tt101',
                                        tag: { label: '测点', type: 'sensor' },
                                    },
                                    {
                                        title: 'PT-101 压力变送器',
                                        key: 'pt101',
                                        tag: { label: '测点', type: 'sensor' },
                                    },
                                    {
                                        title: 'P-101A 输送泵',
                                        key: 'p101a',
                                        tag: { label: '设备', type: 'device' },
                                    },
                                    {
                                        title: 'P-101B 输送泵',
                                        key: 'p101b',
                                        tag: { label: '设备', type: 'device' },
                                    },
                                    {
                                        title: 'SP-101 密度计',
                                        key: 'sp101',
                                        tag: { label: '测点', type: 'sensor' },
                                    },
                                ],
                            },
                            {
                                title: 'T-102 汽油储罐',
                                key: 't102',
                                tag: { label: '储罐', type: 'tank' },
                            },
                            {
                                title: 'T-103 汽油储罐',
                                key: 't103',
                                tag: { label: '储罐', type: 'tank' },
                            },
                        ],
                    },
                ],
            },
            {
                title: '柴油罐区',
                key: 'diesel-area',
                tag: { label: '罐区', type: 'area' },
            },
            {
                title: '化危品库',
                key: 'hazard',
                tag: { label: '库区', type: 'depot' },
            },
        ],
    },
];

const TreeNodeTitle = ({ text, tag }) => (
    <span className={styles.treeNodeTitle}>
        <span className={styles.nodeText}>{text}</span>
        {tag ? (
            <span className={`${styles.nodeTag} ${styles[`tag-${tag.type}`] || ''}`}>
                {tag.label}
            </span>
        ) : null}
    </span>
);

const formatTreeNodes = data =>
    data.map(item => ({
        key: item.key,
        title: <TreeNodeTitle text={item.title} tag={item.tag} />,
        children: item.children ? formatTreeNodes(item.children) : undefined,
    }));

const tableColumns = [
    {
        title: '测点名称',
        dataIndex: 'name',
        key: 'name',
        align: 'center',
    },
    {
        title: '测点编号',
        dataIndex: 'code',
        key: 'code',
        align: 'center',
    },
    {
        title: '测量值',
        dataIndex: 'value',
        key: 'value',
        align: 'center',
    },
    {
        title: '单位',
        dataIndex: 'unit',
        key: 'unit',
        align: 'center',
    },
    {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        align: 'center',
    },
    {
        title: '更新时间',
        dataIndex: 'updatedAt',
        key: 'updatedAt',
        align: 'center',
    },
];

const tableDataSource = [
    {
        id: 1,
        name: '液位变送器',
        code: 'LT-101',
        value: '78.5',
        unit: '%',
        status: '正常',
        updatedAt: '2025-10-25 22:30:16',
    },
    {
        id: 2,
        name: '温度传感器',
        code: 'TT-101',
        value: '32.6',
        unit: '℃',
        status: '正常',
        updatedAt: '2025-10-25 10:28:14',
    },
    {
        id: 3,
        name: '压力变送器',
        code: 'PT-101',
        value: '0.12',
        unit: 'MPa',
        status: '正常',
        updatedAt: '2025-10-23 20:58:24',
    },
    {
        id: 4,
        name: '密度计',
        code: 'DT-101',
        value: '735',
        unit: 'kg/m³',
        status: '正常',
        updatedAt: '2025-10-23 04:59:13',
    },
    {
        id: 5,
        name: '进口阀门1状态',
        code: 'V-101',
        value: '关闭',
        unit: '-',
        status: '正常',
        updatedAt: '2025-10-22 03:03:13',
    },
];

const deviceStatusList = [
    { label: '传感器状态', value: '正常', type: 'ok' },
    { label: '阀门1状态', value: '正常', type: 'ok' },
    { label: '录音运行状态', value: '停止', type: 'stop' },
    { label: '联锁系统', value: '正常', type: 'ok' },
];

const alarmList = [
    {
        id: 1,
        title: '液位偏高预警',
        description: '液位达到78.5%，接近安全液位(90%)',
        time: '2 小时前',
    },
    {
        id: 2,
        title: '液位偏高预警',
        description: '液位达到78.5%，接近安全液位(90%)',
        time: '2 小时前',
    },
    {
        id: 3,
        title: '液位偏高预警',
        description: '液位达到78.5%，接近安全液位(90%)',
        time: '2 小时前',
    },
];

const RealtimeData = () => {
    const [buildingType, setBuildingType] = useState('plant');
    const [factory, setFactory] = useState('all');
    const [selectedKeys, setSelectedKeys] = useState(['t101']);
    const [checkedKeys, setCheckedKeys] = useState(['t101']);

    const treeData = useMemo(() => formatTreeNodes(rawTreeData), []);

    const tableData = useMemo(
        () => ({
            list: tableDataSource,
            pagination: {
                currentPage: 1,
                pageSize: 10,
                total: tableDataSource.length,
            },
        }),
        [],
    );

    return (
        <div className={styles.container}>
            <section className={styles.leftPanel}>
                <div className={styles.blockHeader}>
                    <span className={styles.titleIcon} />
                    <span className={styles.blockTitle}>工厂层级结构</span>
                </div>
                <div className={styles.filters}>
                    <Select
                        value={buildingType}
                        onChange={setBuildingType}
                        options={buildingOptions}
                        className={styles.filterSelect}
                        dropdownMatchSelectWidth={false}
                        size="small"
                    />
                    <Select
                        value={factory}
                        onChange={setFactory}
                        options={factoryOptions}
                        className={styles.filterSelect}
                        dropdownMatchSelectWidth={false}
                        size="small"
                    />
                </div>
                <div className={styles.treeWrapper}>
                    <Tree
                        showIcon={false}
                        showLine={{ showLeafIcon: false }}
                        defaultExpandAll
                        checkable
                        selectable
                        treeData={treeData}
                        checkedKeys={checkedKeys}
                        selectedKeys={selectedKeys}
                        onCheck={keys => setCheckedKeys(keys.checked || keys)}
                        onSelect={keys => setSelectedKeys(keys)}
                        className={styles.tree}
                        virtual={false}
                        switcherIcon={nodeProps =>
                            nodeProps.expanded ? (
                                <Icon2 width={14} height={14} />
                            ) : (
                                <Icon1 width={14} height={14} />
                            )
                        }
                    />
                </div>
            </section>

            <section className={styles.rightPanel}>
                <div className={styles.blockHeader}>
                    <span className={styles.titleIcon} />
                    <span className={styles.blockTitle}>实时数据</span>
                </div>
  {/* 从这里开始下面的内容 */}

                {/* 从这里开始下面的内容 */}
                <div className={styles.tableWrapper}>
                    <StandardTable
                        columns={tableColumns}
                        data={tableData}
                        rowKey="id"
                        isshowAlert={false}
                        pagination={{ pageSize: 10 }}
                        size="small"
                    />
                </div>

                <div className={styles.bottomSection}>
                    <div className={styles.statusCard}>
                        <div className={styles.cardHeader}>设备状态运行</div>
                        <div className={styles.healthBlock}>
                            <div className={styles.healthRow}>
                                <span className={styles.healthLabel}>运行健康度</span>
                                <span className={styles.healthValue}>98%</span>
                            </div>
                            <div className={styles.healthBar}>
                                <div className={styles.healthBarInner} style={{ width: '98%' }} />
                            </div>
                        </div>
                        <div className={styles.statusList}>
                            {deviceStatusList.map(item => (
                                <div className={styles.statusItem} key={item.label}>
                                    <span className={`${styles.statusDot} ${styles[`status-${item.type}`]}`} />
                                    <span className={styles.statusLabel}>{item.label}</span>
                                    <span className={styles.statusValue}>{item.value}</span>
                                </div>
                            ))}
                        </div>
                    </div>

                    <div className={styles.alertCard}>
                        <div className={styles.cardHeader}>最近报警</div>
                        <div className={styles.alertList}>
                            {alarmList.map(item => (
                                <div className={styles.alertItem} key={item.id}>
                                    <div>
                                        <div className={styles.alertTitle}>{item.title}</div>
                                        <div className={styles.alertDesc}>{item.description}</div>
                                    </div>
                                    <span className={styles.alertTime}>{item.time}</span>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </section>
        </div>
    );
};

export default RealtimeData;

