// 1.将数据渲染到页面上
/** @type {HTMLElement} */
let content = document.querySelector('#content')

students.forEach(function (item, i) {
  let div = document.createElement('div')
  div.classList.add('cell')
  div.innerHTML = item
  content.appendChild(div)
})

// 点击开始按钮
/** @type {HTMLElement} */
let start = document.querySelector('#start')

/** @type {HTMLElement} 被选中的小伙伴 */
let selectedName = document.querySelector('#selectTitle span')

/** 被选中的小伙伴们 */
let selectedArr = []

/** 未被选中的小伙伴们的下标 */
let UnSelectedIndex = students.map(function (item, i) {
  return i
})

/** 正在点名，防止多次点击 */
let isRunning = false

// 点击开始按钮点名
start.onclick = function () {

  if (isRunning) {
    return 0
  }

  if (UnSelectedIndex.length === 0) {
    alert('当前所有小伙伴都已经被选中！')
    return 0
  }

  /** @type {HTMLElement[]} 获取页面所有名字元素 */
  let items = document.querySelectorAll('.cell')
  /** 已选中项的下标 */
  let index = -1
  /** 计数器 */
  let count = 20

  // 设置计时器
  let timer = setInterval(function () {
    isRunning = true
    // 获取随机数
    index = Math.floor(Math.random() * UnSelectedIndex.length)
    if (document.querySelector('.cell.active')) {
      document.querySelector('.cell.active').classList.remove('active')
    }
    items[UnSelectedIndex[index]].classList.add('active')

    // 点名完成，清除计时器
    if (count <= 0) {
      isRunning = false
      items[UnSelectedIndex[index]].classList.add('selected')
      selectedArr.push(students[UnSelectedIndex[index]])
      selectedName.innerHTML = selectedArr.toString()

      UnSelectedIndex.splice(index, 1)
      clearInterval(timer)
    }

    count--
  }, 100)

}

// 获取页面元素
const selectedStudentSpan = document.getElementById('selectedStudent');
const scoreSpan = document.getElementById('score');
const startButton = document.getElementById('start');
const resetButton = document.getElementById('reset'); // 假设重置按钮的id为'reset'
const contentDiv = document.getElementById('content');

// 初始化积分变量
let score = 0;

// 更新点到的人和积分显示的函数
function updateDisplay(selectedStudent) {
    selectedStudentSpan.textContent = selectedStudent ? selectedStudent + ' 被点到' : '当前没有被点到的小伙伴';
    scoreSpan.textContent = '当前积分: ' + score;
}

// 点名逻辑
startButton.addEventListener('click', () => {
    if (students.length === 100) {
        alert('没有学生名单！');
        return;
     }

     // 随机选择一个学生
     const randomIndex = Math.floor(Math.random() * students.length);
     const selectedStudent = students[randomIndex];

     // 更新页面显示
    updateDisplay(selectedStudent);

     // 更新积分
    score ++ ;
    updateDisplay(); // 重新调用updateDisplay以更新积分显示
});

// 重置积分的函数
function resetScore() {
    score = 0;
    updateDisplay(''); // 清空被点到的学生显示，并更新积分
    students.length = 0; // 清空学生名单，允许重复点名
}

// 重置按钮的点击事件监听器
if (resetButton) {
    resetButton.addEventListener('click', resetScore);
}

// 初始化页面显示
updateDisplay('');