import ContentWarp from '@/components/ContentWarp';
import styles from '../../index.less';
import styles1 from './index.less';
import { Form, Input, Upload, UploadProps, message } from 'antd';
import ButtonComp from '@/components/ButtonComp';
import { secretInit_cleanInfo, secretInit_loadData, secretInit_sendData } from '@/services/gql';
import { useEffect, useState, } from 'react';
import ClearInfoDialog from '@/components/ClearInfoDialog';
import { useParams } from 'umi';

// 网络MMJ管理 --> MMJ初装
export default function Page() {
  const [dataLoading, setDataLoading] = useState(false);
  const [form] = Form.useForm();
  const [visibility, setVisibility] = useState<boolean>(false);
  const urlParams = useParams();
  let sysInfo = localStorage.getItem(`${urlParams?.fileType}`);
  let info = sysInfo ? JSON.parse(sysInfo) : null;

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

  useEffect(() => {
    if (info) {
      form.setFieldsValue({ ...info?.MMJInit })
      setDataLoading(true);
    }
  }, [])

  const props: UploadProps = {
    maxCount: 1,
    beforeUpload: (file: any) => {
      const formData = new FormData();
      formData.append('file', file);
      secretInit_loadData(formData).then((res) => {
        if (res?.result == "success" && res?.data.length > 0) {
          message.success('加载数据成功');
          form.setFieldsValue({ ...res?.data[0] })
          localStorage.setItem(`${urlParams?.fileType}`, JSON.stringify({ ...info, MMJInit: res?.data[0] }))
          setDataLoading(true);
        } else {
          message.error(res?.errorMsg);
        }
      })
    }
  };

  const goData = () => {
    if (!dataLoading) {
      message.info('请先加载数据');
      return
    }
    secretInit_sendData({}).then((res) => {
      if (res?.result == "success") {
        message.success('发送数据成功');
      } else {
        message.error(res?.errorMsg);
      }
    })
  }

  const clearInfo = () => {
    secretInit_cleanInfo({}).then((res) => {
      if (res?.result == "success") {
        message.success('清空信息成功');
        form.resetFields()
        localStorage.removeItem('MMJInit');
      } else {
        message.error(res?.errorMsg);
      }
    })
  }

  return (
    <div className={`${styles.params_warp} ${styles1.params_warp1}`}>
      <ContentWarp text={'密码机初装'}>
        <div className='pd20'>发送密码机初装数据到被控端设备</div>
        <div className='line'></div>
        <div className='pd20 pb100'>
          <Form
            form={form}
            onFinish={onFinish}
          >
            <Form.Item
              name="passwordInit"
              label="初装密钥"
            // rules={[
            //   { required: true, message: '请输入初装密钥' },
            // ]}
            >
              <Input placeholder="请输入初装密钥" style={{ width: '560px' }} disabled={true} />
            </Form.Item>
            <Form.Item
              name="algorithmParam"
              label="算法参数"
            // rules={[
            //   { required: true, message: '请输入算法参数' },
            // ]}
            >
              <Input placeholder="请输入算法参数" style={{ width: '560px' }} disabled={true} />
            </Form.Item>
            <Form.Item
              name="paramCode"
              label="参数自检码"
            // rules={[
            //   { required: true, message: '请输入参数自检码' },
            // ]}
            >
              <Input placeholder="请输入参数自检码" style={{ width: '560px' }} disabled={true} />
            </Form.Item>
          </Form>
          <div className={styles.btn_warp}>
            <Upload {...props} showUploadList={false}>
              <ButtonComp style={{ marginRight: 20 }} text={'加载数据'} />
            </Upload>
            <ButtonComp style={{ marginRight: 20 }} type={'cancel'} text={'发送数据'} onClick={() => {
              goData()
            }} />
            <ButtonComp type={'cancel'} text={'清空信息'} onClick={() => setVisibility(true)} />
          </div>
        </div>
      </ContentWarp>

      <ClearInfoDialog
        visibility={visibility}
        onCancel={() => setVisibility(false)}
        onOk={() => {
          clearInfo()
          setVisibility(false)
        }}>
        <div>确定清空信息吗？</div>
      </ClearInfoDialog>
    </div>
  );
}
