import React from 'react';
import { Card, Table, Input, Button, Space } from 'antd';
import { PlusOutlined, SearchOutlined } from '@ant-design/icons';
import styles from './DataModeling.less';

const DataModeling = () => {
    const onSearch = (value) => {
        console.log('搜索内容:', value);
    };

    const columns = [
        {
            title: '编号111',
            dataIndex: 'id',
            key: 'id',
            width: 80,
        },
        {
            title: '模型名称',
            dataIndex: 'modelName',
            key: 'modelName',
            width: 150,
        },
        {
            title: '模型类型',
            dataIndex: 'modelType',
            key: 'modelType',
            width: 120,
        },
        {
            title: '数据源',
            dataIndex: 'dataSource',
            key: 'dataSource',
            width: 150,
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            width: 100,
            render: (text) => {
                const statusMap = {
                    '运行中': { color: '#52c41a', bg: '#f6ffed' },
                    '已停止': { color: '#ff4d4f', bg: '#fff1f0' },
                    '待启动': { color: '#faad14', bg: '#fffbe6' },
                };
                const style = statusMap[text] || {};
                return (
                    <span
                        style={{
                            color: style.color,
                            backgroundColor: style.bg,
                            padding: '2px 8px',
                            borderRadius: '4px',
                            fontSize: '12px',
                        }}
                    >
                        {text}
                    </span>
                );
            },
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            width: 180,
        },
        {
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            width: 200,
            render: (text, record) => (
                <Space>
                    <Button type="link" size="small">编辑</Button>
                    <Button type="link" size="small">运行</Button>
                    <Button type="link" size="small" danger>删除</Button>
                </Space>
            ),
        },
    ];

    const tableData = [
        {
            key: '1',
            id: '001',
            modelName: '销售预测模型',
            modelType: '预测模型',
            dataSource: '销售数据表',
            status: '运行中',
            createTime: '2024-12-20 10:00:00',
        },
        {
            key: '2',
            id: '002',
            modelName: '库存分析模型',
            modelType: '分析模型',
            dataSource: '库存数据表',
            status: '已停止',
            createTime: '2024-12-20 10:00:00',
        },
    ];

    return (
        <div className={styles.container}>
            <Card>
                <div className={styles.header}>
                    <div className={styles.title}>数据建模</div>
                    <Space>
                        <Input.Search
                            placeholder="搜索模型名称..."
                            onSearch={onSearch}
                            style={{ width: 200 }}
                            prefix={<SearchOutlined />}
                        />
                        <Button type="primary" icon={<PlusOutlined />}>
                            新建模型
                        </Button>
                    </Space>
                </div>
                <Table
                    columns={columns}
                    dataSource={tableData}
                    pagination={{
                        pageSize: 10,
                        showTotal: (total) => `共 ${total} 条`,
                    }}
                />
            </Card>
        </div>
    );
};

export default DataModeling;

