// 性别下拉框
let selectInput = document.querySelector(".account-sex input")
let selectionList = document.querySelector(".account-sex ul")
// 上传图片
let avatarFileInput = document.querySelectorAll('.file-avatar');

// 性别下拉框交互
selectInput.onfocus = function () {
    this.previousElementSibling.style.display = "block"
    let selectionLiList = this.previousElementSibling.querySelectorAll("li")
    for (let i = 0, j = selectionLiList.length; i < j; i++) {
        selectionLiList[i].onclick = function () {
            for (let i = 0; i < selectionLiList.length; i++) {
                selectionLiList[i].classList.remove("select-active")
            }
            this.classList.add("select-active")
            this.parentNode.nextElementSibling.value = this.innerHTML
            this.parentNode.style.display = "none"
            this.parentNode.nextElementSibling.blur()
        }
    }
}
selectInput.onblur = function () {
    this.previousElementSibling.style.display = "none"
}

// 点击下拉框内容，input不会失去焦点
selectionList.addEventListener("mousedown", (e) => {
    e.preventDefault()
})

// 生日日历
layui.use(function () {
    let laydate = layui.laydate;
    // 渲染
    laydate.render({
        elem: '#birth-input',
    });
});

// 监听上传头像事件:
for (let i = 0, j = avatarFileInput.length; i < j; i++) {
    avatarFileInput[i].addEventListener('change', function () {
        let avatarFile = avatarFileInput[i].files[0];
        // 获取File信息:
        if (!['image/jpeg', 'image/png', 'image/gif'].includes(avatarFile.type)) {
            alert('不是有效的图片文件!');
            return;
        }
        // 读取文件:
        let avatarReader = new FileReader();
        // 以DataURL的形式读取文件:
        avatarReader.readAsDataURL(avatarFile);
        avatarReader.onload = function (e) {
            let isI = document.querySelector(".avatar-preview i")
            if (isI !== null) {
                isI.style.display = "none"
                document.querySelector(".change-img").style.display = "block"
            }

            document.querySelector(".avatar-preview").innerHTML = '<img src="' + e.target.result + '" alt="" class="avatar-img">'
            document.querySelector(".avatar-img").onload = function () {
                if (this.width > this.height) {
                    this.style.height = "100%"
                } else {
                    this.style.width = "100%"
                }
            }
        };
    });
}