const { createApp, ref, nextTick, watch } = Vue;

createApp({
  components: {
    SearchInput: {
      props: {
        modelValue: {
          type: String,
          default: "",
        },
      },
      emits: ["update:modelValue"],
      template: `
        <input
          ref="inputEl"
          :value="modelValue"
          type="text"
          placeholder="请输入课程关键字"
          @input="$emit('update:modelValue', $event.target.value)"
        />
      `,
      methods: {
        focus() {
          this.$refs.inputEl.focus();
        },
      },
    },
  },
  setup() {
    const showSearch = ref(false);
    const keyword = ref("");
    const searchBox = ref(null);

    watch(keyword, (newValue) => {
      // 任务：在控制台输出关键字变化
    });

    async function toggleSearch() {
      // 任务：
      // 1. 切换 showSearch.value
      // 2. 如果展开了，await nextTick()
      // 3. 通过 searchBox.value.focus() 聚焦输入框
    }

    return {
      showSearch,
      keyword,
      searchBox,
      toggleSearch,
    };
  },
}).mount("#app");