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

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

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

  let number = {
    title: '序号', key: 'index', align: 'center', width: 80,
    render: (a: any, b: any, c: any) => {
      return <span>{c + 1}</span>;
    },
  }

  const columns: any = [
    number,
    { title: '设备名称', dataIndex: 'name', key: 'name', align: 'center' },
    { title: '管理实体标识', dataIndex: 'name', key: 'name', align: 'center' },
    { title: '设备型号', dataIndex: 'name', key: 'name', align: 'center' }
  ]

  const columns1: any = [
    number,
    { title: '设备名称', dataIndex: 'name', key: 'name', 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 mt20'>
        <div className='mr16'>请选择源互通类型</div>
        <Select style={{ width: 260 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
      </div>

      <div className='flex_aiC mt20 mb20'>
        <ButtonComp text={'数据导入'} onClick={() => { }} />
      </div>

      <div className='flex_jB'>
        {/* 左侧 */}
        <div style={{ width: '43%' }}>
          <div className='mb20' style={{ color: '#0087DA' }}>目标设备信息列表</div>
          <Table
            scroll={tableData.length > 0 ? { y: 41 * 10 } : {}}
            pagination={false}
            bordered
            columns={columns}
            dataSource={tableData}
            rowKey={(record: any) => record?.id}
            rowClassName={rowClassName}
          />
        </div>
        {/* 中间 */}
        <div className={`${styles1.center_w} mb20`}>
          <div className={`${styles1.btn} ${tableData.length == 0 ? styles1.no_btn : ''}`} style={{ margin: 40 }}>
            <div className={styles1.sjx} />
          </div>
          <div className={`${styles1.btn} ${tableData1.length == 0 ? styles1.no_btn : ''}`}>
            <div className={`${styles1.sjx} ${styles1.sjx1}`} />
          </div>
        </div>
        {/* 底部 */}
        <div style={{ width: '43%' }}>
          <div className='mb20' style={{ color: '#0087DA' }}>已经配置的设备信息</div>
          <Table
            scroll={tableData1.length > 0 ? { y: 41 * 10 } : {}}
            pagination={false}
            bordered
            columns={columns1}
            dataSource={tableData1}
            rowKey={(record: any) => record?.id}
            rowClassName={rowClassName}
          />
        </div>
      </div>

      <div className='flex_jE' style={{ marginTop: 30 }}>
        <ButtonComp style={{ marginRight: 20 }} type={'cancel'} text={'取消'} onClick={() => { }} />
        <ButtonComp text={'保存'} onClick={() => { }} />
      </div>
    </div>
  );
}