import { Button, Col, Progress, Row, Tag, Space, Form, Input, Select, DatePicker, } from "antd";
import Title from '../homepage/compontent/title'
import styles from './ToDo.less'
import svg1 from '../../assets/img/asset-main1.svg'
import {  SearchOutlined } from "@ant-design/icons";
import TableWithPagination from "@/components/assetmangement/table";
const { Option } = Select;
const { RangePicker } = DatePicker;
const ToDo = () => {
    const [form] = Form.useForm();
    const progressStyle = [
        { title: '即将到期', num: '12', percent: 24, color: '#6E5612', strokeColor: '#FFE666' },
        { title: '已逾期', num: '5', percent: 10, color: '#6E1212', strokeColor: '#FF8966' },
        { title: '正常', num: '33', percent: 66, color: '#12386E', strokeColor: '#66C9FF' },
    ];

    // 表格列配置
    const ruleColumns = [
        { title: '工单ID', dataIndex: 'workOrderId', key: 'workOrderId' },
        { title: '工单类型', dataIndex: 'type', key: 'type' },
        { title: '申请人', dataIndex: 'applicant', key: 'applicant' },
        { title: '申请时间', dataIndex: 'applyTime', key: 'applyTime' },
        { 
            title: '状态', 
            dataIndex: 'status', 
            key: 'status',
            render: (status) => {
                let color = '';
                switch(status) {
                    case '待分配':
                        color = '#1890ff';
                        break;
                    case '待处理':
                        color = '#faad14';
                        break;
                    case '待验收':
                        color = '#52c41a';
                        break;
                    default:
                        color = '#8c8c8c';
                }
                return <Tag color={color}>{status}</Tag>;
            }
        },
        { 
            title: '优先级', 
            dataIndex: 'priority', 
            key: 'priority',
            render: (priority) => {
                let color = '';
                switch(priority) {
                    case '紧急':
                        color = '#f5222d';
                        break;
                    case '高':
                        color = '#faad14';
                        break;
                    case '中':
                        color = '#1890ff';
                        break;
                    default:
                        color = '#8c8c8c';
                }
                return <Tag color={color}>{priority}</Tag>;
            }
        },
        { title: '进度', dataIndex: 'progress', key: 'progress' },
        { 
            title: '操作', 
            dataIndex: 'action', 
            key: 'action',
            render: (text, record) => {
                const actions = [];
                actions.push(<a key="view" style={{ color: '#2C9E9D' }}>查看详情</a>);
                if (record.status === '待分配' || record.status === '待验收') {
                    actions.push(<a key="allocate" style={{ color: '#006665' }}>分配</a>);
                } else if (record.status === '待处理') {
                    actions.push(<a key="process" style={{ color: '#006665' }}>处理</a>);
                }
                return <Space>{actions}</Space>;
            }
        },
    ];

    // 表格数据
    const reminderRuleData = [
        { key: '1', workOrderId: 'WO-010', type: '设备维修', applicant: '李舒萍', applyTime: '2025-10-30', status: '待分配', priority: '紧急', progress: '0%' },
        { key: '2', workOrderId: 'WO-011', type: '故障报修', applicant: '吴洁丽', applyTime: '2025-10-29', status: '待处理', priority: '紧急', progress: '0%' },
        { key: '3', workOrderId: 'WO-012', type: '软件升级', applicant: '李姝萍', applyTime: '2025-10-28', status: '待处理', priority: '高', progress: '0%' },
        { key: '4', workOrderId: 'WO-013', type: '巡检任务', applicant: '何克金', applyTime: '2025-10-27', status: '待处理', priority: '高', progress: '0%' },
        { key: '5', workOrderId: 'WO-014', type: '设备维修', applicant: '李勇', applyTime: '2025-10-26', status: '待验收', priority: '中', progress: '100%' },
        { key: '6', workOrderId: 'WO-015', type: '故障报修', applicant: '周校民', applyTime: '2025-10-25', status: '待处理', priority: '中', progress: '0%' },
        { key: '7', workOrderId: 'WO-016', type: '软件升级', applicant: '何艳丽', applyTime: '2025-10-24', status: '待分配', priority: '中', progress: '0%' },
    ]


    return (
            <div style={{ backgroundColor: '#f0f7f7', overflowX: 'hidden' }}>
                <Row gutter={20} style={{ height: '100%' }}>
                    <Col span={4}>
                        <div style={{ padding: '20px', backgroundColor: '#fff', height: '100%' }}>
                            <Title title={'维保任务总览'}></Title>
                            <div style={{
                                display: 'flex',
                                flexDirection: 'column',
                                marginTop: '20px',
                            }}>
                                <div className={styles['item']}>
                                    <Row wrap={false}>
                                        <Col span={12}>
                                            <div className={styles['item-num']}>50</div>
                                            <div className={styles['item-title']}>总计划数</div>
                                        </Col>
                                        <Col span={12} style={{ textAlign: 'right' }}>
                                            <img src={svg1} alt="" />
                                        </Col>
                                    </Row>
                                </div>
                                {
                                    progressStyle.map((item) => {
                                        return (
                                            <div className={styles['item']}>
                                                <Row wrap={false}>
                                                    <Col span={12}>
                                                        <div className={styles['item-num']} style={{ color: item.color }}>{item.num}
                                                        </div>
                                                        <div className={styles['item-title']}>{item.title}</div>
                                                    </Col>
                                                    <Col span={12} style={{ textAlign: 'right' }}>
                                                        <Progress type={'circle'} percent={item.percent} size={[76, 76]}
                                                            strokeColor={item.strokeColor} />
                                                    </Col>
                                                </Row>
                                            </div>
                                        )
                                    })
                                }
                            </div>
                        </div>
                    </Col>

                    <Col span={20}>
                    <div style={{ padding: '20px', backgroundColor: '#fff', height: '100%' }}>
                        <Row style={{ marginBottom: '20px', backgroundColor: '#fff'}}>
                            <Row style={{ width: '100%' ,marginBottom:'20px'}}>
                                <Col span={12}>
                                    <Title title="查询条件" />
                                </Col>
                                <Col span={12} style={{ textAlign: 'right' }}>
                                    <Space>
                                        <Button icon={<SearchOutlined />} htmlType="submit" className={styles['search-button']}>查询</Button>
                                        <Button className={styles['reset-button']}>重置</Button>
                                    </Space>
                                </Col>
                            </Row>
                            <Form layout="inline" form={form} style={{ width: '100%' ,borderBottom:'1px solid #eeeeee',paddingBottom:'20px'}}>
                                <Row justify="space-between" style={{ width: '100%' }}>
                                <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>
                                </Row>
                            </Form>
                        </Row>
                        <Row style={{ width: '100%', marginTop: '20px', marginBottom: '50px' }}>
                            <Title title="待办工单" />
                            <Row justify="space-between" style={{ width: '100%',marginTop:'20px' }}>
                                <Button className={styles['search-button']}>导出代办</Button>
                            </Row>
                            <Row style={{ width: '100%' ,marginTop:'20px'}}>
                                <TableWithPagination columns={ruleColumns} dataSource={reminderRuleData} rowSelection={true}></TableWithPagination>
                            </Row>
                        </Row>
                        </div>
                    </Col>
                </Row>
            </div>
    )
}
export default ToDo;
