import { Button, Col, Progress, Row, Tag, Space, Form, Input, Select, DatePicker, } from "antd";
import Title from '../homepage/compontent/title'
import styles from './My.less'
import svg1 from '../../assets/img/asset-main1.svg'
import { SearchOutlined } from "@ant-design/icons";
import TableWithPagination from "@/components/assetmangement/table";
import {useEffect} from 'react'
import * as echarts from 'echarts';
const { Option } = Select;

const { RangePicker } = DatePicker;

const My = () => {
    const [form] = Form.useForm();
    // 表格列配置
    const ruleColumns = [
        { title: '工单ID', dataIndex: 'workOrderId', key: 'workOrderId' },
        { title: '工单类型', dataIndex: 'type', key: 'type' },
        { title: '申请人', dataIndex: 'applicant', key: 'applicant' },
        { title: '申请时间', dataIndex: 'applyTime', key: 'applyTime',align:'center'},
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            align: 'center',
            render: (status) => {
                // 根据图片中状态的颜色更新渲染逻辑
                let color = '';
                switch (status) {
                    case '已完成':
                        color = '#52c41a'; // 绿色
                        break;
                    case '已驳回':
                        color = '#f5222d'; // 红色
                        break;
                    case '处理中':
                        color = '#1890ff'; // 蓝色
                        break;
                    case '待处理':
                        color = '#fa8c16'; // 橙色
                        break;
                    default:
                        color = '#8c8c8c';
                }
                return <span style={{color:color}}>{status}</span>;
            }
        },
        { title: '进度', dataIndex: 'progress', key: 'progress',align:'center' },
        {
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            align:'center',
            render: (text, record) => {
                const actions = [];
                if (record.status === '已完成') {
                    actions.push(<a key="view" style={{ color: '#2C9E9D' }}>查看详情</a>);
                    actions.push(<a key="evaluate" style={{ color: '#2C9E9D' }}>评价</a>);
                    actions.push(<a key="delete" style={{ color: '#2C9E9D' }}>删除</a>);
                } else if (record.status === '已驳回') {
                    actions.push(<a key="edit" style={{ color: '#2C9E9D' }}>编辑</a>);
                    actions.push(<a key="reapply" style={{ color: '#2C9E9D' }}>重新申请</a>);
                } else if (record.status === '处理中' || record.status === '待处理') {
                    actions.push(<a key="view" style={{ color: '#2C9E9D' }}>查看详情</a>);
                    actions.push(<a key="process" style={{ color: '#2C9E9D' }}>处理</a>);
                    actions.push(<a key="delete" style={{ color: '#2C9E9D' }}>删除</a>);
                }
                return <Space>{actions}</Space>;
            }
        },
    ];

    // 表格数据
    const reminderRuleData = [
        { key: '1', workOrderId: 'WO-MY01', type: '设备维修', applicant: '李舒萍', applyTime: '2025-10-30', status: '处理中', progress: '50%', priority: '紧急' },
        { key: '2', workOrderId: 'WO-MY02', type: '软件升级', applicant: '吴洁丽', applyTime: '2025-10-29', status: '待处理', progress: '0%', priority: '高' },
        { key: '3', workOrderId: 'WO-MY03', type: '故障报修', applicant: '李姝萍', applyTime: '2025-10-28', status: '已完成', progress: '100%', priority: '中' },
        { key: '4', workOrderId: 'WO-MY04', type: '巡检任务', applicant: '何克金', applyTime: '2025-10-27', status: '处理中', progress: '60%', priority: '中' },
        { key: '5', workOrderId: 'WO-MY05', type: '设备维修', applicant: '李勇', applyTime: '2025-10-26', status: '已驳回', progress: '0%', priority: '中' },
        { key: '6', workOrderId: 'WO-MY06', type: '软件升级', applicant: '周校民', applyTime: '2025-10-25', status: '待处理', progress: '0%', priority: '高' },
        { key: '7', workOrderId: 'WO-MY07', type: '故障报修', applicant: '何艳丽', applyTime: '2025-10-24', status: '已完成', progress: '100%', priority: '中' }
    ];
    const conicColors = {
        '0%': '#006665',
        '50%': '#45FFEC',
        '55%': '#006665',
        '90%': '#45FFEC',
    };

    return (
        <div style={{ backgroundColor: '#f0f7f7', overflowX: 'hidden' ,padding:'20px',width:'100%'}}>
            <Row gutter={20} style={{ height: '100%' ,width:'100%'}}>

                    <div style={{ padding: '20px', backgroundColor: '#fff', height: '100%' ,width:'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" >
                                        <Input placeholder="分组名称、分组 ID" />
                                    </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 style={{ width: '100%', marginTop: '20px' }}>

                                <Button className={styles['search-button']} style={{marginRight:'30px'}}>导出我的工单</Button>
                                <Button className={styles['del-button']}>删除</Button>
                            </Row>
                            <Row style={{ width: '100%', marginTop: '20px' }}>
                                <TableWithPagination columns={ruleColumns} dataSource={reminderRuleData} rowSelection={true}></TableWithPagination>
                            </Row>
                        </Row>
                    </div>

            </Row>
        </div>
    )
}
export default My;
