import TabsComp from '@/components/TabsComp';
import styles from '../../../GLQ/index.less';
import { useState } from 'react';
import { ConfigProvider, Form, Radio, Select, Table } 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 columns: any = [
    { title: '产品名称', dataIndex: 'productName', key: 'productName', align: 'center' },
    { title: '产品编号', dataIndex: 'productNum', key: 'productNum', align: 'center' },
    { title: '来源', dataIndex: 'orderDirection', key: 'orderDirection', align: 'center' },
    { title: '操作员', dataIndex: 'name', key: 'name', align: 'center' },
    { title: '导入时间', dataIndex: 'importTime', key: 'importTime', align: 'center' },,
    { title: '是否制作接', dataIndex: 'name', key: 'name', align: 'center' },
    { title: '发来单位', dataIndex: 'name', key: 'name', align: 'center' }
  ]

  const columns1: 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' },
    { title: '导入时间', dataIndex: 'importTime', key: 'importTime', align: 'center' },,
    { title: '备注', dataIndex: 'name', key: 'name', align: 'center' }
  ]

  const [form] = Form.useForm();
  const formItemSty = { width: 'auto', marginBottom: 20, marginRight: 30 };

  const onFinish = (values: any) => {
    console.log('表单提交:', values);
  };

  return (
    <div className={`${styles.params_warp}`}>
      <TabsComp
        dataSource={[{ id: 1, name: '密钥体接收情况单' }]}
        activeTab={activeTab}
        onChange={(e) => setActiveTab(e)} />

      <div className='mb20 flex_aiC_jB'>
        <Radio.Group>
          <Radio value="1" style={{ marginRight: 100 }}> 申请新密钥体 </Radio>
          <Radio value="2"> 申请旧密钥体 </Radio>
        </Radio.Group>
        <div>单号：xxxxxxx</div>
      </div>

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

      <div className='flex_jE mt20 mb20'>
        <ButtonComp text={'添加'} onClick={() => { }} />
      </div>

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

      <Form form={form} layout={'inline'} onFinish={onFinish} className='mt20' style={{ position: 'relative' }}>
        <Form.Item name="aaa" label="密钥种类" style={formItemSty}>
          <Select style={{ width: 260 }} placeholder="请选择密钥种类" onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
        </Form.Item>
        <Form.Item name="aaa" label="产品名称" style={formItemSty}>
          <Select style={{ width: 260 }} placeholder="请选择产品名称" onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
        </Form.Item>
        <Form.Item name="aaa" label="产品编号" style={formItemSty}>
          <Select style={{ width: 260 }} placeholder="请选择产品编号" onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
        </Form.Item>
        <Form.Item name="aaa" label="申请类型" style={formItemSty}>
          <Select style={{ width: 260 }} placeholder="请选择申请类型" onChange={(e) => { }} options={[{ label: '选项1', value: 1 }]} />
        </Form.Item>

        <div style={{ position: 'absolute', right: 0, bottom: '20px' }}>
          <ButtonComp text={'查询'} onClick={() => { }} />
        </div>
      </Form>

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

      <div className='flex_jE mt20'>
        <ButtonComp style={{ marginRight: 20 }} type={'cancel'} text={'移出'} onClick={() => form.submit()} />
        <ButtonComp style={{ marginRight: 20 }} type={'cancel'} text={'制作'} onClick={() => form.submit()} />
        <ButtonComp style={{ marginRight: 20 }} type={'cancel'} text={'预览'} onClick={() => form.submit()} />
        <ButtonComp type={'cancel'} text={'打印'} onClick={() => form.submit()} />
      </div>
    </div>
  );
}