const { createApp } = Vue;

createApp({
  components: {
    CourseItem: {
      props: {
        course: {
          type: Object,
          required: true,
        },
      },
      emits: ["toggle"],
      template: `
        <article class="card">
          <h2>{{ course.title }}</h2>
          <p :class="{ done: course.finished }">
            {{ course.finished ? "已完成" : "学习中" }}
          </p>
          <button type="button" @click="$emit('toggle', course.id)">切换状态</button>
        </article>
      `,
    },
  },
  setup() {
    const courses = Vue.ref([
      { id: 1, title: "组合式 API", finished: true },
      { id: 2, title: "组件通信", finished: false },
    ]);

    function toggleCourse(courseId) {
      // 任务：根据 courseId 切换对应课程的 finished
    }

    return {
      courses,
      toggleCourse,
    };
  },
}).mount("#app");