import React, { useState } from 'react';
import { Card, Form, Input, Select, DatePicker, Button, Space, Row, Col } from 'antd';
import { SearchOutlined, PlusOutlined } from '@ant-design/icons';
import Title from '../homepage/compontent/title';
import TableWithPagination from '@/components/assetmangement/table';
import styles from './List.less';

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

// 模拟数据
const mockData = [
    { id: 'WO-001', type: '设备维修', applicant: '李舒得', handler: '赵妍', status: '处理中', progress: 50, priority: '紧急', applyTime: '2025-10-30' },
    { id: 'WO-002', type: '软件升级', applicant: '吴洁丽', handler: '', status: '待处理', progress: 0, priority: '高', applyTime: '2025-10-29' },
    { id: 'WO-003', type: '巡检任务', applicant: '李姝萍', handler: '王佛瑶', status: '已完成', progress: 100, priority: '中', applyTime: '2025-10-28' },
    { id: 'WO-004', type: '故障报修', applicant: '何宪金', handler: '赵立民', status: '待验收', progress: 80, priority: '紧急', applyTime: '2025-10-27' },
    { id: 'WO-005', type: '设备维修', applicant: '李勇', handler: '', status: '已驳回', progress: 0, priority: '中', applyTime: '2025-10-26' },
    { id: 'WO-006', type: '软件升级', applicant: '周牧民', handler: '', status: '待分配', progress: 0, priority: '高', applyTime: '2025-10-25' },
    { id: 'WO-007', type: '巡检任务', applicant: '何艳丽', handler: '周福元', status: '处理中', progress: 60, priority: '中', applyTime: '2025-10-24' },
];

// 表格列配置
const columns = [
    {
        title: '工单ID',
        dataIndex: 'id',
        key: 'id',
    },
    {
        title: '工单类型',
        dataIndex: 'type',
        key: 'type',
    },
    {
        title: '申请人',
        dataIndex: 'applicant',
        key: 'applicant',
    },
    {
        title: '申请时间',
        dataIndex: 'applyTime',
        key: 'applyTime',
    },
    {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        render: (text) => {
            let statusStyle = {};
            switch (text) {
                case '已完成':
                    statusStyle = { color: '#52c41a' };
                    break;
                case '处理中':
                    statusStyle = { color: '#1890ff' };
                    break;
                case '待处理':
                    statusStyle = { color: '#faad14' };
                    break;
                case '待验收':
                    statusStyle = { color: '#1890ff' };
                    break;
                case '已驳回':
                    statusStyle = { color: '#f5222d' };
                    break;
                case '待分配':
                    statusStyle = { color: '#faad14' };
                    break;
                default:
                    statusStyle = { color: '#d9d9d9' };
            }
            return <span style={statusStyle}>{text}</span>;
        },
    },
    {
        title: '处理人',
        dataIndex: 'handler',
        key: 'handler',
        render: (text) => text || '--',
    },
    {
        title: '进度',
        dataIndex: 'progress',
        key: 'progress',
        render: (text) => `${text}%`,
    },
    {
        title: '优先级',
        dataIndex: 'priority',
        key: 'priority',
        render: (text) => {
            let priorityStyle = {};
            switch (text) {
                case '紧急':
                    priorityStyle = { color: '#f5222d' };
                    break;
                case '高':
                    priorityStyle = { color: '#faad14' };
                    break;
                case '中':
                    priorityStyle = { color: '#1890ff' };
                    break;
                default:
                    priorityStyle = { color: '#d9d9d9' };
            }
            return <span style={priorityStyle}>{text}</span>;
        },
    },
    {
        title: '操作',
        key: 'action',
        align:'center',
        render: (_, record) => {
            let actions = [];
            
            // 根据状态显示不同操作
            actions.push(<Button type="link" key="view" style={{ color: '#2C9E9D' }}>查看详情</Button>);
            
            if (record.status === '处理中' || record.status === '待处理' || record.status === '待分配') {
                actions.push(<Button type="link" key="edit" style={{ color: '#2C9E9D' }}>编辑</Button>);
            }
            
            if (record.status === '处理中' || record.status === '待分配') {
                actions.push(<Button type="link" key="assign" style={{ color: '#2C9E9D' }}>分配</Button>);
            }
            
            if (record.status === '待处理') {
                actions.push(<Button type="link" key="export" style={{ color: '#2C9E9D' }}>导出</Button>);
                actions.push(<Button type="link" key="evaluate" style={{ color: '#2C9E9D' }}>评价</Button>);
            }
            
            if (record.status === '已完成') {
                actions.push(<Button type="link" key="link" style={{ color: '#2C9E9D' }}>关联</Button>);
            }
            
            if (record.status === '待验收') {
                actions.push(<Button type="link" key="accept" style={{ color: '#2C9E9D' }}>验收</Button>);
                actions.push(<Button type="link" danger key="reject">驳回</Button>);
            }
            
            if (record.status === '已驳回') {
                actions.push(<Button type="link" key="reapply" style={{ color: '#2C9E9D' }}>重新申请</Button>);
            }
            
            if (record.status === '处理中') {
                actions.push(<Button type="link" key="follow" style={{ color: '#2C9E9D' }}>跟进</Button>);
            }
            
            return <Space size="middle">{actions}</Space>;
        },
    },
];


const List = () => {
    const [form] = Form.useForm();
    const [dataSource, setDataSource] = useState(mockData);
    const [selectedRows, setSelectedRows] = useState([]);
    const [paginationProps, setPaginationProps] = useState({
        total: mockData.length,
        defaultPageSize: 10,
        pageSizeOptions: ['10', '20', '50', '100']
    });

    // 定义fetchData函数，方便后续对接接口
    const fetchData = async (page, pageSize) => {
        try {
            // 这里可以替换为实际的API调用
            // const response = await api.getServiceTickets({ page, pageSize, ...searchParams });
            // return response.data;

            // 模拟API调用
            const startIndex = (page - 1) * pageSize;
            const endIndex = startIndex + pageSize;
            return mockData.slice(startIndex, endIndex);
        } catch (error) {
            console.error('获取工单列表失败:', error);
            return [];
        }
    };

    // 处理行选择
    const handleRowSelection = (selectedRowKeys, selectedRows) => {
        setSelectedRows(selectedRows);
    };

    // 搜索
    const handleSearch = (values) => {
        console.log('搜索条件:', values);
        // 这里可以添加实际的搜索逻辑
    };

    // 重置
    const handleReset = () => {
        form.resetFields();
    };

    // 新增工单
    const handleAdd = () => {
        console.log('新增工单');
        // 这里可以添加实际的新增工单逻辑
    };

    // 导入工单
    const handleImport = () => {
        console.log('导入工单');
        // 这里可以添加实际的导入工单逻辑
    };

    // 导出工单
    const handleExport = () => {
        console.log('导出工单');
        // 这里可以添加实际的导出工单逻辑
    };

    // 打印工单
    const handlePrint = () => {
        console.log('打印工单');
        // 这里可以添加实际的打印工单逻辑
    };

    // 删除工单
    const handleDelete = () => {
        console.log('删除工单');
        // 这里可以添加实际的删除工单逻辑
    };

    return (
        <div className={styles.container}>
            {/* 查询条件区域 */}
            <Card className={styles.card} bordered={false} bodyStyle={{ paddingTop: 20 }}>
                <Row >
                    <Col span={12}>
                        <Title title="查询条件" className={styles.title} />
                    </Col>
                    <Col span={12} style={{ textAlign: 'right' }}>
                        <Space>
                            <Button icon={<SearchOutlined />} htmlType="submit" className={styles['search-button']}>查询</Button>
                            <Button onClick={handleReset} className={styles['reset-button']}>重置</Button>
                        </Space>
                    </Col>
                </Row>
                <Form form={form} layout="inline" onFinish={handleSearch}>
                    <Form.Item name="applicant" label="申请人">
                        <Input placeholder="请输入申请人" />
                    </Form.Item>
                    <Form.Item name="type" label="工单类型">
                        <Select placeholder="请选择工单类型">
                            <Option value="设备维修">设备维修</Option>
                            <Option value="设备安装">设备安装</Option>
                            <Option value="设备巡检">设备巡检</Option>
                            <Option value="设备更换">设备更换</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item name="status" label="状态">
                        <Select placeholder="请选择状态">
                            <Option value="待处理">待处理</Option>
                            <Option value="处理中">处理中</Option>
                            <Option value="已完成">已完成</Option>
                            <Option value="已取消">已取消</Option>
                        </Select>
                    </Form.Item>
                    <Form.Item name="applyTime" label="申请时间">
                        <RangePicker style={{ width: 240 }} />
                    </Form.Item>
                    <Form.Item name="handler" label="处理人">
                        <Input placeholder="请输入" />
                    </Form.Item>
                </Form>
            </Card>

            {/* 工单列表区域 */}
            <Card className={styles.card} bordered={false} bodyStyle={{ paddingTop: 0 }}>
                <Title title="工单列表" className={styles.title} />
                <div className={styles.toolbar}>
                    <div className={styles['button-group']}>
                        <Space size={'large'}>
                            <Button onClick={handleImport} className={styles['search-button']}>
                                导入工单
                            </Button>
                            <Button onClick={handleExport} className={styles['reset-button']}>
                                导出工单
                            </Button>
                        
                        <Button  onClick={handleDelete} className={styles['del-button']}>
                            删除
                        </Button>
                        </Space>
                    </div>

                    <div className={styles['button-group']}>
                        <Space size={'large'}>
                            <Button onClick={handlePrint} className={styles['reset-button']}>
                                打印工单
                            </Button>
                            <Button icon={<PlusOutlined />} onClick={handleAdd} className={styles['search-button']}>
                                新增工单
                            </Button>
                        </Space>
                    </div>
                </div>
                <TableWithPagination
                    columns={columns}
                    dataSource={dataSource}
                    fetchData={fetchData}
                    paginationProps={paginationProps}
                    rowSelection={{ onChange: handleRowSelection }}
                    tableStyle={{ marginTop: 16 }}
                    rowKey="id"
                    isPagination={true}
                />
            </Card>
        </div>
    );
};

export default List;