import TabsComp from '@/components/TabsComp';
import styles from '../../../GLQ/index.less';
import { useState } from 'react';
import { Checkbox, ConfigProvider, DatePicker, Input, Select, Table } from 'antd';

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

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

  const columns: any = [
    { title: '单位名称', dataIndex: 'name', key: 'name', align: 'center' },
    { title: '设备名称', dataIndex: 'name', key: 'name', align: 'center' },
    { title: '实体标识', dataIndex: 'name', key: 'name', align: 'center' },
    { title: '设备型号', dataIndex: 'name', key: 'name', align: 'center' },
    { title: '网络', dataIndex: 'name', key: 'name', align: 'center' },
    { title: '管理盘号', dataIndex: 'name', key: 'name', align: 'center' },
    { 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}`}>
      <TabsComp
        dataSource={[{ id: 1, name: '信息汇总' }]}
        activeTab={activeTab}
        onChange={(e) => setActiveTab(e)} />

      <div className='flex_aiC_jB mb20'>
        <ContentWarp
          style={{ padding: '50px 20px 20px 20px', width: 'calc(100% - 140px)' }}
          text={'数据收集（共0条）'}
        >
          <div className='flex_aiC mb20'>
            <div>收集时间：20秒</div>
            <ButtonComp style={{ marginLeft: 40 }} text={'设置'} onClick={() => { }} />
          </div>
          <Table
            scroll={tableData.length > 0 ? { y: 41 * 5 } : {}}
            pagination={false}
            bordered
            columns={columns}
            dataSource={tableData}
            rowKey={(record: any) => record?.id}
            rowClassName={rowClassName}
          />
        </ContentWarp>

        <div className='flex_jE mt20 ml20'>
          <ButtonComp text={'查询'} onClick={() => { }} />
        </div>
      </div>

      <ButtonComp type={'special'} text={'查找结果'} onClick={() => { }} />
      <Table
        scroll={tableData.length > 0 ? { y: 41 * 5 } : {}}
        pagination={false}
        bordered
        columns={columns}
        dataSource={tableData}
        rowKey={(record: any) => record?.id}
        rowClassName={rowClassName}
      />

      <ContentWarp
        style={{ padding: '50px 20px 20px 20px', marginTop: 32 }}
        text={'数据上报'}
      >
        <div className='flex_aiC mb20'>
          <div>上报超时时间：20秒</div>
          <ButtonComp style={{ marginLeft: 40 }} text={'设置'} onClick={() => { }} />
        </div>

        <div className='flex_aiC'>
          <div className='mr16'>--</div>
          <Input placeholder="请输入" style={{width: 260, marginRight: 120}}/>
          <div className='mr16'>状态</div>
          <Input placeholder="请输入状态" style={{width: 260}}/>
          <ButtonComp style={{ marginLeft: 40 }} text={'设置'} onClick={() => { }} />
        </div>
      </ContentWarp>
    </div>
  );
}
