import ContentWarp from '@/components/ContentWarp';
import styles from '../../../GLQ/index.less';
import { Form, Input, Select, Upload, UploadProps } from 'antd';
import ButtonComp from '@/components/ButtonComp';
import { useEffect } from 'react';

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

  const typeList = [
    { label: '软盘', value: 1 },
    { label: '移动盘', value: 2 },
    { label: 'IC卡', value: 3 },
    { label: '光盘', value: 4 },
    { label: '芯片', value: 5 },
    { label: '密钥枪', value: 6 },
    { label: 'iButton', value: 7 },
    { label: '密码注入器', value: 8 }
  ]

  useEffect(() => {
    form.setFieldsValue(() => {

    })
  }, [])

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

  const props: UploadProps = {
    maxCount: 1,
    beforeUpload: (file: any) => {
      console.log('file', file);
    }
  };

  return (
    <div className={styles.params_warp}>
      <ContentWarp text={'明文密钥体载体包封'}>
        <div className='pd20 pb100'>
          <Form form={form} layout={'inline'} onFinish={onFinish} className='mt20'>
            <Form.Item name="aaa" label="产品名称" style={formItemSty} rules={[{ required: true, message: '请输入产品名称' }]}>
              <Input placeholder="请输入产品名称" style={{ width: 260 }} />
            </Form.Item>
            <Form.Item name="aaa" label="产品编号" style={formItemSty} rules={[{ required: true, message: '请输入产品编号' }]}>
              <Input placeholder="请输入产品编号" style={{ width: 260 }} />
            </Form.Item>
            <Form.Item name="aaa" label="载体编号" style={formItemSty} rules={[{ required: true, message: '请选输入载体编号' }]}>
              <Input placeholder="请输入载体编号" style={{ width: 260 }} />
            </Form.Item>
            <Form.Item name="aaa" label="载体类型" style={formItemSty} rules={[{ required: true, message: '请选择载体类型' }]}>
              <Select style={{ width: 260 }} placeholder="请选择载体类型" onChange={(e) => { }} options={typeList} />
            </Form.Item>
            <Form.Item name="aaa" label="载体型号" style={formItemSty} rules={[{ required: true, message: '请选择载体型号' }]}>
              <Select style={{ width: 260 }} placeholder="请选择载体型号" onChange={(e) => { }} options={[{ label: '三寸', value: 1 }]} />
            </Form.Item>
            <Form.Item name="filePath" label="文件路径" style={{ width: '80%', marginBottom: 20 }} rules={[{ required: true, message: '请选择文件路径' }]}>
              <div style={{ display: 'flex' }}>
                <Input style={{ width: 480 }} disabled={true} />
                <Upload {...props} showUploadList={false}>
                  <ButtonComp style={{ marginLeft: 20 }} type={'cancel'} text={'选择'} onClick={() => { }} />
                </Upload>
              </div>
            </Form.Item>
            <Form.Item name="aaa" label="载体位置" style={formItemSty} rules={[{ required: true, message: '请选择载体位置' }]}>
              <Select style={{ width: 260 }} placeholder="请选择载体位置" onChange={(e) => { }} options={[
                { label: '1', value: 1 },
                { label: '2', value: 2 }
              ]} />
            </Form.Item>
          </Form>
          <div className={styles.btn_warp}>
            <ButtonComp text={'包封'} onClick={() => form.submit()} />
          </div>
        </div>
      </ContentWarp>
    </div>
  );
}