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

import iconsc from '@/assets/yjzygl/iconsc.svg';

const { Option } = Select;

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

    // 模拟数据
    const [dataSource, setDataSource] = useState([
        {
            key: '1',
            hospitalName: '广播器材厂职工医院',
            hospitalLevel: '特级',
            equipmentType: '监测设备',
            simultaneousPatients: 97,
            specializedIn: '疑难杂症',
            medicalStaff: 81,
            bedCount: 97,
            ambulanceCount: 44,
            hospitalLocation: '西幸福区66号(且龙井品东南角)',
            phone: '18084188242',
            remarks: '无',
        },
        {
            key: '2',
            hospitalName: '塑阳区嘉隆店医院',
            hospitalLevel: '二级甲等',
            equipmentType: '消毒设备',
            simultaneousPatients: 96,
            specializedIn: '烧伤烫伤',
            medicalStaff: 74,
            bedCount: 82,
            ambulanceCount: 25,
            hospitalLocation: '栴花一区路与栴花一街交叉口东50米',
            phone: '15135188171',
            remarks: '备注二二',
        },
        {
            key: '3',
            hospitalName: '中国中医科学院眼科医院',
            hospitalLevel: '二级乙等',
            equipmentType: '仿真鉴定',
            simultaneousPatients: 91,
            specializedIn: '烧伤',
            medicalStaff: 48,
            bedCount: 65,
            ambulanceCount: 24,
            hospitalLocation: '双兴东区21号楼双兴大卖场一层',
            phone: '18057125277',
            remarks: '备注三三',
        },
        {
            key: '4',
            hospitalName: '矿务局治病疗昨矿工...',
            hospitalLevel: '特等',
            equipmentType: '医疗设备',
            simultaneousPatients: 59,
            specializedIn: '疑难杂症',
            medicalStaff: 46,
            bedCount: 59,
            ambulanceCount: 20,
            hospitalLocation: '红杉一品8号楼底商',
            phone: '18562861165',
            remarks: '备注四四',
        },
        {
            key: '5',
            hospitalName: '公安医院',
            hospitalLevel: '二级甲等',
            equipmentType: '检测设备',
            simultaneousPatients: 50,
            specializedIn: '骨折',
            medicalStaff: 6,
            bedCount: 51,
            ambulanceCount: 19,
            hospitalLocation: '光明街道幸福东区9号楼5单元101栋...',
            phone: '17675250412',
            remarks: '备注五五',
        },
        {
            key: '6',
            hospitalName: '武警总队医院',
            hospitalLevel: '二级乙等',
            equipmentType: '检测设备',
            simultaneousPatients: 48,
            specializedIn: '烧伤',
            medicalStaff: 4,
            bedCount: 19,
            ambulanceCount: 5,
            hospitalLocation: '金汉绿港家园一区9号楼京汉生牛生产厂...',
            phone: '13489273919',
            remarks: '备注六六',
        },
    ]);

    // 表格列配置
    const columns = [
        {
            title: '医院名称',
            dataIndex: 'hospitalName',
            key: 'hospitalName',
            width: 120,
        },
        {
            title: '医院级别',
            dataIndex: 'hospitalLevel',
            key: 'hospitalLevel',
            width: 100,
        },
        {
            title: '医疗设备',
            dataIndex: 'equipmentType',
            key: 'equipmentType',
            width: 100,
        },
        {
            title: '同时接待伤员数',
            dataIndex: 'simultaneousPatients',
            key: 'simultaneousPatients',
            width: 150,
        },
        {
            title: '擅长处理症状',
            dataIndex: 'specializedIn',
            key: 'specializedIn',
            width: 150,
        },
        {
            title: '医护人员数量',
            dataIndex: 'medicalStaff',
            key: 'medicalStaff',
            width: 150,
        },
        {
            title: '医院床位数量',
            dataIndex: 'bedCount',
            key: 'bedCount',
            width: 150,
        },
        {
            title: '救护车数量',
            dataIndex: 'ambulanceCount',
            key: 'ambulanceCount',
            width: 150,
        },
        {
            title: '医院位置',
            dataIndex: 'hospitalLocation',
            key: 'hospitalLocation',
            width: 180,
        },
        {
            title: '值班电话',
            dataIndex: 'phone',
            key: 'phone',
            width: 100,
        },
        {
            title: '备注',
            dataIndex: 'remarks',
            key: 'remarks',
            width: 80,
        },
        {
            title: '操作',
            key: 'action',
            width: 100,
            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.hospitalName} 的信息`);
    };

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

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

    return (
        <div className={styles.containerYJXFD}>
            {/* 页面标题 */}
            <div className={styles.header}>
                <div className={styles.titleBar}></div>
                <h2 className={styles.title}>值班医院</h2>
            </div>

            {/* 搜索和操作区域 */}
            <div className={styles.searchBar}>
                <div className={styles.searchLeft}>
                    <Input
                        placeholder="请输入医院名称"
                        style={{width: 180}}
                        className={styles.customInput}
                        allowClear
                    />
                    <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 Zbhy;