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

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

const GBase: FC<PageProps> = ({
  open = false,
  onCancel,
  setInstallExe
}) => {
  const urlParams = useParams();
  const [active, setActive] = useState(1);
  const [password, setPassword] = useState('');
  const [confirmPassword, setConfirmPassword] = useState('');
  const [percentVal, setPercentVal] = useState(0);

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

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

  const verifyPassword = () => {
    if (password.trim().length == 0 || confirmPassword.trim().length == 0) {
      message.error('请输入密码！')
      return true;
    }

    if (password != confirmPassword) {
      message.error('两次输入的密码不相同！');
      return true;
    }
  }

  const setGBasePassword = () => {
    let sysName = localStorage.getItem(`${urlParams?.fileType}`);
    if (sysName) {
      let info = JSON.parse(sysName);
      info.GBasePassword = password;
      localStorage.setItem(`${urlParams?.fileType}`, JSON.stringify(info));
    }
  }

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

          {active == 1 && <div className={styles.a1} onClick={() => setValue()}></div>}
          {(active > 1 && active != 11) && <div className={styles.a2} onClick={() => {
            if (active == 8 && verifyPassword()) return;
            if (active == 12) { 
              installSuccess(); 
              setGBasePassword();
              return 
            }
            setValue()
          }}></div>}

          {/* 定位元素 */}
          {active == 3 && <div>
            <div className={styles.dian}></div>
            <div className={`${styles.dian} ${styles.dian1}`}></div>
            <div className={styles.last}>下一步(N)</div>
          </div>}

          {active == 8 && <div>
            <Input value={password} onChange={(e) => { setPassword(e.target.value) }} className={styles.input1} />
            <Input value={confirmPassword} onChange={(e) => { setConfirmPassword(e.target.value) }} className={styles.input2} />
          </div>}

          {active == 11 && <div className={styles.progress}>
            <Progress percent={percentVal} steps={41} size={[9, 19]} strokeColor={'rgb(56, 158, 13)'} trailColor={'rgba(0,0,0,0)'} showInfo={false} />
          </div>}


          <div className={styles.gbase_close} onClick={() => onCancel('GBase')}></div>
        </div>
      </div>
    }
  </>
};

export default GBase;
