const lessons = [
  { title: "获取元素", done: false },
  { title: "修改 DOM", done: true },
];

function fakeLoadExtraLessons() {
  return new Promise(function (resolve) {
    setTimeout(function () {
      resolve([
        { title: "事件委托", done: false },
        { title: "异步渲染", done: false },
      ]);
    }, 900);
  });
}

// 任务：
// 1. 获取页面里的关键元素
// 2. 写一个 renderLessons 函数，把 lessons 渲染到列表
// 3. 点击列表项时切换 done 状态
// 4. 提交表单时阻止默认提交，并新增课程
// 5. 点击加载按钮时显示加载状态，并把异步返回的课程追加到列表
/* 一个课程列表区域
- 一个表单区域
- 一个添加课程的交互
- 一个点击课程切换完成状态的交互
- 一个异步加载提示或远程数据模拟
- 清晰的状态文案更新*/
const page = document.querySelector(".page")
const hero = document.querySelector("hero")
const text = document.getElementById("status-text")
const panel = document.querySelector(".panel")
const btn = document.getElementById("load-btn")
const list = document.getElementById("lesson-list")
const formPanel = document.querySelector(".form-panel")
const lessonForm = document.getElementById("lesson-form")
const lessonInput = document.getElementById("lesson-input")

function renderLessons() {
  lessons.forEach(item => {
    const li = document.createElement("li")
    li.classList.add("li")
    li.setAttribute("title", item.title)
    li.setAttribute("done", item.done)
    li.textContent = `
    标题：${item.title}
    状态：${item.done}`

    list.appendChild(li)
  })
}
renderLessons()

//event.target,closest,
list.addEventListener("click", function (event) {
  const a = event.target.closest(".li")
  if (a) {
    a.textContent = `
    标题：${a.title}
    状态：${!a.done}`

    a.done = !a.done
  }
})

lessonForm.addEventListener("submit", function (event) {
  event.preventDefault()
  const c = document.createElement("li")
  const d = lessonInput.value.trim()
  c.textContent = `
  标题：${d}
  状态：true`
  c.setAttribute("title", d)
  c.setAttribute("done", true)
  c.classList.add("li")
  lessonInput.value = ""
  list.appendChild(c)
})

async function load() {
  text.textContent = "加载中"
  text.innerHTML = ""
  try {

    const s = await fakeLoadExtraLessons()
    text.textContent = "加载完成"
    s.forEach(item => {
      const li = document.createElement("li")
      li.classList.add("li")
      li.setAttribute("title", item.title)
      li.setAttribute("done", item.done)
      li.textContent = `
    标题：${item.title}
    状态：${item.done}`

      list.appendChild(li)
    })
  } catch (error) {
    text.textContent = "加载失败"

  }
}

btn.addEventListener("click", load)