import styles from '../../../GLQ/index.less';
import { useState } from 'react';
import { ConfigProvider, DatePicker, Input, Modal, Radio, Select, Table } from 'antd';

import { rowClassName } from '@/utils';
import ButtonComp from '@/components/ButtonComp';
import ContentWarp from '@/components/ContentWarp';

export default function Page() {
  const [tableData, setTableData] = useState([]);

  const columns: any = [
    { title: '执勤区名称', dataIndex: 'name', key: 'name', align: 'center' },
    { title: '所属网络', dataIndex: 'name', key: 'name', align: 'center' },
    { title: 'IP地址', dataIndex: 'name', key: 'name', align: 'center' },
    { title: '同步结果', dataIndex: 'name', key: 'name', align: 'center' }
  ]

  return (
    <div className={`${styles.params_warp}`}>
      <ButtonComp type={'special'} text={'数据同步'} onClick={() => { }} />
      <div className='flex_aiC mt30 mb30'>
        <Radio.Group>
          <Radio value="1" style={{ marginRight: 100 }}> 整表同步 </Radio>
          <Radio value="2" style={{ marginRight: 100 }}> 增量同步 </Radio>
        </Radio.Group>
      </div>

      <Table
        scroll={tableData.length > 0 ? { y: 41 * 5 } : {}}
        pagination={false}
        bordered
        columns={columns}
        dataSource={tableData}
        rowKey={(record: any) => record?.id}
        rowClassName={rowClassName}
      />
      
      <div className='flex_jE mt30'>
        <ButtonComp type={'cancel'} text={'执勤区信息'} onClick={() => { }} />
      </div>
    </div>
  );
}