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 [visibility, setVisibility] = useState(false);

  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' }
  ]

  const columns1: any = [
    {
      title: '序号', key: 'index', align: 'center', width: 80,
      render: (a: any, b: any, c: any) => {
        return <span>{c + 1}</span>;
      },
    },
    { title: '设备名称', dataIndex: 'name', key: 'name', align: 'center' },
    { title: '管理实体标识', dataIndex: 'name', key: 'name', align: 'center' },
    { title: '310标识', dataIndex: 'name', key: 'name', align: 'center' },
    { title: '产品名称', dataIndex: 'productName', key: 'productName', align: 'center' },
    { title: '产品编号', dataIndex: 'productNum', key: 'productNum', 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: 'carrierType', key: 'carrierType', align: 'center' },
    { title: '输出日期', 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 value="3"> 下级 </Radio>
        </Radio.Group>
      </div>

      <ContentWarp text={'核心区信息'}>
        <div className='pd20'>
          <Table
            scroll={tableData.length > 0 ? { y: 41 * 5 } : {}}
            pagination={false}
            bordered
            columns={columns}
            dataSource={tableData}
            rowKey={(record: any) => record?.id}
            rowClassName={rowClassName}
          />
        </div>
      </ContentWarp>

      <ButtonComp style={{ marginTop: 30 }} type={'special'} text={'执勤区信息'} onClick={() => { }} />

      <div className='flex_aiC mt30 mb30'>
        <div className='mr16'>所属网络</div>
        <Select style={{ width: 260, margin: '0 20px 0 15px' }} placeholder="请选择所属网络" onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
        <div className='mr16'>隔离器外网IP</div>
        <Input placeholder="请输入隔离器外网IP" style={{ width: 260, marginRight: 20 }} />
        <div className='mr16'>对外服务器IP</div>
        <Input placeholder="请输入对外服务器IP" style={{ width: 260 }} />
      </div>

      <div className='flex_aiC mt20 mb20'>
        <div className='mr16'>执勤区名称</div>
        <Input placeholder="请输入执勤区名称" style={{ width: 260, marginRight: 20 }} />
        <div className='mr16'>隔离器内网IP</div>
        <Input placeholder="请输入隔离器内网IP" style={{ width: 260, marginRight: 20 }} />
        <div className='mr16'>默认通联关系</div>
        <Select style={{ width: 260 }} placeholder="请选择默认通联关系" onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
      </div>

      <div className='flex_aiC mt20 mb20'>
        <div className='mr16'>网闸号</div>
        <Select style={{ width: 260, marginLeft: 27 }} placeholder="请选择网闸号" onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
      </div>

      <div className='flex_jE mt20 mb20'>
        <ButtonComp type='cancel' style={{ marginRight: 20 }} text={'添加'} onClick={() => { }} />
        <ButtonComp type='cancel' style={{ marginRight: 20 }} text={'修改'} onClick={() => { }} />
        <ButtonComp type='cancel' text={'删除'} onClick={() => { }} />
      </div>

      <Table
        scroll={tableData.length > 0 ? { y: 41 * 5 } : {}}
        pagination={false}
        bordered
        columns={columns1}
        dataSource={tableData}
        rowKey={(record: any) => record?.id}
        rowClassName={rowClassName}
      />
    </div>
  );
}