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

import { rowClassName } from '@/utils';
import ButtonComp from '@/components/ButtonComp';
import { secretInstallSearch } from '@/services/my';
import { deviceHardPage } from '@/services/register';

export default function Page() {
  const [tableData, setTableData] = useState<any>([]);
  const [tableData1, setTableData1] = useState<any>([]);
  const [visibility, setVisibility] = useState(false);
  const [queryParams, setQueryParams] = useState({
    a: '',
    b: '',
    c: '',
    d: ''
  });
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);

  const columns: any = [
    {
      title: '序号', key: 'index', align: 'center', width: 80,
      render: (a: any, b: any, c: any) => {
        return <span>{c + 1}</span>;
      },
    },
    { title: '设备名称', dataIndex: 'deviceName', key: 'deviceName', align: 'center',render: (text: any) => text || '--' },
    { title: '管理实体标识', dataIndex: 'managerModelId', key: 'managerModelId', align: 'center',render: (text: any) => text || '--' },
    { title: '310标识', dataIndex: 'deviceMarkId', key: 'deviceMarkId', align: 'center',render: (text: any) => text || '--' },
    { title: 'IP地址', dataIndex: 'ip', key: 'ip', align: 'center',render: (text: any) => text || '--' },
    { title: '密钥种类名称', dataIndex: 'keyTypeName', key: 'keyTypeName', align: 'center',render: (text: any) => text || '--' },
    { title: '密钥类型', dataIndex: 'keyType', key: 'keyType', align: 'center',render: (text: any) => text || '--' },
    { title: '使用区/备用区', dataIndex: 'usageReserveArea', key: 'usageReserveArea', align: 'center',render: (text: any) => text || '--' },
    { title: '产品编号', dataIndex: 'productNum', key: 'productNum', align: 'center',render: (text: any) => text || '--' },
    { title: '安装方式', dataIndex: 'installMethod', key: 'installMethod', align: 'center',render: (text: any) => text || '--' },
    { title: '启用日期', dataIndex: 'activeDate', key: 'activeDate', align: 'center',render: (text: any) => text || '--' },
    { title: '终止日期', dataIndex: 'enterDate', key: 'enterDate', align: 'center',render: (text: any) => text || '--' },
    { title: '密钥套号', dataIndex: 'setNumber', key: 'setNumber', align: 'center',render: (text: any) => text || '--' },
    { title: '协同管理标志', dataIndex: 'managementFlag', key: 'managementFlag', align: 'center',render: (text: any) => text || '--' }
  ]

  const columns1: any = [
    {
      title: '序号', key: 'index', align: 'center', width: 80,
      render: (a: any, b: any, c: any) => {
        return <span>{c + 1}</span>;
      },
    },
    { title: '设备名称', dataIndex: 'deviceName', key: 'deviceName', align: 'center',render: (text: any) => text || '--' },
    { title: '管理实体标识', dataIndex: 'deviceEntityId', key: 'deviceEntityId', align: 'center',render: (text: any) => text || '--' },
    { title: '310标识', dataIndex: 'deviceMarkId', key: 'deviceMarkId', align: 'center',render: (text: any) => text || '--' },
    { title: 'IP地址', dataIndex: 'ip', key: 'ip', align: 'center',render: (text: any) => text || '--' },
    { title: '设备型号', dataIndex: 'deviceType', key: 'deviceType', align: 'center',render: (text: any) => text || '--' },
    { title: '应用系统', dataIndex: 'name', key: 'name', align: 'center',render: (text: any) => text || '--' },
    { title: '管理代理', dataIndex: 'name', key: 'name', align: 'center',render: (text: any) => text || '--' },
    { title: '设备状态', dataIndex: 'name', key: 'name', align: 'center',render: (text: any) => text || '--' },
    { title: '协同管理标志', dataIndex: 'name', key: 'name', align: 'center',render: (text: any) => text || '--' }
  ]

  const search = () => { }

  const submit = () => {
    if (selectedRowKeys.length == 0) {
      message.info('请选择设备！')
      return
    }
    secretInstallSearch({deviceId: selectedRowKeys[0]}).then((res) => {
      if (res?.result == "success") {
        setTableData(res.data[0])
        setVisibility(false)
        setSelectedRowKeys([])
      } else {
        message.error(res?.errorMsg);
      }
    })
  }

  const getDeviceHardPage = async () => {
    await deviceHardPage({ pageNumber: 1, pageSize: 200 }).then((res) => {
      if (res?.result == "success") {
        let data = res.data[0].list.filter((val: any) => { return val.delFlag == 0 })
        setTableData1([...data])
      } else {
        message.error(res?.errorMsg);
      }
    })
  }

  return (
    <div className={`${styles.params_warp}`}>
      <ButtonComp type={'special'} text={'密钥配置查询'} onClick={() => { }} />
      <ButtonComp style={{ margin: '20px 0 ' }} text={'选择设备'} onClick={ () => {
        setVisibility(true);
        getDeviceHardPage()
      }} />

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

      <Modal
        title="选择设备"
        open={visibility}
        centered
        width={1100}
        onCancel={() => setVisibility(false)}
        footer={null}>

        <div className='flex_aiC mb20 pt10'>
          <div className='mr16'>设备型号</div>
          <Select style={{ width: 120, marginRight: 20 }} value={queryParams.a} placeholder={'请选择设备型号'} onChange={(e) => { }} options={[{ label: '全部', value: '' }]} />

          <div className='mr16'>应用系统</div>
          <Select style={{ width: 120, marginRight: 20 }} value={queryParams.b} placeholder={'请选择应用系统'} onChange={(e) => { }} options={[{ label: '全部', value: '' }]} />

          <div className='mr16'>所属单位</div>
          <Select style={{ width: 120, marginRight: 20 }} value={queryParams.b} placeholder={'请选择所属单位'} onChange={(e) => { }} options={[{ label: '全部', value: '' }]} />

          <div className='mr16'>管理代理</div>
          <Select style={{ width: 120, marginRight: 20 }} value={queryParams.d} placeholder={'请选择管理代理'} onChange={(e) => { }} options={[{ label: '全部', value: '' }]} />

          <ButtonComp text={'查找'} onClick={() => search()} />
        </div>

        <Table
          scroll={tableData.length > 0 ? { y: 41 * 8 } : {}}
          pagination={false}
          bordered
          columns={columns1}
          dataSource={tableData1}
          rowKey={(record: any) => record?.id}
          rowClassName={rowClassName}
          rowSelection={tableData1.length > 0 ? {
            type: 'radio',
            selectedRowKeys,
            onChange: (selectedKeys: any) => {
              setSelectedRowKeys(selectedKeys);
            }
          } : null}
        />

        <div className='flex_jE mt20'>
          <ButtonComp style={{ marginRight: 20 }} text={'确定'} onClick={() => submit()} />
          <ButtonComp type='cancel' text={'取消'} onClick={() => setVisibility(false)} />
        </div>
      </Modal>
    </div>
  );
}