async function fetchData() {
  try {
    const response = await fetch("https://rank.intcplab.cn/get_scores");
    const data = await response.json();

    const tableBody = document.getElementById("data-table-body");
    tableBody.innerHTML = "";

    data.forEach((item, index) => {
      const row = document.createElement("tr");

      row.innerHTML = `
        <td>${item.time}</td>
        <td>${item.id}</td>
        <td>${item.name}</td>
        <td>${item.score}</td>
        <td>${item.running_time}</td>
        <td>
            <button onclick="showDetailsModal(${index})">查看详情</button>
        </td>
        `;

      tableBody.appendChild(row);
    });

    const modal = document.getElementById("detailsModal");
    const span = document.getElementsByClassName("close")[0];
    span.onclick = function () {
      modal.style.display = "none";
    };

    window.onclick = function (event) {
      if (event.target === modal) {
        modal.style.display = "none";
      }
    };
  } catch (error) {
    console.error("获取数据时发生错误:", error);
  }
}

function showDetailsModal(index) {
  const modal = document.getElementById("detailsModal");
  const modalDetails = document.getElementById("modal-details");

  fetch("https://rank.intcplab.cn/get_scores")
    .then((response) => response.json())
    .then((data) => {
      modalDetails.innerHTML = data[index].details;
      modal.style.display = "block";
    });
}

window.onload = fetchData;