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 './jjjl.less';

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

const { Option } = Select;

const Jjjl = () => {
    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',
            number: '01',
            alarmTime: '2025-10-13 14:35:18',
            reporter: '国云海',
            accidentTime: '2025-10-11 11:22:42',
            accidentType: '仓库失火',
            accidentAddress: '光明街道光明南街26号',
            alarmPerson: '国云海',
            remarks: '备注一',
        },
        {
            key: '2',
            number: '02',
            alarmTime: '2025-10-13 09:19:00',
            reporter: '陈志强',
            accidentTime: '2025-10-11 02:29:16',
            accidentType: '办公室漏电',
            accidentAddress: '中山北大街17号附近',
            alarmPerson: '陈志强',
            remarks: '备注二二',
        },
        {
            key: '3',
            number: '03',
            alarmTime: '2025-10-12 10:46:43',
            reporter: '侯文涛',
            accidentTime: '2025-10-10 04:03:28',
            accidentType: '饮水机漏电',
            accidentAddress: '益醒园家居建材广场3通道76号',
            alarmPerson: '侯文涛',
            remarks: '备注三三',
        },
        {
            key: '4',
            number: '04',
            alarmTime: '2025-10-12 00:32:56',
            reporter: '宋东',
            accidentTime: '2025-10-10 03:37:32',
            accidentType: '地面电线、网线乱拉乱接',
            accidentAddress: '林河大街13号(光明健能乳业公司对面)',
            alarmPerson: '宋东',
            remarks: '备注四四',
        },
        {
            key: '5',
            number: '05',
            alarmTime: '2025-10-11 07:10:07',
            reporter: '王一声',
            accidentTime: '2025-10-08 12:46:35',
            accidentType: '电脑过热失火',
            accidentAddress: '中山南街4号',
            alarmPerson: '王一声',
            remarks: '备注五五',
        },
        {
            key: '6',
            number: '06',
            alarmTime: '2025-10-09 22:12:42',
            reporter: '赵小敏',
            accidentTime: '2025-10-07 10:04:47',
            accidentType: '仓库失火',
            accidentAddress: '双兴乐街1-5号',
            alarmPerson: '赵小敏',
            remarks: '备注六六',
        },
    ]);

    // 表格列配置
    const columns = [
        {
            title: '事件编号',
            dataIndex: 'number',
            key: 'number',
            width: 100,
        },
        {
            title: '接警时间',
            dataIndex: 'alarmTime',
            key: 'alarmTime',
            width: 160,
        },
        {
            title: '报警人',
            dataIndex: 'reporter',
            key: 'reporter',
            width: 100,
        },
        {
            title: '事故时间',
            dataIndex: 'accidentTime',
            key: 'accidentTime',
            width: 160,
        },
        {
            title: '事故类型',
            dataIndex: 'accidentType',
            key: 'accidentType',
            width: 190,
        },
        {
            title: '事故地址',
            dataIndex: 'accidentAddress',
            key: 'accidentAddress',
            width: 240,
        },
        {
            title: '接警人',
            dataIndex: 'alarmPerson',
            key: 'alarmPerson',
            width: 80,
        },
        {
            title: '备注',
            dataIndex: 'remarks',
            key: 'remarks',
            width: 100,
        },
        {
            title: '操作',
            key: 'action',
            width: 120,
            render: (text, record) => (
                <div className={styles.actionButtons}>
                    <Button
                        type="link"
                        size="small"
                        // icon={<EditOutlined />}
                        onClick={() => handleEdit(record)}
                    >
                        修改
                    </Button>
                    <Button
                        type="link"
                        size="small"
                        danger
                        // icon={<DeleteOutlined />}
                        onClick={() => handleDelete(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 handleEdit = (record) => {
        message.info(`编辑事件编号 ${record.number} 的信息`);
    };

    // 删除处理
    const handleDelete = (record) => {
        Modal.confirm({
            title: '确认删除',
            content: `确定要删除事件编号 ${record.number} 的记录吗？`,
            onOk() {
                setDataSource(dataSource.filter(item => item.key !== record.key));
                message.success('删除成功');
            },
        });
    };

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

    return (
        <div className={styles.containerJJJL}>
            {/* 页面标题 */}
            <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>
                    <Input
                        placeholder="输入报警人"
                        style={{ width: 180 }}
                        className={styles.customInput}
                        allowClear
                    />
                    <Button
                        type="primary"
                        icon={<SearchOutlined />}
                        onClick={handleSearch}
                        loading={loading}
                        className={styles.customButton}
                    >
                        查询
                    </Button>
                </div>
                <div className={styles.searchRight}>
                    <Button
                        type="primary"
                        icon={<PlusOutlined />}
                        onClick={handleAdd}
                        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 Jjjl;
