import React, { FC, useEffect, useState } from 'react';
import styles from './index.less';
import { Input, Progress, message } from 'antd';
import { countType } from '@/utils/sysType';
import { useParams } from 'umi';
import DEV from '@/utils/env/dev';

interface PageProps {
  open: boolean;
  onCancel: (name?: string) => void;
  setInstallExe: (index: number, text: string) => void;
}

const CodeManage: FC<PageProps> = ({
  open = false,
  onCancel,
  setInstallExe
}) => {
  const [active, setActive] = useState(1);
  const [percentVal, setPercentVal] = useState(0);

  const urlParams = useParams();

  useEffect(() => {
    if (open) setActive(1)
  }, [open])

  // 监听是否到安装进度条步骤
  useEffect(() => {
    if (active == 3) {
      const interval = setInterval(() => {
        setPercentVal((val) => {
          const randomStep = Math.round(Math.random() * (100 / 10));
          const newPercent = val + randomStep;

          if (newPercent >= 100) {
            clearInterval(interval);
            setValue()
            return 100;
          }

          return newPercent;
        });
      }, 500);

      return () => clearInterval(interval);
    }
  }, [active])

  // 设置安装步骤进度
  const setValue = () => {
    setActive((e) => { return e + 1 })
  }

  const getName = () => {
    return urlParams?.fileType == 'offLine' ? '离线版' : '在线版'
  }

  // 在指定的目录下安装快捷方式
  const installSuccess = async () => {
    try {
      const response = await fetch('http://127.0.0.1:8081/createShortcut', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        mode: "cors",
        body: JSON.stringify({
          folderPath: `${DEV.FILE_URL}/${getName()}/${countType[urlParams?.fileType]}`,
          shortcutName: '专用核心密码综合管理系统',
          shortcutURL: `${DEV.LOCAL_URL}/initialSystem/${urlParams?.fileType}`
        }),
      });
      const data = await response.text();
      setInstallExe(13, data)

      onCancel()
    } catch (error) {
      message.error(error); // 处理请求错误
    }
  }

  return <>
    {
      open &&
      <div className={styles.modalOverlay}>
        <div className={styles.modal} style={{ width: 500, height: 460 }}>
          <img src={require(`../../../assets/images/codemanage/${active}.png`)} width={500} height={460} />

          <div className={styles.close} onClick={()=>{
            onCancel('一体化密码机管理软件')
            }}></div>

          {[1, 2].includes(active) && <div className={styles.title}>一体化密码机管理软件 安装程序</div>}
          {![1, 2].includes(active) && <div className={styles.title1}>一体化密码机管理软件 安装程序</div>}
          {active == 1 && <div className={styles.pic1}>一体化密码机管理软件安装程序</div>}
          {active == 2 && <div className={styles.pic1} style={{ top: 166, left: 85 }}>一体化密码机管理软件</div>}
          {active == 4 && <div className={styles.pic1} style={{ top: 123, left: 85 }}>一体化密码机管理软件</div>}

          {[1, 2].includes(active) && <div
            className={styles.net}
            onClick={() => setValue()}>
          </div>}

          {active == 3 && <div className={styles.progress} style={{ background: '#fff', height: 15, width: 375, bottom: 222, left: 33, }}>
            <Progress percent={percentVal} steps={42} size={[7, 14]} strokeColor={'rgb(56, 158, 13)'} trailColor={'rgba(0,0,0,0)'} showInfo={false} />
          </div>}

          {active == 4 && <div
            className={styles.net}
            style={{ bottom: 17, right: 27 }}
            onClick={() => installSuccess()}>
          </div>}
        </div>
      </div>
    }
  </>
};

export default CodeManage;
