import { FC, useEffect, useState } from 'react';
import styles from './index.less';
import { Input, Upload, UploadProps, message } from 'antd';
import ButtonComp from '@/components/ButtonComp';
import { college_table_query, deviceInit_init, deviceInstall_deviceInstall } from '@/services/api';
import { useParams } from 'umi';
import { fileStr, sysType } from '@/utils';

interface PageProps {
}

const DeviceInstall: FC<PageProps> = ({ }) => {
  const urlParams = useParams();
  const [dataLoading, setDataLoading] = useState(false);
  const [fileInfo, setFileInfo] = useState({
    "secret": "",
    "algorithm": "",
    "selfInspectionCode": "",
    "deviceName": "",
    "initNumber": "",
    "versionNumber": "",
    "localNum": "",
    "firmwareVersion": "",
    "deviceStatus": "",
    "fileName": null,
    "dataInstalled": null
  });

  useEffect(() => {
    let layoutInfo: any = localStorage.getItem('deviceInit');
    if (layoutInfo) {
      setFileInfo(JSON.parse(layoutInfo))
      setDataLoading(true);
    }
  }, [])


  const props: UploadProps = {
    maxCount: 1,
    beforeUpload: (file: any) => {
      let str = sysType[urlParams?.fileType] + fileStr[urlParams?.fileType]
      const formData = new FormData();
      formData.append('file', file);
      formData.append('sysType ', str);
      deviceInit_init(formData).then((res) => {
        if (res?.result == "success" && res?.data.length > 0) {
          message.success('数据加载成功')
          setFileInfo(res?.data[0]);
          localStorage.setItem('deviceInit', JSON.stringify(res?.data[0]));
          setDataLoading(true);
        } else {
          message.error(res?.errorMsg);
        }
      })
    }
  };

  return (
    <div className={styles.con_warp}>
      <div style={{ padding: 30 }}>
        <div className={styles.title1}>操作说明</div>
        <div className={styles.title2}>请选取初装数据文件夹下的任一文件进行数据加载。点击“数据安装”对密码机进行初装。</div>
        <div className={styles.flex}>
          <div>初装密钥</div>
          <Input placeholder="请输入初装密钥" value={fileInfo.secret} disabled={true} />
        </div>
        <div className={styles.flex}>
          <div>算法参数</div>
          <Input placeholder="请输入算法参数" value={fileInfo.algorithm} disabled={true} />
        </div>
        <div className={styles.flex}>
          <div>参数自检码</div>
          <Input placeholder="请输入参数自检码" value={fileInfo.selfInspectionCode} disabled={true} />
        </div>

        <div className='flex_jE' style={{ margin: '30px 0' }}>
          <Upload {...props} showUploadList={false}>
            <ButtonComp style={{ marginRight: 20 }} text={'数据加载'} />
          </Upload>
          <ButtonComp text={'数据安装'} onClick={() => {
            if (!dataLoading) {
              message.info('请先数据加载');
              return
            }

            deviceInstall_deviceInstall({}).then((res) => {
              if (res?.result == "success") {
                message.success('数据安装成功')
              } else {
                message.error(res?.errorMsg);
              }
            })
          }} />
        </div>

        <div className={styles.title1}>出装盘信息</div>
        <div className='mt30 mb30'>设备名称：{fileInfo.deviceName || '--'}</div>
        <div style={{ display: 'flex' }}>
          <div style={{ marginRight: 100 }}>初装盘号：{fileInfo.initNumber || '--'}</div>
          <div>版本号：{fileInfo.versionNumber || '--'}</div>
        </div>
      </div>
    </div>
  )
}

export default DeviceInstall