<template>
  <main class="page">
    <header class="hero">
      <p class="eyebrow">Vue 3 + Vite</p>
      <h1>快速上手示例</h1>
      <p class="sub">
        左边计数器，右边简单待办。直接改这里即可开始玩。
      </p>
    </header>

    <section class="grid">
      <article class="card">
        <header class="card__title">
          <h2>计数器</h2>
          <span class="tag">可组合</span>
        </header>
        <p class="value">{{ count }}</p>
        <div class="actions">
          <button class="ghost" @click="change(-1)">-1</button>
          <button class="primary" @click="change(1)">+1</button>
          <button class="ghost" @click="reset">重置</button>
        </div>
      </article>

      <article class="card">
        <header class="card__title">
          <h2>待办清单</h2>
          <span class="tag success">示例</span>
        </header>

        <form class="todo__form" @submit.prevent="addTodo">
          <input
            v-model="draft"
            type="text"
            placeholder="输入要做的事..."
            autocomplete="off"
          />
          <button class="primary" type="submit">添加</button>
        </form>

        <ul class="todo__list" v-if="todos.length">
          <li v-for="item in todos" :key="item.id">
            <label>
              <input v-model="item.done" type="checkbox" />
              <span :class="{ done: item.done }">{{ item.text }}</span>
            </label>
            <button class="ghost small" type="button" @click="removeTodo(item.id)">
              删除
            </button>
          </li>
        </ul>
        <p v-else class="empty">暂无任务，添加一个吧！</p>
      </article>
    </section>
  </main>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(1);
const change = (delta) => {
  count.value += delta;
};
const reset = () => {
  count.value = 1;
};

const draft = ref('');
const todos = ref([
  { id: 1, text: '试着勾选或删除我', done: false },
  { id: 2, text: '在右上角编辑样式', done: true },
]);

const addTodo = () => {
  const text = draft.value.trim();
  if (!text) return;
  todos.value.push({
    id: Date.now(),
    text,
    done: false,
  });
  draft.value = '';
};

const removeTodo = (id) => {
  todos.value = todos.value.filter((item) => item.id !== id);
};
</script>
