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

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

export default function Page() {
  const [activeTab, setActiveTab] = useState(1)
  const [tableData, setTableData] = useState([]);
  const [htmlText, setHtmlText] = useState('<div>文本内容</div>')

  const columns: any = [
    { title: '设备名称', dataIndex: 'name', key: 'name', align: 'center' },
    { title: '', align: 'center' },
  ]

  return (
    <div className={`${styles.params_warp}`}>
      <TabsComp
        dataSource={[{ id: 1, name: '应用系统配置' }]}
        activeTab={activeTab}
        onChange={(e) => setActiveTab(e)} />

      <div>从设备列表中选择设备，将其拖动到相应的应用系统节点下；或者选择应用系统节点下的设备，将其拖动到其它应用系统节点下。</div>
      <div className='flex_aiC mt30 mb30'>
        <div style={{ marginRight: 12 }}>所属网络</div>
        <Select style={{ width: 200, marginRight: 20 }} placeholder="请选择所属网络" onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
      </div>

      <div className='flex_jB'>
        <div style={{ width: 'calc(50% - 20px)' }}>
          <ButtonComp type={'special'} text={'应用系统'} onClick={() => { }} />
          <div className={styles.html_con}>
            <div style={{ padding: '20px 12px' }} dangerouslySetInnerHTML={{ __html: htmlText }}></div>
          </div>
          <div className='flex_jE mt20'>
            <ButtonComp style={{ marginRight: 20 }} type={'cancel'} text={'发布'} onClick={() => { }} />
            <ButtonComp style={{ marginRight: 20 }} type={'cancel'} text={'新建'} onClick={() => { }} />
            <ButtonComp style={{ marginRight: 20 }} type={'cancel'} text={'重命名'} onClick={() => { }} />
            <ButtonComp style={{ marginRight: 20 }} type={'delete'} text={'删除'} onClick={() => { }} />
            <ButtonComp type={'cancel'} text={'批量撤销'} onClick={() => { }} />
          </div>
        </div>
        <div style={{ width: '50%' }}>
          <ButtonComp type={'special'} text={'设备列表'} onClick={() => { }} />
          <Table
            scroll={tableData.length > 0 ? { y: 41 * 14 } : {}}
            pagination={false}
            bordered
            columns={columns}
            dataSource={tableData}
            rowKey={(record: any) => record?.id}
            rowClassName={rowClassName}
          />
        </div>
      </div>
    </div>
  );
}