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, sysTypeStr } from '@/utils/sysType';

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

  let sysInfo = localStorage.getItem(`${urlParams?.fileType}`);
  let info = sysInfo ? JSON.parse(sysInfo) : null;

  useEffect(() => {
    if (info?.deviceInit?.data) {
      setFileInfo(info?.deviceInit?.data)
      setDataLoading(true);
    }
  }, [])


  const props: UploadProps = {
    maxCount: 1,
    beforeUpload: (file: any) => {
      let str: string = sysType[urlParams?.fileType] + fileStr[urlParams?.fileType]
      const formData = new FormData();
      formData.append('file', file);
      formData.append('sysType ', sysTypeStr[str]);
      deviceInit_init(formData).then((res) => {
        if (res?.result == "success" && res?.data.length > 0) {
          message.success('数据加载成功')
          setFileInfo(res?.data[0]);
          localStorage.setItem(`${urlParams?.fileType}`, JSON.stringify({ ...info, deviceInit: {data: res?.data[0], install: false} }));
          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('数据安装成功')
                info.deviceInit.install = true
                localStorage.setItem(`${urlParams?.fileType}`, JSON.stringify({ ...info}));
              } 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