Vue.component("level-badge", {
  props: {
    level: {
      type: String,
      default: "基础",
    },
  },
  template: `<span class="badge">{{ level }}</span>`,
});

const CourseItem = {
  props: {
    course: {
      type: Object,
      required: true,
    },
  },
  template: `
    <article class="course-card" :class="{ 'is-done': course.finished }">
      <div class="meta">
        <level-badge :level="course.level"></level-badge>
        <strong>{{ course.title }}</strong>
      </div>
      <p>{{ course.finished ? "当前已完成" : "当前学习中" }}</p>
      <button type="button" @click="$emit('toggle', course.id)">
        <slot name="action">操作</slot>
      </button>
    </article>
  `,
};

new Vue({
  el: "#app",
  components: {
    CourseItem,
  },
  data: {
    keyword: "",
    statusFilter: "all",
    courses: [
      { id: 1, title: "Vue 实例基础", finished: true, level: "基础" },
      { id: 2, title: "模板语法与指令", finished: false, level: "基础" },
      { id: 3, title: "组件通信实战", finished: false, level: "进阶" },
      { id: 4, title: "生命周期和异步", finished: true, level: "进阶" },
    ],
  },
  computed: {
    filteredCourses() {
      // 任务：
      // 1. 先按 statusFilter 过滤
      // 2. 再按 keyword 过滤标题
      let value = this.keyword.trim().toUpperCase()
      let a
      if (this.statusFilter === "all") {
        a = this.courses.filter(item => item.title.toUpperCase().includes(value))
      } else if (this.statusFilter === "done") {
        const b = this.courses.filter(item => item.finished === true)
        a = b.filter(item => item.title.toUpperCase().includes(value))
      } else if (this.statusFilter === "doing") {
        const b = this.courses.filter(item => item.finished === false)
        a = b.filter(item => item.title.toUpperCase().includes(value))
      }
      return a
    },
    totalCount() {
      return this.courses.length;
    },
    finishedCount() {
      // 任务：返回已完成课程数量
      const b = this.courses.filter(item => item.finished === true)
      return b.length
    },
    visibleCount() {
      // 任务：返回当前筛选后的数量
      const a = this.filteredCourses
      return a.length;
    },
  },
  watch: {
    keyword(newValue) {
      // 任务：在控制台输出关键字变化
      console.log(`关键词：${newValue}`);

    },
  },
  methods: {
    toggleCourse(courseId) {
      // 任务：根据 courseId 切换 finished
      const a = this.courses.find(item => item.id === courseId)
      a.finished = !a.finished
    },
    focusSearch() {
      // 任务：通过 ref 聚焦输入框
      this.$refs.searchInput.focus()
    },
  },
});