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

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

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

  // 监听是否到安装进度条步骤
  useEffect(() => {
    if (active == 6) {
      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 = () => {
    setInstallExe(3, 'MSXML安装成功！')
    onCancel()
  }

  return <>
    {
      open &&
      <div className={styles.modalOverlay}>
        <div className={styles.modal}>
          <img src={require(`../../../assets/images/MSXML/${active}.jpg`)} width={689} height={508} />

          {![6, 7].includes(active)  && <div 
            className={styles.msx1} 
            style={active == 5 ? {width: 140, right: 170} : {}} 
            onClick={() => setValue()}>
          </div>}

          {active == 6 && <div className={styles.progress} style={{width: 482, bottom: 257, left: 59,}}>
            <Progress percent={percentVal} steps={44} size={[9, 19]} strokeColor={'rgb(56, 158, 13)'} trailColor={'rgba(0,0,0,0)'} showInfo={false} />
          </div>}
          
          {active == 7  && <div 
            className={styles.msx1} 
            style={{right: 105}}
            onClick={() => installSuccess()}>
          </div>}
        </div>
      </div>
    }
  </>
};

export default MSXML;