// 获取输入框和结果展示元素
var input = document.getElementById('search-input');
var searchResults = document.getElementById('search-results');
var deleteSearchIcon = document.getElementById('delete-search-btn');

fixedMessage = function (chatUserId, messId) {
    chatid = chatUserId;
    fixedMessageId = messId;
    loadChatMessage();
}

// 定义一个函数，用于处理输入事件并调用搜索接口
function handleInput(event) {
    // 获取输入框的值
    var query = event.target.value;
    searchResults.innerHTML = '';
    // 如果输入框为空，则不执行搜索
    if (!query) {
        return;
    }
    // 调用搜索接口，这里使用fetch模拟异步请求
    fetch('/api/search/query?q=' + encodeURIComponent(query))
        .then(response => response.json())
        .then(data => {
            // 处理搜索结果
            for (let i = 0; i < data.data.length; i++) {
                var messageData = data.data[i];
                var sendUserNonNull = messageData != null && messageData.senderUser;
                var photo = sendUserNonNull ? messageData.senderUser.photo : "";
                var title = sendUserNonNull ? messageData.senderUser.userName : "";
                var message = messageData.message;
                var chatUserId = "";
                if (me.userId == messageData.sender) {
                    chatUserId = messageData.receiver;
                } else if (me.userId == messageData.proxySender || me.userId == messageData.receiver) {
                    chatUserId = messageData.sender;
                }
                var eventTag = "<a onclick=\"fixedMessage('"+chatUserId+"', "+messageData.id+")\">";
                if (messageData.type == 4 && messageData.article != null) {
                    photo = messageData.article.cover;
                    title = messageData.article.title;
                    message = messageData.article.description;
                    eventTag = "<a href='/article/"+messageData.article.id+"' target='_blank'>";
                }
                var searchCard = eventTag + "<div class='search-message-card'>" +
                    "<div class='search-message-photo'><img src='"+photo+"'></div>" +
                    "<div class='search-message-content-container'>" +
                    "   <div class='search-message-sender-name line1ppp'>"+title+"</div>" +
                    "   <div class='search-message-content line1ppp'>"+message+"</div>" +
                    "</div>" +
                    "</div></a>";
                searchResults.innerHTML += searchCard;
            }
        })
        .catch(error => {
            console.error('Error:', error);
            searchResults.innerHTML = '<div>搜索出错</div>';
        });
}

// 为输入框添加输入事件监听器
input.addEventListener('input', handleInput);
input.addEventListener('focus', function (){
    // 在输入框获得焦点时，设置其值为空字符串
    input.value = '';
    searchResults.style.display = "block";
    deleteSearchIcon.style.display = "block";
});
deleteSearchIcon.addEventListener('click', function (){
    // 在输入框获得焦点时，设置其值为空字符串
    input.value = '';
    searchResults.style.display = "none";
    deleteSearchIcon.style.display = "none";
});
input.addEventListener('blur', function (){
    // 在输入框失去焦点时，如果值为空，则设置回原来的占位符
    if (input.value === '') {
        input.value = input.placeholder;
    }
});