web2468/src/widgets/WSaveAccount/index.jsx

import React, {useEffect, useState} from "react";
import Popup from "@components/Popup";
import styles from "./styles.module.scss";
import SvgIcon from "@components/SvgIcon";
import {CopyToClipboard} from "react-copy-to-clipboard";
import {toast} from "react-toastify";
import {stringFormat} from "@utils/helpers";
import html2canvas from "html2canvas";
import Fade from "@mui/material/Fade";
import Grow from "@mui/material/Grow";
import Modal from "@mui/material/Modal";
import {ReactComponent as CloseIcon} from "@assets/singlesvg/btnclose.svg";

const i18n=global.i18n;
const WSaveAccount = () => {
    const [isShow, setIsShow] = useState(false);
    const [account, setAccount] = useState("");
    const [password, setPassword] = useState("");
    const show=(info)=>{
        if (info.account!=null)setAccount(info.account);
        if (info.password!=null)setPassword(info.password);
        setIsShow(true);
    }
    const hide=()=>{
        setIsShow(false);
    }
    const handleScreenshot = () => {
        const style = document.createElement('style');
        document.head.appendChild(style);
        style.sheet?.insertRule('body > div:last-child img { display: inline-block; }');
        // 获取需要截图的元素
        const element = document.getElementById('saveAccount');

        // 使用 html2canvas 捕获元素并生成图片
        html2canvas(element,{
        }).then(canvas => {
            // 创建一个链接元素
            const link = document.createElement('a');
            link.href = canvas.toDataURL('image/png'); // 获取图片数据 URL
            link.download = 'accountInfo.png'; // 设置下载的文件名
            link.click(); // 触发下载
            toast.success(i18n.t("saveAccount.save_success"));
        });
    };
    useEffect(()=>{
        const saveAccount={
            show,
            hide
        };
        global.saveAccount=saveAccount;
        return ()=>{
        }
    },[])
    return (
        <Modal open={isShow} onClose={hide} closeAfterTransition>
            <Fade in={isShow} timeout={500}>
                <div className="popup-container">
                    <Grow in={isShow} timeout={500}>
                        <div id={"saveAccount"} className={`popup card card-padded`} style={{minHeight: 'unset'}}>
                            <button className="popup_close" onClick={hide} aria-label="Close popup">
                                {/*<i className="icon-xmark"/>*/}
                                <CloseIcon/>
                            </button>
                            <div className={styles.container}>
                                <span className={styles.title}>
                                    {i18n.t("saveAccount.title")}
                                </span>
                                <div className={styles.item_con}>
                                    <span className={styles.sub_title}>{i18n.t("saveAccount.account")}</span>
                                    <div className={"input-control"}>
                                        <div className={styles.item}>
                                            <span>{account}</span>
                                            <CopyToClipboard text={account} onCopy={() => {
                                                toast.success(i18n.t("copy_success"));
                                            }}>
                                                <button>
                                                    <SvgIcon className={styles.icon} herf={"icon_Copy"}></SvgIcon>
                                                </button>
                                            </CopyToClipboard>
                                        </div>
                                    </div>
                                </div>
                                <div className={styles.item_con}>
                                    <span className={styles.sub_title}>{i18n.t("saveAccount.password")}</span>
                                    <div className={"input-control"}>
                                        <div className={styles.item}>
                                            <span>{password}</span>
                                            <CopyToClipboard text={password} onCopy={() => {
                                                toast.success(i18n.t("copy_success"));
                                            }}>
                                                <button>
                                                    <SvgIcon className={styles.icon} herf={"icon_Copy"}></SvgIcon>
                                                </button>
                                            </CopyToClipboard>
                                        </div>
                                    </div>
                                </div>
                                <button className={"button-green"} onClick={() => {
                                    handleScreenshot();
                                }}>{i18n.t("saveAccount.title")}</button>
                                <span className={styles.tips}>{i18n.t("saveAccount.tips")}</span>
                            </div>
                        </div>
                    </Grow>
                </div>
            </Fade>
        </Modal>
    )
}
export default WSaveAccount;