
import React, { useEffect, useRef, useState } from 'react';
import { Button, Input, Select, Tree } from 'antd';
import { ExportOutlined, PlusOutlined } from '@ant-design/icons';
import StandardTable from '@/components/StandardTable';
import styles from './KeypartsBasicInformation.less';
import eqicon1 from '@/assets/business_firekeynotearea/eqicon1.png';
import eqicon2 from '@/assets/business_firekeynotearea/eqicon2.png';
import eqicon3 from '@/assets/business_firekeynotearea/eqicon3.png';
import eqicon4 from '@/assets/business_firekeynotearea/eqicon4.png';
import eqicon5 from '@/assets/business_firekeynotearea/eqicon5.png';

const KeypartsBasicInformation = () => {
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const [selectedRows, setSelectedRows] = useState([]);
    const [loading, setLoading] = useState(false);
    const [dataSource, setDataSource] = useState([]);
    const [pagination, setPagination] = useState({
        current: 1,
        pageSize: 5,
        total: 0,
    });


    // 表格列定义
    const columns = [
        {
            title: '编号',
            dataIndex: 'id',
            key: 'id',
            width: 60,
            fixed: 'left',
            render: (text, record, index) => {
                const page = pagination.current || 1;
                const pageSize = pagination.pageSize || 5;
                const number = (page - 1) * pageSize + index + 1;
                return `0${number}`.slice(-2);
            }
        },
        {
            title: '部位名称',
            dataIndex: 'name',
            key: 'name',
            width: 120,
        },
        {
            title: '所属建筑',
            dataIndex: 'building',
            key: 'building',
            width: 120,
        },
        {
            title: '类型',
            dataIndex: 'type',
            key: 'type',
            width: 100,
        },
        {
            title: '标签',
            dataIndex: 'tags',
            key: 'tags',
            width: 200,
            render: (tags) => (
                <>
                    {tags.map((tag, idx) => {
                        const tagColorMap = {
                            '电气风险': { color: '#F9EBBC', fontColor: '#333333' },
                            '重要设备': { color: '#CDDFFF', fontColor: '#333333' },
                            '易燃易爆': { color: '#F8C6C6', fontColor: '#333333' },
                            '人员密集': { color: '#B6E1F6', fontColor: '#333333' },
                            '关键设施': { color: '#FDDBB5', fontColor: '#333333' },
                            '高风险区': { color: '#F8C6C6', fontColor: '#333333' },
                        };
                        const style = tagColorMap[tag] || { color: '#eee', fontColor: '#666' };
                        return (
                            <span key={tag + idx} style={{
                                background: style.color,
                                color: style.fontColor,
                                borderRadius: 4,
                                padding: '2px 8px',
                                fontSize: 12,
                                fontWeight: 600,
                                marginRight: 6,
                                display: 'inline-block',
                                minWidth: 40,
                                textAlign: 'center',
                                marginBottom: 2
                            }}>{tag}</span>
                        );
                    })}
                </>
            )
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            width: 80,
            render: (text) => {
                const statusMap = {
                    '故障': { color: '#FF3E48', bg: '#FFE0E2' },
                    '预警': { color: '#FF8800', bg: '#FFF3E9' },
                    '正常': { color: '#44BB5F', bg: '#D8F7DE' }
                };
                const status = statusMap[text] || { color: '#333', bg: '#F5F5F5' };
                return (
                    <span style={{
                        color: status.color,
                        backgroundColor: status.bg,
                        padding: '4px 8px',
                        borderRadius: '4px',
                        fontSize: '12px',
                        fontWeight: 500
                    }}>
                        {text}
                    </span>
                );
            }
        },
        {
            title: '最后更新',
            dataIndex: 'lastUpdate',
            key: 'lastUpdate',
            width: 120,
        },
        {
            title: '操作',
            key: 'action',
            width: 100,
            align: 'center',
            fixed: 'right',
            render: (_, record) => (
                <>
                    <Button type="link" size="small" style={{ fontSize: '12px', color: '#2E4CD4', fontWeight: 500, padding: 0, marginRight: 12 }}>编辑</Button>
                    <Button type="link" size="small" style={{ fontSize: '12px', color: '#FF2526', fontWeight: 500, padding: 0 }}>删除</Button>
                </>
            ),
        },
    ];

    // 模拟数据
    const mockData = [
        {
            key: '1',
            id: '001',
            name: '1号办公楼',
            building: '1号办公楼',
            type: '配电室',
            tags: ['电气风险', '重要设备'],
            status: '故障',
            lastUpdate: '2025-09-10',
        },
        {
            key: '2',
            id: '002',
            name: 'B区厨房',
            building: '员工餐厅',
            type: '厨房',
            tags: ['易燃易爆', '人员密集'],
            status: '预警',
            lastUpdate: '2025-09-10',
        },
        {
            key: '3',
            id: '003',
            name: '数据中心机房',
            building: '信息中心',
            type: '数据机房',
            tags: ['关键设施', '重要设备'],
            status: '正常',
            lastUpdate: '2025-09-10',
        },
        {
            key: '4',
            id: '004',
            name: '化学品仓库',
            building: '实验楼',
            type: '仓库',
            tags: ['易燃易爆', '高风险区'],
            status: '正常',
            lastUpdate: '2025-09-10',
        },
    ];

    // 初始化数据
    useEffect(() => {
        setPagination(prev => ({ ...prev, total: mockData.length }));
    }, []);

    // 根据分页获取当前页数据
    const getCurrentPageData = () => {
        const { current, pageSize } = pagination;
        const startIndex = (current - 1) * pageSize;
        const endIndex = startIndex + pageSize;
        return mockData.slice(startIndex, endIndex);
    };

    // 表格选择变化
    const onSelectChange = (newSelectedRowKeys, newSelectedRows) => {
        setSelectedRowKeys(newSelectedRowKeys);
        setSelectedRows(newSelectedRows);
    };

    // 新增设备按钮点击事件
    const handleAddDevice = () => {
        console.log('新增设备');
        // TODO: 实现新增设备逻辑
    };

    // 导出数据按钮点击事件
    const handleExportData = () => {
        console.log('导出数据');
        // TODO: 实现导出数据逻辑
    };

    // 分页变化处理
    const handleTableChange = (pagination) => {
        setPagination(prev => ({
            ...prev,
            current: pagination.current,
            pageSize: pagination.pageSize,
        }));
    };

    return (
        <div className={styles.Rcontainer}>
            {/* 第一个div - 高度20% */}
            <div className={styles.RcontainerTop}>
                <div className={styles.sectionContent}>
                    <div className={styles.blocksContainer}>
                        {/* 块1 */}
                        <div className={styles.blockItem + ' ' + styles.bgBlock1}>
                            <div className={styles.blockLeft}>
                                <div className={styles.blockTitle}>总重点部位数</div>
                                <div className={styles.blockNumber}>1820</div>
                            </div>
                            <div className={styles.blockRight}>
                                <img src={eqicon1} alt="总重点部位数" className={styles.blockImage} />
                            </div>
                        </div>

                        {/* 块2 */}
                        <div className={styles.blockItem + ' ' + styles.bgBlock2}>
                            <div className={styles.blockLeft}>
                                <div className={styles.blockTitle}>易燃易爆场所</div>
                                <div className={styles.blockNumber}>386</div>
                            </div>
                            <div className={styles.blockRight}>
                                <img src={eqicon2} alt="易燃易爆场所" className={styles.blockImage} />
                            </div>
                        </div>

                        {/* 块3 */}
                        <div className={styles.blockItem + ' ' + styles.bgBlock3}>
                            <div className={styles.blockLeft}>
                                <div className={styles.blockTitle}>人员密集区域</div>
                                <div className={styles.blockNumber}>269</div>
                            </div>
                            <div className={styles.blockRight}>
                                <img src={eqicon3} alt="人员密集区域" className={styles.blockImage} />
                            </div>
                        </div>

                        {/* 块4 */}
                        <div className={styles.blockItem + ' ' + styles.bgBlock4}>
                            <div className={styles.blockLeft}>
                                <div className={styles.blockTitle}>重要设备房</div>
                                <div className={styles.blockNumber}>412</div>
                            </div>
                            <div className={styles.blockRight}>
                                <img src={eqicon4} alt="重要设备房" className={styles.blockImage} />
                            </div>
                        </div>

                        {/* 块5 */}
                        <div className={styles.blockItem + ' ' + styles.bgBlock5}>
                            <div className={styles.blockLeft}>
                                <div className={styles.blockTitle}>物资储存区</div>
                                <div className={styles.blockNumber}>290</div>
                            </div>
                            <div className={styles.blockRight}>
                                <img src={eqicon5} alt="物资储存区" className={styles.blockImage} />
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            {/* 第二个div - 占满剩余位置 */}
            <div className={styles.RcontainerBottom}>
                <div className={styles.sectionContent}>
                    <div className={styles.leftBlock}>

                        {/* 表格头部 */}
                        <div className={styles.tableHeader}>
                            <div className={styles.tableTitle}>
                                <div className={styles.titleIcon}></div>
                                <div>消防设施与器材列表</div>
                            </div>
                        </div>

                        {/* 搜索与操作栏 */}
                        <div className={styles.searchWrap}>
                            <div className={styles.searchInputWrap}>
                                {/* 搜索输入框 */}
                                <Input.Search
                                    className={styles.searchInput}
                                    style={{ width: 200 }}
                                    placeholder="搜索重点部位..."
                                    allowClear
                                />
                            </div>
                            <div className={styles.searchBarWrap}>
                                {/* 下拉选择 */}
                                <Select
                                    className={styles.selectAll}
                                    defaultValue="全部"
                                    style={{ width: 100 }}
                                    options={[{ value: '全部', label: '全部' }]}
                                />
                                {/* 新增按钮 */}
                                <Button className={styles.addBtn} type="primary">
                                    <PlusOutlined /> 新增部位
                                </Button>
                            </div>
                        </div>

                        {/* 表格内容 */}
                        <div className={styles.tableContainer}>
                            <StandardTable
                                columns={columns}
                                data={{
                                    list: getCurrentPageData(),
                                    pagination: pagination
                                }}
                                loading={loading}
                                selectionType="checkbox"
                                onSelectRow={onSelectChange}
                                onChange={handleTableChange}
                                pagination={{
                                    ...pagination,
                                    showSizeChanger: false,
                                    showQuickJumper: true,
                                    showTotal: (total, range) =>
                                        `共 ${total} 条`,
                                }}
                                scroll={{ x: "max-content" }}
                            />
                        </div>
                    </div>

                    <div className={styles.rightBlock}>
                        {/* 第一行块 - 蓝色方块加标题 */}
                        <div className={styles.leftBlockTitle}>
                            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                                <div className={styles.titleIcon}></div>
                                <div>分类标签管理</div>
                            </div>
                            <div>
                                <Button className={styles.addBtn} type="primary">
                                    <PlusOutlined /> 新增标签
                                </Button>
                            </div>
                        </div>
                        {/* 树形结构 */}
                        <div className={styles.treeWrap}>
                            <Input.Search
                                className={styles.treeSearchInput}
                                placeholder="搜索标签..."
                                allowClear
                                style={{ marginBottom: 12 }}
                            />
                            <Tree
                                className={styles.customTree}
                                showIcon
                                defaultExpandAll
                                treeData={[
                                    {
                                        title: '易燃易爆场所',
                                        key: '0-0',
                                        icon: <span className={styles.folderIcon} />,
                                        children: [
                                            {
                                                title: <span style={{ color: '#2E4CD4', fontWeight: 500 }}>危险化学品储存区</span>,
                                                key: '0-0-0',
                                                icon: <span className={styles.childIconSelected} />,
                                            },
                                            {
                                                title: <span>危险化学品储存区</span>,
                                                key: '0-0-1',
                                                icon: <span className={styles.childIcon} />,
                                            },
                                            {
                                                title: <span>危险化学品储存区</span>,
                                                key: '0-0-2',
                                                icon: <span className={styles.childIcon} />,
                                            },
                                        ],
                                    },
                                    {
                                        title: '人员密集区域',
                                        key: '0-1',
                                        icon: <span className={styles.folderIcon} />,
                                        children: [],
                                    },
                                    {
                                        title: '重要设备房',
                                        key: '0-2',
                                        icon: <span className={styles.folderIcon} />,
                                        children: [],
                                    },
                                    {
                                        title: '物资储存区',
                                        key: '0-3',
                                        icon: <span className={styles.folderIcon} />,
                                        children: [],
                                    },
                                ]}
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default KeypartsBasicInformation; 