import ContentWarp from '@/components/ContentWarp';
import styles from '../../index.less';
import ButtonComp from '@/components/ButtonComp';
import { useEffect, useRef, useState } from 'react';
import { secretInit_getStatus } from '@/services/gql';
import { message } from 'antd';
import ClearInfoDialog from '@/components/ClearInfoDialog';
import SaveAs from '@/components/SaveAs';

// 网络MMJ管理 --> 状态查询
export default function Page() {
  const [lines, setLines] = useState<any>([]);
  const [currentLineIndex, setCurrentLineIndex] = useState(0);
  const [visibility, setVisibility] = useState<boolean>(false);
  const outputRef: any = useRef(null);

  useEffect(() => {
    const timer = setInterval(() => {
      if (currentLineIndex < lines.length) {
        setCurrentLineIndex((prevIndex) => prevIndex + 1);
      } else {
        clearInterval(timer);
      }
    }, 300);

    if (outputRef.current.scrollHeight > 330) {
      outputRef.current.scrollTop = outputRef.current.scrollHeight;
    }

    return () => {
      clearInterval(timer); // 组件卸载时清除定时器
    };
  }, [currentLineIndex, lines.length]);

  const statusQuery = () => {
    secretInit_getStatus({}).then((res) => {
      if (res?.result == "success") {
        let data = res?.data[0];
        setLines([
          ...lines,
          `算法参数--${data?.algorithmParam}`,
          `创建时间--${data?.createTime}`,
          `导入文件名--${data?.fileName}`,
          `未遥毙--${data?.mmjKill}`,
          `参数自检码--${data?.paramCode}`,
          `初装秘钥--${data?.passwordInit}`,
          `秘钥数据状态--${data?.secretDataStatus}`,
          `秘钥机未遥毙--${data?.secretKill}`,
          `秘钥未销毁--${data?.secretRain}`,
          `更新时间--${data?.updateTime}`,
        ])
      } else {
        setLines([`${res?.errorMsg}`])
      }
    })
  }

  return (
    <div className={styles.params_warp}>
      <ContentWarp text={'密码机状态'}>
        <div className='pd20'>隔离器所用密钥数据信息</div>
        <div className='line'></div>
        <div className='pd20 pb100'>
          <div ref={outputRef} className={styles.html_con}>
            <div id='messageInfo' style={{ padding: '0px 12px' }} key={currentLineIndex}>
              {lines.slice(0, currentLineIndex).map((line: string, index: number) => (
                <p key={index} style={{ paddingTop: index == 0 ? 20 : 10 }}>{line}</p>
              ))}
            </div>
          </div>
          <div className={styles.btn_warp}>
            <ButtonComp style={{ marginRight: 20 }} text={'状态查询'} onClick={() => { statusQuery() }} />
            <SaveAs style={{ marginRight: 20}} fileName='密码机状态' domId='messageInfo'/>
            <ButtonComp type={'cancel'} disabled={lines.length == 0} text={'清空信息'} onClick={() => setVisibility(true)} />
          </div>
        </div>
      </ContentWarp>

      <ClearInfoDialog
        visibility={visibility}
        onCancel={() => setVisibility(false)}
        onOk={() => {
          setLines([]);
          setCurrentLineIndex(0);
          setVisibility(false);
        }}>
        <div>确定清空信息吗？</div>
      </ClearInfoDialog>
    </div>
  );
}