<script setup>
import { ref, watch } from 'vue'

const keyword = ref('')

// watch(被监听的数据源, 回调函数)
watch(keyword, (newVal, oldVal) => {
  console.log(`搜索关键词从 "${oldVal}" 变成了 "${newVal}"`)
  // 在这里执行过滤逻辑
})
</script>

<template>
  <input v-model="keyword" placeholder="搜索文章...">
  <p>当前搜索：{{ keyword }}</p>
</template>

import { ref, watch } from 'vue'

const keyword = ref('')
const category = ref('全部')

// 监听单个 ref
watch(keyword, (newVal) => {
  document.title = newVal ? `搜索：${newVal}` : 'RUNOOB Blog'
})

// 监听多个数据源
watch([keyword, category], ([newKw, newCat], [oldKw, oldCat]) => {
  console.log('关键词或分类变化了，重新过滤文章')
  // 执行过滤逻辑...
})

<script setup>
import { ref, watchEffect } from 'vue'

const keyword = ref('')
const articles = ref([
  { id: 1, title: 'Vue3 入门' },
  { id: 2, title: 'JS 异步' },
])

const filteredArticles = ref([])

// watchEffect 自动追踪 keyword 和 articles
// 并且会立即执行一次，初始化 filteredArticles
watchEffect(() => {
  // 函数里用到的所有响应式数据都会被自动追踪
  filteredArticles.value = articles.value.filter(
    a => a.title.includes(keyword.value)
  )
  console.log(`过滤结果：${filteredArticles.value.length} 篇`)
})
</script>

<template>
  <input v-model="keyword" placeholder="搜索">
  <div v-for="a in filteredArticles" :key="a.id">
    {{ a.title }}
  </div>
</template>

import { ref, watch } from 'vue'

const keyword = ref('')
const filteredArticles = ref([])

let timer = null   // 定时器 ID

watch(keyword, (newVal) => {
  // 清除上一次的定时器
  clearTimeout(timer)
  // 300ms 内没有新的输入变化，才执行过滤
  timer = setTimeout(() => {
    filteredArticles.value = articles.value.filter(
      a => a.title.includes(newVal) || a.summary.includes(newVal)
    )
  }, 300)
})

<!-- 文件路径：src/views/HomeView.vue -->
<script setup>
import { ref, computed, onMounted } from 'vue'
import BlogCard from '../components/BlogCard.vue'
import CategoryFilter from '../components/CategoryFilter.vue'

const articles = ref([])            // 所有文章
const isLoading = ref(true)
const activeCategory = ref('全部')
const keyword = ref('')             // 搜索关键词

// 提取所有分类
const categories = computed(() => {
  const cats = articles.value.map(a => a.category)
  return ['全部', ...new Set(cats)]
})

// computed 会自动追踪 keyword 和 activeCategory 的变化
// 任何一项变了，过滤结果都会自动重新计算
const filteredArticles = computed(() => {
  let result = articles.value

  // 第一步：按分类过滤
  if (activeCategory.value !== '全部') {
    result = result.filter(a => a.category === activeCategory.value)
  }

  // 第二步：按关键词过滤（搜索标题和摘要）
  if (keyword.value.trim()) {
    const kw = keyword.value.trim().toLowerCase()
    result = result.filter(a =>
      a.title.toLowerCase().includes(kw) ||
      a.summary.toLowerCase().includes(kw)
    )
  }

  return result
})

// 切换分类时不清空搜索，二者叠加工作
function handleCategoryChange(cat) {
  activeCategory.value = cat
}

// 加载数据
onMounted(async () => {
  try {
    const res = await fetch('/posts.json')
    articles.value = await res.json()
  } catch (err) {
    console.error('加载失败', err)
  } finally {
    isLoading.value = false
  }
})
</script>

<template>
  <div class="home">
    <!-- 搜索框 -->
    <div class="search-bar">
      <input
        v-model="keyword"
        type="text"
        placeholder="搜索文章标题或摘要..."
        class="search-input"
      />
      <span v-if="keyword" class="clear-btn" @click="keyword = ''">✕</span>
    </div>

    <!-- 分类筛选 -->
    <CategoryFilter
      :categories="categories"
      :active-category="activeCategory"
      @update-category="handleCategoryChange"
    />

    <!-- 加载 / 空 / 正常 -->
    <p v-if="isLoading">加载中...</p>
    <p v-else-if="filteredArticles.length === 0">没有找到匹配的文章</p>
    <div v-else class="article-grid">
      <BlogCard
        v-for="article in filteredArticles"
        :key="article.id"
        :id="article.id"
        :title="article.title"
        :summary="article.summary"
        :date="article.date"
        :category="article.category"
      />
    </div>
  </div>
</template>

<style scoped>
.home { max-width: 960px; margin: 0 auto; padding: 20px; }

.search-bar {
  position: relative;
  margin-bottom: 20px;
}

.search-input {
  width: 100%;
  padding: 12px 40px 12px 16px;
  border: 2px solid #eee;
  border-radius: 8px;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s;
}

.search-input:focus {
  border-color: #42b883;
}

.clear-btn {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #999;
  font-size: 18px;
}

.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 20px;
}
</style>