import { resetPassword, sendCode, userLogin } from './api.js';

var canvasW=344,canvasH=206;
let redirect = ""; // 网页重定向
let yEmail = ""; // 原输入邮箱
let emailTime = '';
window.addEventListener('pageshow', function(event) {
    if (event.persisted || (performance && performance.navigation.type == performance.navigation.TYPE_BACK_FORWARD)) {
      window.locations.reload();
    }
});
$(function () {
    let token = $.cookie('token');
    var windowWidth = $(window).width(); // 使用 jQuery 获取窗口宽度
    setCanvasSize(windowWidth);

    let pageType = $('#loginForm').attr('data-type'); // login: 登录页、loginEmail：邮箱登录、resetPad： 重置密码
    let login = ['email', 'password'];
    let loginEmail = ['email', 'verifyCode'];
    let resetPad = ['email', 'verifyCode', 'password', 'confirmPassword'];
    if(token) {
        window.locations.href = 'userInfo.html';
    }

    $(document).ready(function () {
        $('#head').load('../Public/loginHead.html');
        $('#footer').load('../Public/loginFooter.html');
        // 获取当前页面的URL
        var url = window.locations.href;
        // 解析URL中的查询字符串参数
        var queryParams = {};
        var queryString = url.split('?')[1]; // 获取URL中的查询字符串部分
        if (queryString) {
            // 将查询字符串分割成键值对数组
            var params = decodeURIComponent(queryString).split('&');
            params.forEach(function(param) {
                var keyValue = param.split('=');
                queryParams[keyValue[0]] = keyValue[1]; // 存储键值对
            });
        }
        redirect = queryParams['redirect']||'';
        if(url.split('?')[2]){
            redirect+='?'+url.split('?')[2];
        }
    });
    // 拖动图片
    jigsaw.init({
        canvasW,
        canvasH,
        element: document.getElementById('silder-box'),
        success: function() {
            // 请求接口 登录
            yzmSuccess(pageType);
        },
        fail: function() {},
        close: function () {
            // eleChangeClass('#loginBtn','on');
        },
    });
    // 验证码登录-邮箱鼠标移出
    $('#email').on('blur', function () {
        if((pageType === 'loginEmail' || pageType === 'login') && yEmail !==  $('#email').val()) {
            clearInterval(emailTime);
            $('#verifyCode').val('');
            $('#loginBtn').addClass('on');
            $('#loginHintBox').empty().hide();
            if(($('#emailCode').text() === '获取验证码' || $('#emailCode').text() === '重新发送') &&$('#email').val().trim() && !!validEmail($('#email').val().trim())) {
                $('#emailCode').addClass('on');
            }else {
                $('#emailCode').removeClass('on');
            }
        }
        if((pageType === 'loginEmail' || pageType === 'login') && $('#loginHintBox').html()){
            $('#emailCode').removeClass('on');
        }
    });
    // 点击获取验证码
    $('#emailCode').click(function () {
        if($('#emailCode').hasClass('on') && !!validEmail($('#email').val())) {
            // 1、拖动拼图验证
            $('#silderDialog').show();
        }
    });
    // 忘记密码
    $('#resetPasswords').click(function() {
        window.locations.href = 'resetPasswords.html?redirect='+redirect
    });
    // 忘记密码
    $('#register').click(function() {
        window.locations.href = 'register.html?redirect='+redirect
    });

    //登录切换
    $('.login-box .fromHead-nav').click(function () {
        pageType = $(this).attr('data-type');
        // $('.main-box').removeClass('yzmLogin-box');
        if(pageType && !$(this).hasClass('sel')) {
            $('#password, #verifyCode').val(''); // 清空密码和验证码
            // $('#loginBtn').removeClass('on'); // 恢复按钮默认状态
            eleChangeClass($(this), 'sel');
            eleChangeClass($(this).siblings(), 'sel');
            eleChangeClass($('#loginForm .login-nav-val'), 'sel');
            $('#loginHintBox').empty();
            $('#loginHintBox').hide();
        }
        if(pageType === 'login') {
            $('#email-small').show();
            $('#emailCode-samll').hide();
        }
        if(pageType === 'loginEmail') {
            $('#email-small').hide();
            $('#emailCode-samll').show();
        }
        // if(pageType === 'loginEmail') {
        //     $('.main-box').addClass('yzmLogin-box');
        // }
    });
    $('#loginForm :required').on('blur', function() {
        // 只校验密码和确认密码
        let hintMessage = "";
        if(pageType === 'resetPad' && (($(this).attr('id') === 'password' && $(this).val().trim()) || ($(this).attr('id') === 'confirmPassword' && $(this).val().trim()))) {
            let requiredData = {
                id: $(this).attr('id'),
                name: $(this).attr('name'),
                label: $(this).attr('data-label'),
                value: $(this).val().trim()
            };
            let retData = validForm(requiredData);
    
            if(typeof retData === "object") {
                hintMessage = retData;
            }else {
                hintMessage = '';
            }
            if($(this).attr('id') === 'password' && !validPad(requiredData.value)) {
                // $('#password').addClass('error');
                Message.show('密码长度需要至少8个字符，最多不超过16个字符，由大小写字母、数字和特殊字符组成！');
                return false;
            }
            if($(this).attr('id') === 'confirmPassword' && $(this).val().trim() !== $('#password').val().trim()) {
                $('#password, #confirmPassword').addClass('error');
                Message.show('两次密码输入不一致！');
                return false;
            }
            if($('#confirmPassword').val().trim() === $('#password').val().trim()) {
                $('#password, #confirmPassword').removeClass('error');
                return false;
            }
            
            if(hintMessage) {
                $('#'+hintMessage.elId).addClass('error');
                Message.show(hintMessage.message);
                return false;
            }
        }
    });

    // 表单填写后 改变按钮
    $('#loginForm :required').on('change', function() {
        var allFilled = true; // 假设所有字段都已填写

        $('#loginForm :required').each(function() {
            if(
                (pageType==='login' && login.indexOf($(this).attr('id')) !== -1) ||
                (pageType==='loginEmail' && loginEmail.indexOf($(this).attr('id')) !== -1) ||
                (pageType==='resetPad' && resetPad.indexOf($(this).attr('id')) !== -1)
            ) {
                // 对于输入框，检查值是否为空
                if ($(this).is('input') && $(this).val().trim() === '') {
                    allFilled = false;
                    return false; // 跳出循环
                }
                // 对于选择框，检查是否选择了非空的选项
                if ($(this).is('select') && $(this).val() === '') {
                    allFilled = false;
                    return false; // 跳出循环
                }
            }
        });
        // 根据检查结果改变按钮的样式
        // if (allFilled) {
        //     $('#loginBtn').addClass('on');
        // } else {
        //     $('#loginBtn').removeClass('on');
        // }
    });

    // 点击登录
    $('#loginBtn').click(function (e) {
		if(!$(this).hasClass('on')) {
			return false;
		}
        e.preventDefault(); // 阻止表单默认提交行为，以便进行AJAX提交或其他处理

        let data = {}; // 表单数据
        let hintMessage = ""; // 提示信息
        // 1、获取必填字段  非空验证
        $('#loginForm :required').each(function() {
            if(
                (pageType==='login' && login.indexOf($(this).attr('id')) !== -1) ||
                (pageType==='loginEmail' && loginEmail.indexOf($(this).attr('id')) !== -1) ||
                (pageType==='resetPad' && resetPad.indexOf($(this).attr('id')) !== -1)
            ) {
                let requiredData = {
                    id: $(this).attr('id'),
                    name: $(this).attr('name'),
                    label: $(this).attr('data-label'),
                    value: $(this).val().trim()
                };
                let retData = validForm(requiredData);
                if(typeof retData === "object") {
                    hintMessage = retData;
                    return false;
                }
            }
        });
        if(hintMessage) {
            $('#'+hintMessage.elId).addClass('error');
            Message.show(hintMessage.message);
            return false;
        }
        // 2、获取form表单所有数据--并验证邮箱、新 密码
        let value = $('#loginForm').serializeArray();
        $.each(value, function (index, item) {
            data[item.name] = item.value;
        });
        if(!validEmail(data.email)) {
            $('#email').addClass('error');
            Message.show('电子邮件地址错误！');
            return false;
        }
        if(pageType === 'resetPad') {
            if(!validPad(data.password)) {
                // $('#password').addClass('error');
                Message.show('密码长度需要至少8个字符，最多不超过16个字符，由大小写字母、数字和特殊字符组成！');
                return false;
            }
            // if(!validPad(data.confirmPassword)) {
            //     $('#confirmPassword').addClass('error');
            //     Message.show('密码长度需要至少8个字符，最多不超过16个字符，由大小写字母、数字和特殊字符组成！');
            //     return false;
            // }
            if(data.password !== data.confirmPassword) {
                $('#password, #confirmPassword').addClass('error');
                Message.show('两次密码输入不一致！');
                return false;
            }
        }

        // let json = JSON.stringify(data);
        // $('#loginBtn').removeClass('on');// 重置按钮样式
        if(pageType === 'login') {
            // 3、拖动拼图验证
            $('#silderDialog').show();
        }
        if(pageType === 'loginEmail') {
            loginEamil();
        }
        if(pageType === 'resetPad') {
            funResetPad();
        }
    });
    // 忘记密码-返回登录页
    $('#return').click(function() {
        history.go(-1);
    })
});
// 设置canvas宽高
function setCanvasSize(windowWidth) {
    if (windowWidth < 768) {  
        // 如果窗口宽度小于 768px，执行一些操作 
        canvasW=344;
        canvasH=206; 
    } else {
        // 如果窗口宽度大于或等于 768px，执行其他操作
        canvasW = 344;
        canvasH = 206;
    }
}
// 验证码通过
function yzmSuccess(pageType) {
    let para = {};
    let value = $('#loginForm').serializeArray();
    $.each(value, function (index, item) {
        para[item.name] = item.value;
    });
    if(pageType === 'login') {
        userLogin(para).then((res) => {
            //请求成功
            if(res.code !== 200) {
				if(res.code === 1012) {
				    let data = res.data;
				    let message = res.message;
				    let msgArr = message?message.split('30'):'';
				    if(msgArr.length) {
				        yEmail = para['email'];
				        if($('#loginBtn').hasClass('on')) {
				            $('#loginBtn').removeClass('on');
				        }
				        if($('#emailCode').hasClass('on')) {
				            $('#emailCode').removeClass('on');
				        }
				        let countdownNumber = data || 30;
						message = msgArr[0] + countdownNumber + msgArr[1];
						if(message) {
						    $('#loginHintBox').empty();
						    $('.login-from-box').addClass('showHint');
						    var div1 = $("<p></p>").text(message);
						    var div2 = $("<p></p>").text("");
						    $('#loginHintBox').append(div1, div2).show();
						}else {
						    $('#loginHintBox').empty();
						    $('#loginHintBox').hide();
						    $('#loginBtn').addClass('on');
						}
				        emailTime = setInterval(function() {
				            countdownNumber--;
				            message = msgArr[0] + countdownNumber + msgArr[1];
				            if (countdownNumber < 1) {
				                clearInterval(emailTime);
				                message = "";
				            }
				            if(message) {
				                $('#loginHintBox').empty();
				                $('.login-from-box').addClass('showHint');
				                var div1 = $("<p></p>").text(message);
				                var div2 = $("<p></p>").text("");
				                $('#loginHintBox').append(div1, div2).show();
				            }else {
				                $('#loginHintBox').empty();
				                $('#loginHintBox').hide();
				                $('#loginBtn').addClass('on');
				            }
				        }, 60000);
				    }
				} else {
					// 报错
					$('#loginHintBox').empty();
					$('.login-from-box').addClass('showHint');
					var div1 = $("<p></p>").text(res.message);
					var div2 = $("<p></p>").text("");
					$('#loginHintBox').append(div1, div2).show();
					// $('#loginBtn').addClass('on');
				}
            }
            if (res.code == 200) {
                $('#loginHintBox').hide();
                $('.login-from-box').removeClass('showHint');
                let data = res.data;
                let expiresDate = new Date(data.expire);
                $.cookie('expires', data.expire, { expires: expiresDate, path: '/' });
                // 保持登录的相关方法
                if($('#checkbox-agree').hasClass('on')) {
                    $.cookie('token', data.token, { expires: expiresDate, path: '/' });
                    $.cookie('loginEmail', para.email, { expires: expiresDate, path: '/' });
                }
                if(!$('#checkbox-agree').hasClass('on')) {
                    $.cookie('token', res.data.token,{ path: '/' });
                    $.cookie('loginEmail', para.email,{ path: '/' });
                }
                if(!redirect) {
                    window.locations.href = 'userInfo.html';
                }
                if(redirect) {
                    window.locations.href = redirect;
                }
            }
        }).catch((err) => {
            //错误处理 错误信息在err中
            Message.show(err.message || '请求失败！');
        });
    }
    if(pageType === 'loginEmail' || pageType === 'resetPad') {
        let email = $('#email').val().trim();
        let countdownDiv = $('#emailCode');
        // 防止重复点击
        if($(countdownDiv).attr('loading') ||countdownDiv.text() !== '获取验证码' && countdownDiv.text() !== '重新发送') {
            return false;
        }
        // 验证邮箱
        if(!validEmail(email)) {
            $('#email').addClass('error');
            Message.show('电子邮件地址错误！');
            return false;
        }
        let para = {
            email,
            type: pageType === 'loginEmail'?2:3, //类型，1-注册，2-登陆，3-忘记密码，4-修改邮箱
        };
        $(countdownDiv).attr('loading',true)
        sendCode(para).then((res) => {
            if(res.code !== 200) {
				if(res.code === 1012) {
					let data = res.data;
					let message = res.message;
					let msgArr = message?message.split('30'):'';
					res.message = msgArr[0] + data + msgArr[1];
				}
                Message.show(res.message || '发送验证码失败！');
                $(countdownDiv).removeAttr('loading')
                return false;
            }
            // 60S 倒计时
            startCountdown(countdownDiv, 60);
            countdownDiv.removeClass('on');
            setTimeout(() => {
                $(countdownDiv).removeAttr('loading')
            }, 2000);
        }).catch((err) => {
            //错误处理 错误信息在err中
            Message.show(err.message || '请求失败！');
        });
    }
}
// 倒计时
function startCountdown(countdownElement, seconds) {
    var countdownNumber = parseInt(seconds, 10);
    var countdownId = setInterval(function() {
        countdownNumber--;
        countdownElement.text(countdownNumber+'S');

        if (countdownNumber < 1) {
            clearInterval(countdownId);
            countdownElement.addClass('on');
            countdownElement.text('重新发送');
        }
    }, 1000);
}

// 邮箱登录
function loginEamil() {
    let para = {};
    let value = $('#loginForm').serializeArray();
    $.each(value, function (index, item) {
        para[item.name] = item.value;
    });
    userLogin(para).then((res) => {
        //请求成功
        if(res.code !== 200) {
            // if(res.code === 1012) {
            //     $('#loginBtn').removeClass('on');// 重置按钮样式
            // }else {
            //     $('#loginBtn').addClass('on');// 重置按钮样式
            // }
            if(res.code === 1012) {
                let data = res.data;
                let message = res.message;
                let msgArr = message?message.split('30'):'';
                if(msgArr.length) {
                    yEmail = para['email'];
                    if($('#loginBtn').hasClass('on')) {
                        $('#loginBtn').removeClass('on');
                    }
                    if($('#emailCode').hasClass('on')) {
                        $('#emailCode').removeClass('on');
                    }
                    let countdownNumber = data || 30;
					message = msgArr[0] + countdownNumber + msgArr[1];
					if(message) {
					    $('#loginHintBox').empty();
					    $('.login-from-box').addClass('showHint');
					    var div1 = $("<p></p>").text(message);
					    var div2 = $("<p></p>").text("");
					    $('#loginHintBox').append(div1, div2).show();
					}else {
					    $('#loginHintBox').empty();
					    $('#loginHintBox').hide();
					    $('#loginBtn').addClass('on');
					}
                    emailTime = setInterval(function() {
                        countdownNumber--;
                        message = msgArr[0] + countdownNumber + msgArr[1];
                        if (countdownNumber < 1) {
                            clearInterval(emailTime);
                            message = "";
                        }
                        if(message) {
                            $('#loginHintBox').empty();
                            $('.login-from-box').addClass('showHint');
                            var div1 = $("<p></p>").text(message);
                            var div2 = $("<p></p>").text("");
                            $('#loginHintBox').append(div1, div2).show();
                        }else {
                            $('#loginHintBox').empty();
                            $('#loginHintBox').hide();
                            $('#loginBtn').addClass('on');
                        }
                    }, 60000);
                }
            } else {
				// 报错
				$('#loginHintBox').empty();
				$('.login-from-box').addClass('showHint');
				var div1 = $("<p></p>").text(res.message);
				var div2 = $("<p></p>").text("");
				$('#loginHintBox').append(div1, div2).show();
				$('#loginBtn').addClass('on');
			}
        }
        if (res.code == 200) {
            $('#loginHintBox').hide();
            $('.login-from-box').removeClass('showHint');
            let data = res.data;
            let expiresDate = new Date(data.expire);
            $.cookie('expires', data.expire, { expires: expiresDate, path: '/' });
            // 保持登录的相关方法
            if($('#checkbox-agree').hasClass('on')) {
                $.cookie('token', data.token, { expires: expiresDate, path: '/' });
                $.cookie('loginEmail', para.email, { expires: expiresDate, path: '/' });
            }
            if(!$('#checkbox-agree').hasClass('on')) {
                $.cookie('token', res.data.token, { path: '/' });
                $.cookie('loginEmail', para.email, { path: '/' });
            }
            if(!redirect) {
                window.locations.href = 'userInfo.html';
            }
            if(redirect) {
                window.locations.href = redirect;
            }
        }
    }).catch((err) => {
        //错误处理 错误信息在err中
        Message.show(err.message || '请求失败！');
    });
}
// 重置密码
function funResetPad() {
    let para = {};
    let value = $('#loginForm').serializeArray();
    $.each(value, function (index, item) {
        para[item.name] = item.value;
    });
    resetPassword(para).then((res) => {
        //请求成功
        if(res.code !== 200) {
            if(res.code === 1006) {
                $('#verifyCode').addClass('error')
            }
            Message.show(res.message||'重置失败！');
            return false;
        }
        if (res.code == 200) {
            let countdownNumber = 4;
            var countdownId = setInterval(function() {
                countdownNumber--;
                Message.show('密码已重置('+countdownNumber+')', 'default', '', 3000);
                if (countdownNumber < 1) {
                    clearInterval(countdownId);
                    // history.go(-1);
                    if(redirect) {
                        // window.locations.href = redirect;
                        window.locations.href = 'login.html?redirect='+redirect
                    }else {
                        history.go(-1);
                    }
                }
            }, 1000);
        }
    }).catch((err) => {
        //错误处理 错误信息在err中
        Message.show(err.message || '请求失败！');
    });
}
<!--耗时0.0107591152秒-->