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

const { Option } = Select;
const { RangePicker } = DatePicker;

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

    // 模拟数据
const [dataSource, setDataSource] = useState([
        {
            key: '1',
            name: '生产安全事故',
            level: '石油化工',
            type: '仓库失火',
            location: '光明路清波26号',
            death: 13,
            injury: 21,
            transfer: 93,
            loss: 10,
        },
        {
            key: '2',
            name: '公共卫生事件',
            level: '化学纤维',
            type: '办公楼疫情',
            location: '中山北17号附近',
            death: 5,
            injury: 13,
            transfer: 74,
            loss: 12,
        },
        {
            key: '3',
            name: '生产安全事故',
            level: '石油化工',
            type: '饮水机漏电',
            location: '蓝田景嘉通道76号',
            death: 2,
            injury: 11,
            transfer: 71,
            loss: 30,
        },
        {
            key: '4',
            name: '公共卫生事件',
            level: '化学纤维',
            type: '地面电线、网络乱扯、短路',
            location: '补村东街13号(新建事业公司对面)',
            death: 5,
            injury: 5,
            transfer: 69,
            loss: 65,
        },
        {
            key: '5',
            name: '公共卫生事件',
            level: '化学纤维',
            type: '电脑蓝屏故障',
            location: '中山南44号',
            death: 7,
            injury: 9,
            transfer: 21,
            loss: 27,
        },
        {
            key: '6',
            name: '生产安全事故',
            level: '石油化工',
            type: '仓库失火',
            location: '双兴库房1-5号',
            death: 1,
            injury: 5,
            transfer: 19,
            loss: 19,
        },
    ]);

    // 表格列配置
    const columns = [
        {
            title: '事故名称',
            dataIndex: 'name',
            key: 'name',
            width: 150,
        },
        {
            title: '事故等级',
            dataIndex: 'level',
            key: 'level',
            width: 120,
        },
        {
            title: '事故类型',
            dataIndex: 'type',
            key: 'type',
            width: 150,
        },
        {
            title: '事故地点',
            dataIndex: 'location',
            key: 'location',
            width: 200,
        },
        {
            title: '死亡人数（人）',
            dataIndex: 'death',
            key: 'death',
            width: 120,
        },
        {
            title: '受伤人数（人）',
            dataIndex: 'injury',
            key: 'injury',
            width: 120,
        },
        {
            title: '转移人数（人）',
            dataIndex: 'transfer',
            key: 'transfer',
            width: 120,
        },
        {
            title: '财产损失（万元）',
            dataIndex: 'loss',
            key: 'loss',
            width: 120,
        },
    ];

    // 搜索处理
    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.name} 的信息`);
    };

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

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

    return (
        <div className={styles.container}>
            {/* 页面标题 */}
            <div className={styles.header}>
                <div className={styles.titleBar}></div>
                <h2 className={styles.title}>事故案例</h2>
            </div>

            {/* 搜索和操作区域 */}
            <Form
                layout="inline"
                className={styles.searchBar}
                onFinish={handleSearch}
            >
                <Form.Item label="事故时间" name="dateRange">
                    <RangePicker
                        value={dateRange}
                        onChange={setDateRange}
                        className={styles.datePicker}
                    />
                </Form.Item>
                <Form.Item label="" name="searchValue">
                    <Input
                        placeholder='请输入事故名称'
                        style={{ width: 200 }}
                        value={searchValue}
                        onChange={(e) => setSearchValue(e.target.value)}
                        allowClear
                        className={styles.searchInput}
                    />
                </Form.Item>
                <Form.Item>
                    <Button 
                        type="primary" 
                        icon={<SearchOutlined />}
                        htmlType="submit"
                        loading={loading}
                        className={styles.searchButton}
                    >
                        查询
                    </Button>
                </Form.Item>
            </Form>

            {/* 数据表格 */}
            <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 AccidentCases;
