import TabsComp from '@/components/TabsComp';
import styles from '../../../GLQ/index.less';
import { useState } from 'react';
import { ConfigProvider, Form, Input, Radio, Select, Table } from 'antd';
import { tableTheme } from '@/utils/theme';
import { rowClassName } from '@/utils';
import ButtonComp from '@/components/ButtonComp';

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


  return (
    <div className={`${styles.params_warp}`}>
      <TabsComp
        dataSource={[{ id: 1, name: '密钥配发三联单' }]}
        activeTab={activeTab}
        onChange={(e) => setActiveTab(e)} />

      <div className='flex_aC mb20' >
        <div style={{ marginRight: 12 }}>发往单位</div>
        <Select style={{ width: 260 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
      </div>

      <div className='mb20' style={{ height: 1, background: '#EDEDED' }}></div>

      <div className='mb20 flex_aC' >
        <div style={{ marginRight: 12 }}>单号</div>
        <Select style={{ width: 260, marginRight: 20 }} onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
        <ButtonComp text={'查询'} onClick={() => { }} />
      </div>

      <div className='flex_aC_jS mb20 mt20'>
        <div>发往单位： --</div>
        <div>单号：--</div>
      </div>

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

      <div className='mb20 mt20 flex_aC' >
        <div style={{ marginRight: 12 }}>配发人</div>
        <Input style={{ width: 260, marginRight: 50 }} />
        <div>配发时间：--</div>
      </div>

      <div className='flex_aC_jS mt20'>
        <ButtonComp text={'添加'} onClick={() => { }} />
        <div className='flex_jE'>
          <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 type={'cancel'} text={'打印'} onClick={() => { }} />
        </div>
      </div>
    </div>
  );
}