// 渲染删除元素的li
function RenderDeleteUl() {
    document.querySelector(".delete ul").innerHTML = ""
    defaultNavList.forEach(function(val,index){
        document.querySelector(".delete ul").innerHTML+=`
            <li>${val.title}</li>
        `
    });
    BindDeleteUl()
}

// 渲染添加元素的li
function RenderAddUl() {
    document.querySelector(".add ul").innerHTML = ""
    settingNavList.forEach(function(val,index){
        document.querySelector(".add ul").innerHTML+=`
            <li>${val.title}</li>
        `
    });
    BindaddUl()
}

function BindDeleteUl() {
    var deleteUl = document.querySelectorAll(".delete ul li");
    deleteUl.forEach(function(val,index){
        val.onclick = function() {
            document.querySelector(".delete ul").removeChild(val)
            document.querySelector(".add ul").appendChild(val)
            // 1 处理数据
            // 2 保存数据
            // 将数据保存
            settingNavList.push(defaultNavList[index])
            defaultNavList.splice(index,1)
            console.log("defaultNavList: ", defaultNavList)
            localStorage.setItem("settingNavList", JSON.stringify(settingNavList))
            localStorage.setItem("defaultNavList", JSON.stringify(defaultNavList))
            RenderDeleteUl()
            BindaddUl()
        }
    })
}

function BindaddUl() {
    var addUl = document.querySelectorAll(".add ul li");
    addUl.forEach(function(val,index){
        val.onclick = function() {
            document.querySelector(".add ul").removeChild(val)
            document.querySelector(".delete ul").appendChild(val)

            defaultNavList.push(settingNavList[index])
            settingNavList.splice(index,1)
            console.log("settingNavList: ", settingNavList)

            localStorage.setItem("settingNavList", JSON.stringify(settingNavList))
            localStorage.setItem("defaultNavList", JSON.stringify(defaultNavList))
            RenderAddUl()
            BindDeleteUl()
        }
    });
}

RenderDeleteUl()
RenderAddUl()

// BindDeleteUl()

// BindaddUl()