import React, { useState, useEffect } from 'react';
import { Input, Button, Select, message, Modal, DatePicker } from 'antd';
import { SearchOutlined, PlusOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';
import StandardTable from '@/components/StandardTable';
import styles from './czjy.less';

import iconDrill5 from '@/assets/business_Emergency/iconDrill5.svg';

const { Option } = Select;

const Czjy = () => {
    const [loading, setLoading] = useState(false);
    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
    const [searchValue, setSearchValue] = useState(undefined);
    const [dateRange, setDateRange] = useState([null, null]);
    const [pagination, setPagination] = useState({
        current: 1,
        pageSize: 10,
        total: 48,
        showSizeChanger: true,
        showQuickJumper: true,
        showTotal: (total, range) => `共${total}条`,
    });

    // 模拟数据
    const [dataSource, setDataSource] = useState([
        {
            key: '1',
            type: '泄漏',
            time: '2025-10-10 17:08:13',
            location: '一号仓库',
            event: '储罐气体泄漏',
            emergencyResource: '---',
            hazardSource: '储罐',
            protectionTarget: '泄露区域人员',
            shelterPlace: '应急路散点',
            commandPlan: '泄漏应急指挥方案',
            rescuePlan: '救援方案一',
            guaranteePlan: '---',
            emergencyPlan: '应急预案',
        },
        {
            key: '2',
            type: '火灾',
            time: '2025-10-08 09:21:56',
            location: '三楼会议室',
            event: '电路老化起火',
            emergencyResource: '---',
            hazardSource: '挥源',
            protectionTarget: '区域内人员及物资',
            shelterPlace: '应急路散点',
            commandPlan: '火灾应急指挥方案',
            rescuePlan: '救援方案二',
            guaranteePlan: '---',
            emergencyPlan: '应急预案',
        },
    ]);

    // 表格列配置
    const columns = [
        {
            title: '类型',
            dataIndex: 'type',
            key: 'type',
            width: 80,
            align: 'center',
        },
        {
            title: '应急事件',
            key: 'emergencyEvent',
            children: [
                {
                    title: '时间',
                    dataIndex: 'time',
                    key: 'time',
                    width: 160,
                    align: 'center',
                    onHeaderCell: () => ({
                        style: { borderWidth: '1px 0px 0px 1px' }
                    }),
                    onCell: () => ({
                        style: { borderWidth: '1px 0px 1px 1px' }
                    })
                },
                {
                    title: '地点',
                    dataIndex: 'location',
                    key: 'location',
                    width: 100,
                    align: 'center',
                    onHeaderCell: () => ({
                        style: { borderWidth: '1px 0px 0px 1px' }
                    }),
                    onCell: () => ({
                        style: { borderWidth: '1px 0px 1px 1px' }
                    })
                },
                {
                    title: '事件',
                    dataIndex: 'event',
                    key: 'event',
                    width: 120,
                    align: 'center',
                    onHeaderCell: () => ({
                        style: { borderWidth: '1px 1px 0px 1px' }
                    }),
                    onCell: () => ({
                        style: { borderWidth: '1px 1px 1px 1px' }
                    })
                },

            ],
        },
        {
            title: '联动分析',
            key: 'linkageAnalysis',
            children: [
                {
                    title: '应急资源',
                    dataIndex: 'emergencyResource',
                    key: 'emergencyResource',
                    width: 90,
                    align: 'center',
                    onHeaderCell: () => ({
                        style: { borderWidth: '1px 0px 0px 1px' }
                    }),
                    onCell: () => ({
                        style: { borderWidth: '1px 0px 1px 1px' }
                    })
                },
                {
                    title: '危险源',
                    dataIndex: 'hazardSource',
                    key: 'hazardSource',
                    width: 90,
                    align: 'center',
                    onHeaderCell: () => ({
                        style: { borderWidth: '1px 0px 0px 1px' }
                    }),
                    onCell: () => ({
                        style: { borderWidth: '1px 0px 1px 1px' }
                    })
                },
                {
                    title: '防护目标',
                    dataIndex: 'protectionTarget',
                    key: 'protectionTarget',
                    width: 160,
                    align: 'center',
                    onHeaderCell: () => ({
                        style: { borderWidth: '1px 0px 0px 1px' }
                    }),
                    onCell: () => ({
                        style: { borderWidth: '1px 0px 1px 1px' }
                    })
                },
                {
                    title: '避难场所',
                    dataIndex: 'shelterPlace',
                    key: 'shelterPlace',
                    width: 120,
                    align: 'center',
                    onHeaderCell: () => ({
                        style: { borderWidth: '1px 1px 0px 1px' }
                    }),
                    onCell: () => ({
                        style: { borderWidth: '1px 1px 1px 1px' }
                    })
                },

            ],
        },
        {
            title: '应急预案',
            key: 'emergencyPlan',
            children: [{
                title: '指挥方案',
                dataIndex: 'commandPlan',
                key: 'commandPlan',
                width: 160,
                align: 'center',
                onHeaderCell: () => ({
                    style: { borderWidth: '1px 0px 0px 1px' }
                }),
                onCell: () => ({
                    style: { borderWidth: '1px 0px 1px 1px' }
                })
            },
            {
                title: '救援方案',
                dataIndex: 'rescuePlan',
                key: 'rescuePlan',
                width: 120,
                align: 'center',
                onHeaderCell: () => ({
                    style: { borderWidth: '1px 0px 0px 1px' }
                }),
                onCell: () => ({
                    style: { borderWidth: '1px 0px 1px 1px' }
                })
            },
            {
                title: '保障方案',
                dataIndex: 'guaranteePlan',
                key: 'guaranteePlan',
                width: 100,
                align: 'center',
                onHeaderCell: () => ({
                    style: { borderWidth: '1px 1px 0px 1px' }
                }),
                onCell: () => ({
                    style: { borderWidth: '1px 1px 1px 1px' }
                })
            },
            ]
        },
        {
            title: '操作',
            key: 'action',
            width: 120,
            align: 'center',
            onHeaderCell: () => ({
                style: { borderWidth: '1px 0px 0px 1px' }
            }),
            onCell: () => ({
                style: { borderWidth: '1px 0px 1px 1px' }
            }),

            render: (text, record) => (
                <div className={styles.actionButtons}>
                    <Button
                        type="link"
                        size="small"
                        onClick={() => handleUpload(record)}
                    >
                        上传
                    </Button>
                    <Button
                        type="link"
                        size="small"
                        onClick={() => handleDistribute(record)}
                    >
                        分发
                    </Button>
                </div>
            ),
        },
    ];

    // 搜索处理
    const handleSearch = () => {
        setLoading(true);
        // 模拟搜索请求
        setTimeout(() => {
            setLoading(false);
            message.success('查询完成');
        }, 1000);
    };

    // 新增处理
    const handleAdd = () => {
        message.info('新增功能待实现');
    };

    // 批量删除处理
    const handleBatchDelete = () => {
        if (selectedRowKeys.length === 0) {
            message.warning('请选择要删除的数据');
            return;
        }
        Modal.confirm({
            title: '确认删除',
            content: `确定要删除选中的 ${selectedRowKeys.length} 条数据吗？`,
            onOk() {
                setDataSource(dataSource.filter(item => !selectedRowKeys.includes(item.key)));
                setSelectedRowKeys([]);
                message.success('删除成功');
            },
        });
    };

    // 上传处理
    const handleUpload = (record) => {
        message.info(`上传 ${record.type} 事件的相关资料`);
    };

    // 分发处理
    const handleDistribute = (record) => {
        message.info(`分发 ${record.type} 事件的应急预案`);
    };

    // 分页处理
    const handleTableChange = (pagination) => {
        setPagination(pagination);
    };

    return (
        <div className={styles.containerCzjy}>
            {/* 页面标题 */}
            <div className={styles.header}>
                <div className={styles.titleBar}></div>
                <h2 className={styles.title}>处置经验</h2>
            </div>

            {/* 搜索和操作区域 */}
            <div className={styles.searchBar}>
                <div className={styles.searchLeft}>
                    <div className={styles.searchItem}>
                        <span className={styles.searchLabel}>事件时间:</span>
                        <div style={{ display: 'flex', alignItems: 'center', border: '1px  solid #DDDEE6', borderRadius: '2px' }}>
                            <div className={styles.datePickerWithIcon}>
                                <img src={iconDrill5} alt="日期icon" className={styles.dateIcon} />
                                <DatePicker
                                    showTime={{ format: 'HH:mm' }}
                                    format="YYYY-MM-DD HH:mm"
                                    value={dateRange ? dateRange[0] : null}
                                    onChange={(value) => {
                                        setDateRange([value, dateRange ? dateRange[1] : null]);
                                    }}
                                    placeholder="请输入日期"
                                    className={styles.datePickerFirst}
                                    suffixIcon={null}
                                />
                            </div>
                            {/* 短线 */}
                            <div className={styles.dateSeparator}></div>

                            <div className={styles.datePickerWithIcon}>
                                <img src={iconDrill5} alt="日期icon" className={styles.dateIcon} />
                                <DatePicker
                                    showTime={{ format: 'HH:mm' }}
                                    format="YYYY-MM-DD HH:mm"
                                    value={dateRange ? dateRange[1] : null}
                                    onChange={(value) => {
                                        setDateRange([dateRange ? dateRange[0] : null, value]);
                                    }}
                                    placeholder="请输入日期"
                                    className={styles.datePickerFirst}
                                    suffixIcon={null}
                                />
                            </div>
                        </div>
                    </div>
                    <Select
                        placeholder="事故地点"
                        value={searchValue}
                        onChange={setSearchValue}
                        style={{ width: 180 }}
                        className={styles.customSelect}
                        allowClear
                    >
                        <Option value="一号仓库">一号仓库</Option>
                        <Option value="二号仓库">二号仓库</Option>
                        <Option value="三号仓库">三号仓库</Option>
                        <Option value="三楼会议室">三楼会议室</Option>
                        <Option value="生产车间">生产车间</Option>
                        <Option value="其他">其他</Option>
                    </Select>

                    <Button
                        type="primary"
                        icon={<SearchOutlined />}
                        onClick={handleSearch}
                        loading={loading}
                        className={styles.customButton}
                    >
                        查询
                    </Button>
                </div>
            </div>

            {/* 数据表格 */}
            <div className={styles.tableContainer}>
                <StandardTable
                    columns={columns}
                    data={{
                        list: dataSource,
                        pagination: pagination
                    }}
                    rowKey="key"
                    selectedRows={selectedRowKeys}
                    onSelectRow={setSelectedRowKeys}
                    onChange={handleTableChange}
                    loading={loading}
                />
            </div>
        </div>
    );
};

export default Czjy;
