let isShow = false
let items = []
let globalDropdownWrapper = null

function getDropdownRoot(width = 372, top = "100%") {
    let dropdownWrapper = document.createElement("div");
    dropdownWrapper.style.width = width + "px";
    dropdownWrapper.style.height = '400px'
    dropdownWrapper.style.position = "absolute"
    dropdownWrapper.style.background = "#fafafa"
    dropdownWrapper.style.top = top;
    dropdownWrapper.style.left = "0"
    dropdownWrapper.style.zIndex = "999"
    dropdownWrapper.style.display = "none"
    dropdownWrapper.style.overflowY = "auto"
    dropdownWrapper.style.boxSizing = "border-box"
    dropdownWrapper.style.border = "2px solid #eeeeee"
    dropdownWrapper.style.borderRadius = "10px"
    dropdownWrapper.id = "dropdown-root";
    dropdownWrapper.classList.add("dropdown-root")
    globalDropdownWrapper = dropdownWrapper
    return dropdownWrapper
}


function getIsShow() {
    return isShow;
}

function setDropdownContent(dataList, type, callback) {
    clearNodes();
    let dropItems = document.createElement("div");
    dropItems.style.display = "flex"
    dropItems.style.flexDirection = "row"
    dropItems.style.flex = "1"
    dropItems.style.gap = "20px 20px"
    dropItems.style.padding = "10px"
    dropItems.style.flexWrap = "wrap"

    // 可扩展其他类型
    switch (type) {
        case "icon": createIconCardItem([dropItems], dataList); break;
        default: console.error("未知type类型"); return;
    }
    globalDropdownWrapper.addEventListener("click", function (e) {
        callback.call(e)
    })
    globalDropdownWrapper.appendChild(dropItems)
}

function createIconCardItem(dropItems, dataList) {
    for (let data of dataList) {
        let dropItem = document.createElement("div")
        dropItem.classList.add("dropItem")
        dropItem.style.display = "flex"
        dropItem.style.flexDirection = "column"
        dropItem.style.justifyContent = "center"
        dropItem.style.alignItems = "center"
        dropItem.style.padding = "5px"
        dropItem.style.width = "96px";
        dropItem.style.height = "96px";
        dropItem.style.boxSizing = "border-box";

        let image = document.createElement("img");
        image.src = data.imgUrl;
        image.style.objectFit = "contain"
        image.style.maxWidth = "100%"
        image.style.height = "80%"
        image.style.display = "block"

        let span = document.createElement("span");
        span.setAttribute('databinding', true)
        span.setAttribute('data-value', data.imgValue)
        span.innerText = data.imgName;
        span.style.maxWidth = "100%" // 限制最大宽度
        span.style.height = "20%"
        span.style.overflow = "hidden" // 溢出隐藏
        span.style.textOverflow = "ellipsis" // 文本溢出显示省略号
        span.style.whiteSpace = "nowrap" // 防止文本换行
        span.style.fontSize = "0.8em" // 调整字体大小

        dropItem.appendChild(image)
        dropItem.appendChild(span)

        dropItems[0].appendChild(dropItem);
    }
}


function clearNodes() {
    while (globalDropdownWrapper.firstChild) {
        globalDropdownWrapper.removeChild(globalDropdownWrapper.firstChild); // 删除第一个子节点
    }
}

function hideDropdown() {
    document.getElementById("dropdown-root").style.display = 'none'
    isShow = false
}

function showDropdown() {
    document.getElementById("dropdown-root").style.display = 'block'
    isShow = true
}

function changeDropdownShow() {
    if (isShow === true) {
        hideDropdown()
        isShow = false
    } else {
        showDropdown()
        isShow = true
    }
}

window.addEventListener("resize", function () {
    globalDropdownWrapper.style.width = "calc(25vw)"
})