import React, { useState } from 'react';
import { Input, Button, Select, message, Modal, DatePicker } from 'antd';
import { SearchOutlined, PlusOutlined, DeleteOutlined } from '@ant-design/icons';
import StandardTable from '@/components/StandardTable';
import styles from './DutyHandover.less';
import iconsc from '@/assets/yjzygl/iconsc.svg';

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

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

    // 模拟数据
    const [dataSource, setDataSource] = useState([
        {
            key: '1',
            number: '01',
            handoverDate: '2025-10-28 20:00',
            handoverPerson: '张三',
            handoverShift: '白班',
            receivePerson: '李四',
            receiveShift: '夜班',
            handoverContent: '设备运行正常，无异常情况',
            receiveContent: '已接收，了解情况',
            status: '已交接',
        },
        {
            key: '2',
            number: '02',
            handoverDate: '2025-10-29 08:00',
            handoverPerson: '李四',
            handoverShift: '夜班',
            receivePerson: '王五',
            receiveShift: '白班',
            handoverContent: 'A区域有照明故障待处理',
            receiveContent: '已知悉，将安排处理',
            status: '已交接',
        },
        {
            key: '3',
            number: '03',
            handoverDate: '2025-10-28 08:00',
            handoverPerson: '赵六',
            handoverShift: '夜班',
            receivePerson: '张三',
            receiveShift: '白班',
            handoverContent: '夜间巡查正常',
            receiveContent: '已接收',
            status: '已交接',
        },
    ]);

    // 表格列配置
    const columns = [
        {
            title: '编号',
            dataIndex: 'number',
            key: 'number',
            width: 80,
        },
        {
            title: '交接时间',
            dataIndex: 'handoverDate',
            key: 'handoverDate',
            width: 150,
        },
        {
            title: '交班人',
            dataIndex: 'handoverPerson',
            key: 'handoverPerson',
            width: 100,
        },
        {
            title: '交班班次',
            dataIndex: 'handoverShift',
            key: 'handoverShift',
            width: 100,
        },
        {
            title: '接班人',
            dataIndex: 'receivePerson',
            key: 'receivePerson',
            width: 100,
        },
        {
            title: '接班班次',
            dataIndex: 'receiveShift',
            key: 'receiveShift',
            width: 100,
        },
        {
            title: '交班内容',
            dataIndex: 'handoverContent',
            key: 'handoverContent',
            width: 200,
            ellipsis: true,
        },
        {
            title: '接班确认',
            dataIndex: 'receiveContent',
            key: 'receiveContent',
            width: 150,
            ellipsis: true,
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            width: 100,
        },
        {
            title: '操作',
            key: 'action',
            width: 150,
            render: (text, record) => (
                <div className={styles.actionButtons}>
                    <Button 
                        type="link" 
                        size="small" 
                        onClick={() => handleView(record)}
                    >
                        查看
                    </Button>
                    <Button 
                        type="link" 
                        size="small" 
                        onClick={() => handleEdit(record)}
                    >
                        修改
                    </Button>
                    <Button 
                        type="link" 
                        size="small" 
                        danger
                        onClick={() => handleDelete(record)}
                    >
                        删除
                    </Button>
                </div>
            ),
        },
    ];

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

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

    // 查看处理
    const handleView = (record) => {
        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(`编辑交接班记录`);
    };

    // 删除处理
    const handleDelete = (record) => {
        Modal.confirm({
            title: '确认删除',
            content: `确定要删除该条交接班记录吗？`,
            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>

            {/* 搜索和操作区域 */}
            <div className={styles.searchBar}>
                <div className={styles.searchLeft}>
                    <RangePicker 
                        placeholder={['开始日期', '结束日期']}
                        style={{width: 240, height: 30, borderRadius: 2}}
                    />
                    <Select
                        placeholder="交班班次"
                        value={searchValue}
                        onChange={setSearchValue}
                        style={{width: 120, height: 30, borderRadius: 2}}
                        allowClear
                    >
                        <Option value="白班">白班</Option>
                        <Option value="夜班">夜班</Option>
                    </Select>
                    <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>
                    <Button 
                        danger
                        style={{width: 70, height: 30, borderRadius: 2, display: 'flex', alignItems: 'center', justifyContent: 'center'}}
                        icon={<img src={iconsc} alt="delete" style={{width: 14, height: 14, marginTop: -2}}/>}
                        onClick={handleBatchDelete}
                    >
                        删除
                    </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 DutyHandover;

