import React from "react";
import md5 from "md5";
import style from "./index.css";
//加密解密
const jjm = (v,type) =>{
    const m = location.hash.split("/")[1]+type,
    md5m = md5(m);
    try {
        if(v === "__clera"){
            return window.sessionStorage.removeItem(md5m);
        }else if(v){
            return window.sessionStorage[md5m] = encodeURIComponent(window.btoa(v+m));
        }else{
            return window.atob(decodeURIComponent(window.sessionStorage[md5m])).split(m)[0];
        }
    } catch (error) {
        return "";
    }
    
}
//提示框
let div = null,time = null;
const msg = msg =>{
    div && div.remove();
    clearTimeout(time);
    div = document.createElement("div");
    div.innerText = msg;
    div.style["position"]="fixed";
    div.style["top"]= "10%";
    div.style["left"]= "50%";
    div.style["transform"]= "translateX(-50%)";
    div.style["color"]= "#fff";
    div.style["z-index"]= "99999";
    div.style["font-size"]= "14px";
    div.style["border"]= "1px solid #00508e";
    div.style["padding"]= "1em 2em";
    div.style["border-radius"]= ".5em";
    div.style["transition"]= "all 500ms";
    div.style["background"]= "rgba(0,0,0,.2)";
    div.style["box-shadow"]= "1px 1px 10px 0 rgba(255,255,255,.1)";
    div.style["opacity"] = 1;
    document.body.appendChild(div);
    time = setTimeout(()=>{
        div.style["opacity"] = 0;
        div.style["top"] = 0;
        setTimeout(()=>{
            div.remove();
        },500)
    },1000);
}
const Prompt = props =>{
    const {onResponse = ()=>{
        console.log("没有绑定响应函数");
    },data:{title,url,type},hideCancel} = props;
    let pwd = "";
    const siss = jjm(false,type);
    //onSubmit
    const onSubmit = e =>{
        if(e){
            siss || msg("正在验证……");
            //口令验证
            fetch(url,{
                method:"POST",
                headers: {
                    'Content-Type': 'application/json',
                },
                body:JSON.stringify({
                    pwdType:type,
                    pwd:e
                })
            }).then(res=>res.json()).then(res=>{
                const {retHead = {}} = res,
                {errCode = 1,errMsg} = retHead;
                if(errCode != 0){
                    //口令错误
                    jjm("__clera",type);
                    siss?msg("口令过期,请重试!"):msg(errMsg);
                }else{
                    jjm(pwd,type);
                    onResponse(false);
                    siss || msg("验证成功!");
                }
            });
        }
    }
    const onKey = e =>{
        event.keyCode==13 && onSubmit(pwd);
    }
    const change = e =>{
        e.target.onkeydown = onKey;
        pwd=e.target.value;
    }
    siss && onSubmit(siss);
    return(
        <div className={style.promptBox}>
            <div className={style.formBox}>
                <h2>{title}</h2>
                <div className={style.inputBox}>
                    <h4>口令：</h4>
                    <input type="password" onChange={change} placeholder="请输入口令"></input>
                </div>
                <div className={style.inputBox}>
                    <span onClick={e=>onSubmit(pwd)}>提交</span>
                    {!hideCancel && <span onClick={e=>onResponse("qux")}>取消</span>}
                </div>
            </div>
        </div>
    );
}
export {
    Prompt
}