// 【重要】必须使用 const Component 作为组件变量名
// 数字化资产ONEOS运管平台 - 工作台模块
const Component = function () {
    var useState = React.useState;
    var useMemo = React.useMemo;
    var useCallback = React.useCallback;
    var antd = window.antd;

    var Breadcrumb = antd.Breadcrumb;
    var Card = antd.Card;
    var Row = antd.Row;
    var Col = antd.Col;
    var List = antd.List;
    var Badge = antd.Badge;
    var Modal = antd.Modal;
    var Tabs = antd.Tabs;
    var Space = antd.Space;

    // 状态管理
    var _approvalModalVisible = useState(false);
    var _notificationModalVisible = useState(false);
    var _activeRole = useState('业管');

    var approvalModalVisible = _approvalModalVisible[0];
    var setApprovalModalVisible = _approvalModalVisible[1];
    var notificationModalVisible = _notificationModalVisible[0];
    var setNotificationModalVisible = _notificationModalVisible[1];
    var activeRole = _activeRole[0];
    var setActiveRole = _activeRole[1];

    // 样式定义
    var styles = {
        container: {
            padding: '20px',
            backgroundColor: '#f0f2f5',
            minHeight: '100vh',
            fontFamily: 'Arial, sans-serif'
        },
        breadcrumb: {
            marginBottom: '20px',
            fontSize: '14px'
        },
        metricCard: {
            background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
            borderRadius: '8px',
            padding: '20px',
            color: 'white',
            cursor: 'pointer',
            transition: 'transform 0.3s, box-shadow 0.3s'
        },
        metricCardCompleted: {
            background: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)'
        },
        metricCardApproved: {
            background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)'
        },
        metricCardNotification: {
            background: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)'
        },
        metricTitle: {
            fontSize: '14px',
            opacity: '0.9',
            marginBottom: '8px'
        },
        metricValue: {
            fontSize: '32px',
            fontWeight: 'bold'
        },
        metricDesc: {
            fontSize: '12px',
            opacity: '0.8',
            marginTop: '8px'
        },
        sectionTitle: {
            fontSize: '16px',
            fontWeight: 'bold',
            marginBottom: '16px',
            color: '#262626',
            paddingLeft: '8px',
            borderLeft: '4px solid #1890ff'
        },
        taskList: {
            maxHeight: '400px',
            overflowY: 'auto'
        },
        taskItem: {
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
            padding: '12px 0',
            borderBottom: '1px solid #f0f0f0'
        },
        taskInfo: {
            flex: 1
        },
        taskName: {
            fontSize: '14px',
            color: '#262626',
            marginBottom: '4px'
        },
        taskTime: {
            fontSize: '12px',
            color: '#8c8c8c'
        },
        processButton: {
            padding: '6px 16px',
            backgroundColor: '#1890ff',
            color: 'white',
            border: 'none',
            borderRadius: '4px',
            cursor: 'pointer',
            fontSize: '12px'
        },
        statCards: {
            marginBottom: '16px'
        },
        statItem: {
            textAlign: 'center',
            padding: '16px',
            backgroundColor: '#fafafa',
            borderRadius: '4px',
            border: '1px solid #f0f0f0'
        },
        statValue: {
            fontSize: '24px',
            fontWeight: 'bold',
            color: '#1890ff',
            marginBottom: '4px'
        },
        statLabel: {
            fontSize: '12px',
            color: '#8c8c8c'
        },
        quickEntryCard: {
            textAlign: 'center',
            padding: '20px',
            backgroundColor: 'white',
            borderRadius: '8px',
            cursor: 'pointer',
            transition: 'all 0.3s',
            border: '1px solid #f0f0f0'
        },
        quickEntryCardHover: {
            boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
            transform: 'translateY(-2px)'
        },
        quickEntryIcon: {
            fontSize: '32px',
            marginBottom: '8px',
            color: '#1890ff'
        },
        quickEntryName: {
            fontSize: '12px',
            color: '#262626'
        },
        modal: {
            top: '20px'
        },
        notificationItem: {
            padding: '12px',
            borderBottom: '1px solid #f0f0f0'
        },
        notificationType: {
            fontSize: '12px',
            color: '#8c8c8c',
            marginBottom: '4px'
        },
        notificationContent: {
            fontSize: '14px',
            color: '#262626',
            marginBottom: '4px'
        },
        notificationTime: {
            fontSize: '12px',
            color: '#bfbfbf'
        }
    };

    // 模拟数据 - 待办工作
    var pendingTasks = [
        { id: 1, name: '交车任务 - 车辆管理', time: '2026-03-30 09:30', type: '运维侧' },
        { id: 2, name: '商业险到期 - 粤A12345', time: '2026-03-30 10:15', type: '业管侧' },
        { id: 3, name: '氢费审核 - 客户A项目', time: '2026-03-30 11:00', type: '业管-能源部侧' },
        { id: 4, name: '调拨任务 - 车辆V001', time: '2026-03-30 14:20', type: '运维侧' },
        { id: 5, name: '年审任务 - 沪D66666', time: '2026-03-30 15:45', type: '运维侧' }
    ];

    // 模拟数据 - 已完成工作
    var completedTasks = [
        { id: 1, name: '异动任务 - 车辆V003', time: '2026-03-29 16:30' },
        { id: 2, name: '租赁账单生成 - HT-2024-001', time: '2026-03-29 14:15' },
        { id: 3, name: '提车应收款 - 客户B', time: '2026-03-28 10:00' }
    ];

    // 模拟数据 - 待审批任务
    var pendingApprovals = [
        { id: 1, flowTime: '2026-03-30 09:00', flowType: '调拨审核', startTime: '2026-03-30 08:30', starter: '张三' },
        { id: 2, flowTime: '2026-03-30 10:30', flowType: '租赁账单审核', startTime: '2026-03-30 10:00', starter: '李四' },
        { id: 3, flowTime: '2026-03-30 11:15', flowType: '提车应收款审核', startTime: '2026-03-30 11:00', starter: '王五' },
        { id: 4, flowTime: '2026-03-30 14:00', flowType: '租赁合同审核', startTime: '2026-03-30 13:30', starter: '赵六' },
        { id: 5, flowTime: '2026-03-30 15:30', flowType: '氢费账单审核', startTime: '2026-03-30 15:00', starter: '孙七' }
    ];

    // 模拟数据 - 已审批任务
    var approvedTasks = [
        { id: 1, name: '替换车审核', time: '2026-03-29 15:00' },
        { id: 2, name: '还车应结款审核', time: '2026-03-28 14:30' }
    ];

    // 模拟数据 - 通知消息
    var notifications = [
        { id: 1, type: '保险到期提醒', content: '粤A12345商业险将在2026-04-15到期，请尽快处理', time: '2026-03-30 09:00' },
        { id: 2, type: '营运证到期提醒', content: '粤B67890营运证还有90天到期，请尽快更新营运证', time: '2026-03-30 10:30' },
        { id: 3, type: '租赁合同到期提醒', content: 'HT-2024-001 客户A项目还有30天到期，请尽快处理', time: '2026-03-30 11:00' },
        { id: 4, type: '氢费余额不足提醒', content: '客户A 项目A氢费余额已不足500元，请尽快通知客户处理', time: '2026-03-30 14:00' },
        { id: 5, type: '审批流程提醒', content: '张三 调拨流程审批节点已到达，请进行审批', time: '2026-03-30 15:30' }
    ];

    // 模拟数据 - 车辆统计
    var vehicleStats = {
        total: 1250,
        selfOperated: 890,
        inventory: 210,
        pending: 150
    };

    // 模拟数据 - 合同统计
    var contractStats = {
        total: 156,
        selfOperated: 98
    };

    // 快速入口配置
    var quickEntries = {
        '业管': [
            { name: '租赁合同', icon: '📄' },
            { name: '交车任务', icon: '🚗' },
            { name: '提车应收款', icon: '💰' },
            { name: '租赁账单', icon: '📊' },
            { name: '还车应结款', icon: '💵' },
            { name: '能源账户', icon: '⚡' },
            { name: '氢费账单', icon: '🔋' },
            { name: '电费账单', icon: '⚡' },
            { name: 'ETC账单', icon: '🛣️' },
            { name: '保险管理', icon: '🛡️' },
            { name: '审批中心', icon: '✅' }
        ],
        '业管-能源部': [
            { name: '加氢订单管理', icon: '⛽' }
        ],
        '运维': [
            { name: '车辆管理', icon: '🚗' },
            { name: '证照管理', icon: '📋' },
            { name: '备车管理', icon: '🔧' },
            { name: '交车管理', icon: '🚀' },
            { name: '还车管理', icon: '🏠' },
            { name: '替换车管理', icon: '🔄' },
            { name: '调拨管理', icon: '📦' },
            { name: '异动管理', icon: '📊' },
            { name: '备件库管理', icon: '🔩' }
        ],
        '财务': [
            { name: '提车应收款', icon: '💰' },
            { name: '租赁账单', icon: '📊' },
            { name: '还车应结款', icon: '💵' },
            { name: '审批中心', icon: '✅' },
            { name: '充值单管理', icon: '💳' }
        ],
        '安全': [
            { name: '违章管理', icon: '🚦' },
            { name: '事故管理', icon: '🚨' },
            { name: '司机管理', icon: '👨‍✈️' },
            { name: '安全培训资料', icon: '📚' },
            { name: '安全培训记录', icon: '📝' }
        ],
        '法务': [
            { name: '审批中心', icon: '✅' }
        ]
    };

    // 角色标签
    var roleTabs = ['业管', '业管-能源部', '运维', '财务', '安全', '法务'];

    // 处理待办任务
    var handleProcessTask = function(task) {
        console.log('处理任务:', task);
    };

    // 处理审批
    var handleProcessApproval = function(approval) {
        console.log('处理审批:', approval);
    };

    // 处理快速入口
    var handleQuickEntry = function(entry) {
        console.log('快速入口:', entry);
    };

    return React.createElement('div', { style: styles.container },
        // 面包屑
        React.createElement(Breadcrumb, { style: styles.breadcrumb },
            React.createElement(Breadcrumb.Item, null, '工作台')
        ),

        // 顶部关键指标卡片
        React.createElement(Row, { gutter: 16, style: { marginBottom: '24px' } },
            // 待办工作
            React.createElement(Col, { span: 4 },
                React.createElement('div', { style: styles.metricCard },
                    React.createElement('div', { style: styles.metricTitle }, '待办工作'),
                    React.createElement('div', { style: styles.metricValue }, '5'),
                    React.createElement('div', { style: styles.metricDesc }, '运维侧: 3 | 业管侧: 1 | 能源部: 1')
                )
            ),
            // 已完成工作
            React.createElement(Col, { span: 4 },
                React.createElement('div', { style: Object.assign({}, styles.metricCard, styles.metricCardCompleted) },
                    React.createElement('div', { style: styles.metricTitle }, '已完成工作'),
                    React.createElement('div', { style: styles.metricValue }, '3'),
                    React.createElement('div', { style: styles.metricDesc }, '本周完成: 3 | 本月完成: 12')
                )
            ),
            // 待审批任务
            React.createElement(Col, { span: 4 },
                React.createElement('div', { style: styles.metricCard, onClick: function() { setApprovalModalVisible(true); } },
                    React.createElement('div', { style: styles.metricTitle }, '待审批任务'),
                    React.createElement('div', { style: styles.metricValue }, '5'),
                    React.createElement('div', { style: styles.metricDesc }, '运维: 1 | 财务: 3 | 法务: 1')
                )
            ),
            // 已审批任务
            React.createElement(Col, { span: 4 },
                React.createElement('div', { style: Object.assign({}, styles.metricCard, styles.metricCardApproved) },
                    React.createElement('div', { style: styles.metricTitle }, '已审批任务'),
                    React.createElement('div', { style: styles.metricValue }, '2'),
                    React.createElement('div', { style: styles.metricDesc }, '本周审批: 2 | 本月审批: 8')
                )
            ),
            // 通知消息
            React.createElement(Col, { span: 4 },
                React.createElement('div', { style: Object.assign({}, styles.metricCard, styles.metricCardNotification), onClick: function() { setNotificationModalVisible(true); } },
                    React.createElement('div', { style: styles.metricTitle }, '通知消息'),
                    React.createElement('div', { style: styles.metricValue }, '5'),
                    React.createElement('div', { style: styles.metricDesc }, '运维: 3 | 业管: 1 | 审批: 1')
                )
            )
        ),

        // 中间内容区域
        React.createElement(Row, { gutter: 16 },
            // 左侧 - 我的待办清单
            React.createElement(Col, { span: 7 },
                React.createElement(Card, { title: React.createElement('div', { style: styles.sectionTitle }, '我的待办清单'), bordered: false, style: { height: '100%' } },
                    React.createElement('div', { style: styles.taskList },
                        pendingTasks.map(function(task) {
                            return React.createElement('div', { key: task.id, style: styles.taskItem },
                                React.createElement('div', { style: styles.taskInfo },
                                    React.createElement('div', { style: styles.taskName }, task.name),
                                    React.createElement('div', { style: styles.taskTime }, task.time + ' | ' + task.type)
                                ),
                                React.createElement('button', {
                                    style: styles.processButton,
                                    onClick: function() { handleProcessTask(task); }
                                }, '去处理')
                            );
                        })
                    )
                )
            ),

            // 中间 - 数据统计模块
            React.createElement(Col, { span: 10 },
                // 车辆数据统计
                React.createElement(Card, { title: React.createElement('div', { style: styles.sectionTitle }, '车辆数据统计'), bordered: false, style: { marginBottom: '16px' } },
                    React.createElement(Row, { gutter: 16, style: styles.statCards },
                        React.createElement(Col, { span: 6 },
                            React.createElement('div', { style: styles.statItem },
                                React.createElement('div', { style: styles.statValue }, vehicleStats.total),
                                React.createElement('div', { style: styles.statLabel }, '车辆总数')
                            )
                        ),
                        React.createElement(Col, { span: 6 },
                            React.createElement('div', { style: styles.statItem },
                                React.createElement('div', { style: styles.statValue }, vehicleStats.selfOperated),
                                React.createElement('div', { style: styles.statLabel }, '自营车辆数')
                            )
                        ),
                        React.createElement(Col, { span: 6 },
                            React.createElement('div', { style: styles.statItem },
                                React.createElement('div', { style: styles.statValue }, vehicleStats.inventory),
                                React.createElement('div', { style: styles.statLabel }, '库存车辆数')
                            )
                        ),
                        React.createElement(Col, { span: 6 },
                            React.createElement('div', { style: styles.statItem },
                                React.createElement('div', { style: styles.statValue }, vehicleStats.pending),
                                React.createElement('div', { style: styles.statLabel }, '待运营车辆数')
                            )
                        )
                    ),
                    // 近12个月运营车辆、闲置车辆双柱状图（使用Ant Design Charts）
                    React.createElement('div', { style: { height: '200px', marginTop: '16px', backgroundColor: '#fafafa', borderRadius: '4px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#8c8c8c' } },
                        '[柱状图：近12个月运营车辆、闲置车辆统计]'
                    )
                ),

                // 合同数据统计
                React.createElement(Card, { title: React.createElement('div', { style: styles.sectionTitle }, '合同数据统计'), bordered: false },
                    React.createElement(Row, { gutter: 16, style: styles.statCards },
                        React.createElement(Col, { span: 12 },
                            React.createElement('div', { style: styles.statItem },
                                React.createElement('div', { style: styles.statValue }, contractStats.total),
                                React.createElement('div', { style: styles.statLabel }, '租赁合同总数')
                            )
                        ),
                        React.createElement(Col, { span: 12 },
                            React.createElement('div', { style: styles.statItem },
                                React.createElement('div', { style: styles.statValue }, contractStats.selfOperated),
                                React.createElement('div', { style: styles.statLabel }, '自营合同总数')
                            )
                        )
                    ),
                    // 近12个月租赁合同、自营合同双柱状图
                    React.createElement('div', { style: { height: '200px', marginTop: '16px', backgroundColor: '#fafafa', borderRadius: '4px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#8c8c8c' } },
                        '[柱状图：近12个月租赁合同、自营合同统计]'
                    )
                )
            ),

            // 右侧 - 我的通知清单
            React.createElement(Col, { span: 7 },
                React.createElement(Card, { title: React.createElement('div', { style: styles.sectionTitle }, '我的通知清单'), bordered: false, style: { height: '100%' } },
                    React.createElement('div', { style: styles.taskList },
                        notifications.map(function(notification) {
                            return React.createElement('div', { key: notification.id, style: styles.notificationItem },
                                React.createElement('div', { style: styles.notificationType }, notification.type),
                                React.createElement('div', { style: styles.notificationContent }, notification.content),
                                React.createElement('div', { style: styles.notificationTime }, notification.time)
                            );
                        })
                    )
                )
            )
        ),

        // 底部快速入口
        React.createElement(Card, { title: React.createElement('div', { style: styles.sectionTitle }, '快速入口'), bordered: false, style: { marginTop: '16px' } },
            React.createElement(Tabs, { activeKey: activeRole, onChange: function(key) { setActiveRole(key); } },
                roleTabs.map(function(role) {
                    return React.createElement(Tabs.TabPane, { tab: role, key: role },
                        React.createElement(Row, { gutter: 16 },
                            quickEntries[role].map(function(entry, index) {
                                return React.createElement(Col, { key: index, span: 4 },
                                    React.createElement('div', {
                                        style: styles.quickEntryCard,
                                        onClick: function() { handleQuickEntry(entry); }
                                    },
                                        React.createElement('div', { style: styles.quickEntryIcon }, entry.icon),
                                        React.createElement('div', { style: styles.quickEntryName }, entry.name)
                                    )
                                );
                            })
                        )
                    );
                })
            )
        ),

        // 待审批任务弹窗
        React.createElement(Modal, {
            title: '待审批任务',
            visible: approvalModalVisible,
            onCancel: function() { setApprovalModalVisible(false); },
            footer: null,
            width: 800,
            style: styles.modal
        },
            React.createElement(List, {
                dataSource: pendingApprovals,
                renderItem: function(approval) {
                    return React.createElement(List.Item, null,
                        React.createElement(List.Item.Meta, {
                            title: approval.flowType,
                            description: React.createElement('div', null,
                                React.createElement('div', null, '流程到达时间: ' + approval.flowTime),
                                React.createElement('div', null, '发起时间: ' + approval.startTime),
                                React.createElement('div', null, '发起人: ' + approval.starter)
                            )
                        }),
                        React.createElement('button', {
                            style: styles.processButton,
                            onClick: function() { handleProcessApproval(approval); }
                        }, '去处理')
                    );
                }
            })
        ),

        // 通知消息弹窗
        React.createElement(Modal, {
            title: '通知消息',
            visible: notificationModalVisible,
            onCancel: function() { setNotificationModalVisible(false); },
            footer: null,
            width: 800,
            style: styles.modal
        },
            React.createElement(List, {
                dataSource: notifications,
                renderItem: function(notification) {
                    return React.createElement(List.Item, null,
                        React.createElement(List.Item.Meta, {
                            title: notification.type,
                            description: React.createElement('div', null,
                                React.createElement('div', { style: { fontSize: '14px', marginBottom: '4px' } }, notification.content),
                                React.createElement('div', { style: { fontSize: '12px', color: '#8c8c8c' } }, notification.time)
                            )
                        })
                    );
                }
            })
        )
    );
};