// 上传图片
let fileInput = document.getElementById('file');
let feedbackName = document.querySelector(".feedback-name input")
let feedbackPhone = document.querySelector(".feedback-phone input")
let feedbackTextarea = document.querySelector(".feedback-textarea textarea")
let returnTopBtn = document.querySelector(".return-top")
let timer = null;
// 手机号验证正则，11位，首位是1，第二位不是0、1、2，纯数字
let phoneCheck = /^1[3456789]\d{9}$/

// 监听上传图片事件:
fileInput.addEventListener('change', function () {
    let file = fileInput.files[0];
    // 获取File信息:
    if (!['image/jpeg', 'image/png', 'image/gif'].includes(file.type)) {
        alert('不是有效的图片文件!');
        return;
    }
    // 读取文件:
    let reader = new FileReader();
    reader.onload = function (e) {
        document.querySelector(".upload-wrapper ul").innerHTML += '<li><img src="' + e.target.result + '" alt=""><i class="iconfont">&#xe621;</i></li>'
        let uploadImg = document.querySelectorAll(".upload-wrapper ul li")
        for (let i = 0, j = uploadImg.length; i < j; i++) {
            uploadImg[i].querySelector("i").onclick = function () {
                this.parentNode.parentNode.removeChild(this.parentNode)
                document.querySelector(".img-num").innerHTML--
                if (document.querySelector(".img-num").innerHTML !== "6") {
                    document.querySelector(".upload-btn").style.display = "block"
                }
            }
        }
    };
    // 以DataURL的形式读取文件:
    reader.readAsDataURL(file);
    // 已上传图片数量
    document.querySelector(".img-num").innerHTML++
    if (document.querySelector(".img-num").innerHTML === "6") {
        document.querySelector(".upload-btn").style.display = "none"
    }
});

// 姓名校验
feedbackName.onfocus = function () {
    if (this.nextElementSibling.style.display === "block") {
        this.style.border = "1px #FF7200 solid"
    } else {
        this.style.border = "1px #0147a6 solid"
    }
}
feedbackName.onblur = function () {
    if (this.value === "") {
        this.style.border = "1px #FF7200 solid"
        this.nextElementSibling.style.display = "block"
    } else {
        this.style.border = "1px #c1c1c1 solid"
        this.nextElementSibling.style.display = "none"
    }
}

// 联系方式正则校验
feedbackPhone.onfocus = function () {
    if (this.nextElementSibling.style.display === "block") {
        this.style.border = "1px #FF7200 solid"
    } else {
        this.style.border = "1px #0147a6 solid"
    }
}
feedbackPhone.onblur = function () {
    if (this.value === "") {
        this.style.border = "1px #FF7200 solid"
        this.nextElementSibling.style.display = "block"
    } else {
        if (phoneCheck.test(this.value)) {
            this.style.border = "1px #c1c1c1 solid"
            this.nextElementSibling.style.display = "none"
        } else {
            this.style.border = "1px #FF7200 solid"
            this.nextElementSibling.style.display = "block"
            this.nextElementSibling.innerHTML = "请您输入正确的手机号码"
        }
    }
}

// 邮箱校验
feedbackTextarea.onfocus = function () {
    if (this.nextElementSibling.style.display === "block") {
        this.style.border = "1px #FF7200 solid"
    } else {
        this.style.border = "1px #0147a6 solid"
    }
}
feedbackTextarea.onblur = function () {
    if (this.value === "") {
        this.style.border = "1px #FF7200 solid"
        this.nextElementSibling.style.display = "block"
    } else {
        this.style.border = "1px #c1c1c1 solid"
        this.nextElementSibling.style.display = "none"
    }
}

// 提交验证
function feedbackSubmit() {
    if (feedbackName.value === "") {
        feedbackName.style.border = "1px #FF7200 solid"
        feedbackName.nextElementSibling.style.display = "block"
    } else {
        feedbackName.style.border = "1px #c1c1c1 solid"
        feedbackName.nextElementSibling.style.display = "none"
    }
    if (feedbackPhone.value === "") {
        feedbackPhone.style.border = "1px #FF7200 solid"
        feedbackPhone.nextElementSibling.style.display = "block"
    } else {
        if (phoneCheck.test(feedbackPhone.value)) {
            feedbackPhone.style.border = "1px #c1c1c1 solid"
            feedbackPhone.nextElementSibling.style.display = "none"
        } else {
            feedbackPhone.style.border = "1px #FF7200 solid"
            feedbackPhone.nextElementSibling.style.display = "block"
            feedbackPhone.nextElementSibling.innerHTML = "请您输入正确的手机号码"
        }
    }
    if (feedbackTextarea.value === "") {
        feedbackTextarea.style.border = "1px #FF7200 solid"
        feedbackTextarea.nextElementSibling.style.display = "block"
    } else {
        feedbackTextarea.style.border = "1px #c1c1c1 solid"
        feedbackTextarea.nextElementSibling.style.display = "none"
    }
    if (feedbackName.value !== "" && phoneCheck.test(feedbackPhone.value) && feedbackTextarea.value !== "") {
        document.querySelector(".feedback-info").style.display = "none"
        document.querySelector(".feedback-textarea").style.display = "none"
        document.querySelector(".feedback-img").style.display = "none"
        document.querySelector(".feedback-submit-btn").style.display = "none"
        document.querySelector(".feedback-content").innerHTML += "<div class='submit-success'><i class='iconfont'>&#xee15;</i><p>提交成功!</p><p>感谢您提供了宝贵的建议，我们会积极采纳！</p></div>"
        document.querySelector(".feedback-close-btn").onclick = function () {
            document.querySelector(".feedback-wrapper").style.display = "none"
            location.reload();
        }
    }
}

// 返回顶部
returnTopBtn.onclick = function () {
    cancelAnimationFrame(timer);
    timer = requestAnimationFrame(function fn() {
        let oTop = document.body.scrollTop || document.documentElement.scrollTop;
        if (oTop > 0) {
            scrollBy(0, -100);
            timer = requestAnimationFrame(fn);
        } else {
            cancelAnimationFrame(timer);
        }
    });
}