//一、定义了一个获取元素的方法
function getEle(selector) {
    return document.querySelector(selector);
}

//二、获取到需要用到的DOM元素
let box = getEle("#box"),//容器
    bgColor = getEle(".bgColor"),//背景色
    txt = getEle(".txt"),//文本
    slider = getEle(".slider"),//滑块
    icon = getEle(".slider>i"),
    successMoveDistance = box.offsetWidth - slider.offsetWidth,//解锁需要滑动的距离
    downX,//用于存放鼠标按下时的位置
    isSuccess = false;//是否解锁成功的标志，默认不成功

//三、给滑块添加鼠标按下事件
slider.onmousedown = mousedownHandler;
slider.addEventListener('touchstart', mousedownHandler, false);

slider.addEventListener("touchmove", mousemoveHandler, false);

slider.addEventListener("touchend", mouseupHandler, false);

//3.1鼠标按下事件的方法实现
function mousedownHandler(e) {
    bgColor.style.transition = "";
    slider.style.transition = "";
    var e = e || window.event || e.which;
    downX = e.type === "touchstart" ? e.touches[0].clientX : e.clientX;
    //在鼠标按下时，分别给鼠标添加移动和松开事件
    document.onmousemove = mousemoveHandler;
    document.onmouseup = mouseupHandler;
};

//四、定义一个获取鼠标当前需要移动多少距离的方法
function getOffsetX(offset, min, max) {
    if (offset < min) {
        offset = min;
    } else if (offset > max) {
        offset = max;
    }
    return offset;
}

//3.1.1鼠标移动事件的方法实现
function mousemoveHandler(e) {

    var e = e || window.event || e.which;
    var moveX = e.type === "touchmove" ? e.touches[0].clientX : e.clientX;
    var offsetX = getOffsetX(moveX - downX, 0, successMoveDistance);
    bgColor.style.width = offsetX + "px";
    slider.style.left = offsetX + "px";

    if (offsetX === successMoveDistance) {
        slider.onmousedown = null;
        document.onmousemove = null;
        if (!isSuccess) {
            success();
        }
    }
    //如果不设置滑块滑动时会出现问题（目前还不知道为什么）
    e.preventDefault();
};

//3.1.2鼠标松开事件的方法实现
function mouseupHandler(e) {
    if (!isSuccess) {
        bgColor.style.width = 0 + "px";
        slider.style.left = 0 + "px";
        bgColor.style.transition = "width 0.8s linear";
        slider.style.transition = "left 0.8s linear";
        icon.innerHTML = "&#xe74c;";
        icon.className = "iconfont icon-double-right";
        slider.className = "slider";
        slider.onmousedown = mousedownHandler;
    }

    document.onmousemove = null;
    document.onmouseup = null;
};

//五、定义一个滑块解锁成功的方法
function success() {

    const username = $.trim($("#usernameinput_mobile").val());
    $("#divMsg").css("color", "red");
    if (username.length === 0 || username === "") {
        divMsg.innerHTML = '<font class="tips_false" i18n="account.null">' + $.i18n.prop("account.null") + '</font>';
        return false;
    } else {
        isSuccess = true;
        bgColor.style.backgroundColor = "lightgreen";
        slider.className = "slider active";
        icon.innerHTML = "&#xe8ad;";
        icon.className = "iconfont icon-xuanzhong";
        txt.innerHTML = $.i18n.prop("verifying");
        divMsg.innerHTML = "";
        $.ajax({
            url: 'retrieve.do?method=sendPhoneMessage',
            data: {
                username: username,
            },
            type: 'post',
            dataType: 'json',
            async: true,
            success: function (obj) {
                console.log(obj)
                const data = JSON.parse(obj);
                if (data.result === "SUCCESS") {
                    let time = 60;
                    const interval = setInterval(function () {
                        if (time <= 0) {
                            clearInterval(interval);
                            txt.innerHTML = $.i18n.prop("verify.get");
                            isSuccess = false;
                            mouseupHandler();
                            return false;
                        } else {
                            time = time - 1;
                            txt.innerHTML = $.i18n.prop("reacquire") + '(' + time + ')';
                            return false;
                        }
                    }, 1000);

                    $('#username_mobile').val(data.uid);
                    $("#divMsg").css("color", "green");
                    divMsg.innerHTML = '<font class="tips_false" i18n="phone.send1">' + $.i18n.prop("phone.send1") + '</font>'
                        + '<font class="tips_false">&nbsp;' + data.mobile + '&nbsp;</font>'
                        + '<font class="tips_false" i18n="phone.send2">' + $.i18n.prop("phone.send2") + '</font>';
                } else {
                    isSuccess = false;
                    txt.innerHTML = $.i18n.prop("verify.get");
                    mouseupHandler();
                    $("#divMsg").css("color", "red");
                    if (data.result == "Mobile_None") {
                        divMsg.innerHTML = '<font class="tips_false" i18n="nophone">' + $.i18n.prop("nophone") + '</font>';
                        return false;
                    } else if (data.result == "Mobile_Error") {
                        divMsg.innerHTML = '<font class="tips_false" i18n="phone.error">' + $.i18n.prop("phone.error") + '</font>';
                        return false;
                    } else if (data.result == "Uid_None") {
                        divMsg.innerHTML = '<font class="tips_false" i18n="user.not.exist">' + $.i18n.prop("user.not.exist") + '</font>';
                        return false;
                    } else if (data.result == "Disabled") {
                        divMsg.innerHTML = '<font class="tips_false" i18n="uid.disable">' + $.i18n.prop("uid.disable") + '</font>';
                        return false;
                    } else if (data.result == "VALID_ERROR") {
                        divMsg.innerHTML = '<font class="tips_false" i18n="uid.disable">' + $.i18n.prop("vcode.error") + '</font>';
                        return false;
                    } else if (data.result == "X_NULL") {
                        divMsg.innerHTML = '<font class="tips_false" i18n="uid.disable">' + $.i18n.prop("X.not.exist") + '</font>';
                        return false;
                    } else if (data.result == "Y_NULL") {
                        divMsg.innerHTML = '<font class="tips_false" i18n="uid.disable">' + $.i18n.prop("Y.not.exist") + '</font>';
                        return false;
                    } else if (data.result == "IMGX_NULL") {
                        divMsg.innerHTML = '<font class="tips_false" i18n="uid.disable">' + $.i18n.prop("IMGX.not.exist") + '</font>';
                        return false;
                    } else if (data.result == "IMGY_NULL") {
                        divMsg.innerHTML = '<font class="tips_false" i18n="uid.disable">' + $.i18n.prop("IMGY_NULL.not.exist") + '</font>';
                        return false;
                    } else {
                        divMsg.innerHTML = '<font class="tips_false" i18n="system.error">' + $.i18n.prop("system.error") + '</font>';
                        return false;
                    }
                }

            },
            error: function () {
                divcode.innerHTML = '<font class="tips_false" i18n="system.error">' + $.i18n.prop("system.error") + '</font>';
                return false;
            }
        });
    }

};