import TabsComp from '@/components/TabsComp';
import styles from '../../../GLQ/index.less';
import { useState } from 'react';
import { ConfigProvider, Form, 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 [form] = Form.useForm();

  const columns: any = [
    {title: '序号',
      key: 'index',
      align: 'center',
      width: 100,
      render: (text: any, record: any, index: any) => {
        return <span>{index + 1}</span>;
      },
    },
    {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: 'name',  key: 'name', align: 'center' }
  ]

  const formItemSty = { width: '32%',  marginBottom: 20 };

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

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

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

      <div className='flex_jE' style={{ marginBottom: 30 }}>
        <ButtonComp style={{ marginRight: 20 }} type={'cancel'} text={'导入'} onClick={() => { }} />
        <ButtonComp text={'查询'} onClick={() => form.submit()} />
      </div>

      <div className='mb20 flex_aC_jS'>
        <div>密钥体列表</div>
        <ButtonComp type={'cancel'} text={'全部'} onClick={() => { }} />
      </div>

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