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

interface PageProps {
  open: boolean;
  onCancel: () => void;
}

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

  const urlParams = useParams();

  // 监听是否到安装进度条步骤
  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 installSuccess = async () => {
      try {
        const response = await fetch('http://localhost:3000/createShortcut', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          mode: "cors",
          body: JSON.stringify({
            folderPath: `C:/Users/lyc/Desktop/${countType[urlParams?.fileType]}`,
            shortcutName: '专用核心密码综合管理系统',
            shortcutURL: `http://localhost:8000/initialSystem/${urlParams?.fileType}`
          }),
        });
        const data = await response.text();
        message.success(data)

        // 储存信息
        let installExe: any = localStorage.getItem('installExe')
        let obj = JSON.parse(installExe);
        obj[9].select = true;
        localStorage.setItem('installExe', JSON.stringify(obj));

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

  return <>
    {
      // open && <div>

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

          <div className={styles.title}>核心区 安装程序</div>
          <div>核心区安装程序</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 CoreArea;
