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

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

    const columns = [
        {
            title: '编号',
            dataIndex: 'id',
            key: 'id',
            width: 80,
        },
        {
            title: '客户名称',
            dataIndex: 'customerName',
            key: 'customerName',
            width: 150,
        },
        {
            title: '联系人',
            dataIndex: 'contact',
            key: 'contact',
            width: 120,
        },
        {
            title: '联系电话',
            dataIndex: 'phone',
            key: 'phone',
            width: 150,
        },
        {
            title: '公司地址',
            dataIndex: 'address',
            key: 'address',
            width: 200,
        },
        {
            title: '客户类型',
            dataIndex: 'customerType',
            key: 'customerType',
            width: 120,
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
            width: 180,
        },
        {
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            width: 150,
            render: (text, record) => (
                <Space>
                    <Button type="link" size="small">编辑</Button>
                    <Button type="link" size="small" danger>删除</Button>
                </Space>
            ),
        },
    ];

    const tableData = [
        {
            key: '1',
            id: '001',
            customerName: '某某石油公司',
            contact: '张经理',
            phone: '138****8888',
            address: '北京市朝阳区xxx路xxx号',
            customerType: '企业客户',
            createTime: '2024-12-20 10:00:00',
        },
        {
            key: '2',
            id: '002',
            customerName: '某某加油站',
            contact: '李经理',
            phone: '139****9999',
            address: '上海市浦东新区xxx路xxx号',
            customerType: '零售客户',
            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 CustomerInfoManagement;