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 };

  useEffect(() => {
    form.setFieldsValue({
      carrierType: 1,
      carrierModel: 1,
      filePath: '',
    })
  }, [])

  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' style={{ paddingBottom: 30 }}>
          <Form form={form} layout={'inline'} onFinish={onFinish} className='mt20'>
            <Form.Item name="carrierType" label="载体类型" style={formItemSty} rules={[{ required: true, message: '请选择载体类型' }]}>
              <Select style={{ width: 260 }} placeholder="请选择载体类型" onChange={(e) => { }} options={[
                { label: '软盘', value: 1 },
                { label: '移动盘', value: 2 },
                { label: '光盘', value: 3 },
              ]} />
            </Form.Item>
            <Form.Item name="carrierModel" 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>

          <div className='flex_jE mb20'>
            <ButtonComp text={'包封'} onClick={() => form.submit()} />
          </div>

          <ContentWarp text={'包封结果'}>
            <div className='pd20'>
              <div className='flex_aiC'>
                <div style={{ marginRight: 30 }}>产品名称</div>
                <Input placeholder="请输入产品名称" style={{ width: 260 }} disabled={true} />

                <div className='ml20' style={{ marginRight: 30 }}>产品编号</div>
                <Input placeholder="请输入产品编号" style={{ width: 260 }} disabled={true} />
              </div>

              <div className='flex_aiC mt20'>
                <div className='mr16' >发起者标识</div>
                <Input placeholder="请输入发起者标识" style={{ width: 260 }} disabled={true} />

                <div className='mr16 ml20' >接受者标识</div>
                <Input placeholder="请输入接受者标识" style={{ width: 260 }} disabled={true} />
              </div>
            </div>
          </ContentWarp>
        </div>
      </ContentWarp>
    </div>
  );
}