import React from 'react';
import { Button, Table } from 'antd';

const StationManage = () => {
    const columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
            sorter: (a: any, b: any) => a.id - b.id,
        },
        {
            title: '站点名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '所属线路',
            dataIndex: 'route',
            key: 'route',
        },
        {
            title: '操作',
            render: (record: any) => (
                <div>
                    <Button type="primary" size="small">
                        修改信息
                    </Button>
                    <Button type="primary" size="small">
                        删除车站
                    </Button>
                </div>
            ),
        },
    ];
    const data = [
        {
            id: 1,
            name: 'F7',
            route: '1号线',
        },
        {
            id: 2,
            name: 'F6',
            route: '1号线',
        },
        {
            id: 3,
            name: 'F5',
            route: '1号线',
        },
        {
            id: 4,
            name: 'F4',
            route: '1号线',
        },
        {
            id: 5,
            name: 'F3',
            route: '1号线',
        },
        {
            id: 6,
            name: 'F2',
            route: '1号线',
        },
        {
            id: 7,
            name: 'F1',
            route: '1号线',
        },
        {
            id: 8,
            name: 'F9',
            route: '1号线',
        },
        {
            id: 9,
            name: 'F11',
            route: '1号线',
        },
        {
            id: 10,
            name: 'F12',
            route: '1号线',
        },
        {
            id: 11,
            name: 'F13',
            route: '1号线',
        },
        {
            id: 12,
            name: 'F14',
            route: '1号线',
        },
        {
            id: 13,
            name: 'F15',
            route: '1号线',
        },
        {
            id: 14,
            name: 'F16',
            route: '1号线',
        },
        {
            id: 15,
            name: 'F17',
            route: '1号线',
        },
        {
            id: 16,
            name: 'F18',
            route: '1号线',
        },
        {
            id: 17,
            name: 'S1',
            route: '2号线',
        },
        {
            id: 18,
            name: 'S2',
            route: '2号线',
        },
        {
            id: 19,
            name: 'S3',
            route: '2号线',
        },
        {
            id: 20,
            name: 'S4',
            route: '2号线',
        },
        {
            id: 21,
            name: 'S5',
            route: '2号线',
        },
        {
            id: 22,
            name: 'S6',
            route: '2号线',
        },
        {
            id: 23,
            name: 'FS8',
            route: '2号线',
        },
        {
            id: 24,
            name: 'S8',
            route: '2号线',
        },
        {
            id: 25,
            name: 'S9',
            route: '2号线',
        },
        {
            id: 26,
            name: 'S10',
            route: '2号线',
        },
        {
            id: 27,
            name: 'S12',
            route: '2号线',
        },
        {
            id: 28,
            name: 'S13',
            route: '2号线',
        },
        {
            id: 29,
            name: 'S14',
            route: '2号线',
        },
        {
            id: 30,
            name: 'S15',
            route: '2号线',
        },
        {
            id: 31,
            name: 'S16',
            route: '2号线',
        },
        {
            id: 32,
            name: 'S17',
            route: '2号线',
        },
        {
            id: 33,
            name: 'S18',
            route: '2号线',
        },
        {
            id: 34,
            name: 'S19',
            route: '2号线',
        },
        {
            id: 35,
            name: 'S20',
            route: '2号线',
        },
        {
            id: 36,
            name: 'T16',
            route: '3号线',
        },
        {
            id: 37,
            name: 'T15',
            route: '3号线',
        },
        {
            id: 38,
            name: 'FT10',
            route: '3号线',
        },
        {
            id: 39,
            name: 'T13',
            route: '3号线',
        },
        {
            id: 40,
            name: 'T12',
            route: '3号线',
        },
        {
            id: 41,
            name: 'ST11',
            route: '3号线',
        },
        {
            id: 42,
            name: 'T10',
            route: '3号线',
        },
        {
            id: 43,
            name: 'T9',
            route: '3号线',
        },
        {
            id: 44,
            name: 'T8',
            route: '3号线',
        },
        {
            id: 45,
            name: 'T7',
            route: '3号线',
        },
        {
            id: 46,
            name: 'T6',
            route: '3号线',
        },
        {
            id: 47,
            name: 'T5',
            route: '3号线',
        },
        {
            id: 48,
            name: 'T4',
            route: '3号线',
        },
        {
            id: 49,
            name: 'T3',
            route: '3号线',
        },
        {
            id: 50,
            name: 'T2',
            route: '3号线',
        },
        {
            id: 51,
            name: 'T1',
            route: '3号线',
        },
    ];
    return (
        <div>
            <Button type="primary">增加车站</Button>
            <Table columns={columns} dataSource={data} rowKey={(record) => record.id} />
            <style>{`
                    .custom-filter-dropdown {
                      padding: 8px;
                      border-radius: 6px;
                      background: #fff;
                      box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
                    }
                    .custom-filter-dropdown input {
                      width: 130px;
                      margin-right: 8px;
                    }
                    .highlight {
                      color: #f50;
                    }
                `}</style>
        </div>
    );
};

export default StationManage;
