<template>
  <div>
    <h1>{{ title }}</h1>
    <!-- 数据绑定 -->
    <h2>{{ title }}</h2>
    <!-- v-model 双向数据绑定 -->
    <!-- placeholder 是输入框的提示文本 -->
    <!-- <input type="text" v-model="title" placeholder="请输入事件" /> -->
    <!-- @是 v-bind 的简写，不用addEventListener绑定事件 -->
    <!-- @event-name:enter 监听键盘输入，当按下回车的时候调用addTodo事件 -->
    <input type="text" v-model="title" @keydown.enter="addTodo"/>
    <!-- v-if 条件渲染指令 -->
    <ul v-if="todos.length">
      <!-- key作为唯一属性 -->
      <li v-for="todo in todos" :key="todo.id">
        <input type="checkbox" v-model="todo.done">
        <!-- : 是v-bind的简写,js表达式，通过:class动态绑定类名 -->
        <!-- vue 有一定的学习API，对用户友好，好上手 -->
        <!-- {done:todo.done} 意思是当todo.done为true时，添加done类名，否则不添加 -->
        <span :class="{done:todo.done}">{{ todo.title }}</span>
      </li>
    </ul>
    <div v-else>
      暂无计划
    </div>

    <div>
      全选<input type="checkbox" v-model="allDone">

      <!-- {{ 数据绑定 }} 内部如果是表达式，则为表达式结果绑定 -->
      <!-- todos.filter(todo => !todo.done)意思是todos中done属性不为true的 -->
      <!-- {{ todos.filter(todo => !todo.done).length }} 件未完成任务 / {{ todos.length }} 件总任务 -->

      <!-- 但是过于繁琐，可导入computed计算属性 -->
      {{ active }} 件未完成任务 / {{ todos.length }} 件总任务
    </div>
  </div>
</template>

<script setup>
  // 业务是页面上要动态展示标题，且编辑标题
  // vue focus 标题数据业务，修改数据，余下的dom更新由vue自动处理
  // setup vue3 composition 组合式API
  // vue2 options API
// ref 响应式数据
import { ref } from 'vue';
// computed 用于计算属性
import { computed } from 'vue';
const title = ref("Todos任务清单");
const todos = ref([
  {
    id: 1,
    title: '打王者',
    done: false
  },
  {
    id: 2,
    title: '吃饭',
    done: true
  },
  {
    id: 3,
    title: '睡觉',
    done: false
  },
  {
    id: 4,
    title: '学习vue',
    done: false
  }
]);

// focus 数据业务
// 将文本框内的内容添加到todos中
const addTodo = () =>{
  if(!title.value) return;
  todos.value.push({
    id:Math.random(),
    title:title.value,
    done:false
  })
  title.value = '';
}

// computed依赖于todos 响应式数据的计算属性
// 形式上是函数（计算过程），结果（计算属性）返回
// 也是响应式的，依赖于todos变化而变化
// computed 缓存，性能优化，只有todos变化时才会重新计算
const active = computed(() => {
  return todos.value.filter(todo => !todo.done).length;
})

// computed 高级技巧
// get set 属性的概念
// get 读取属性时调用 set 设置属性时调用
// 全选功能
const allDone = computed({
  // 读取todos中done属性全部为true时，allDone为true
  get(){
    return todos.value.every(todo => todo.done);
  },
  // 设置todos中done属性为传入的值
  set(value){
    todos.value.forEach(todo => {
      todo.done = value;
    })
  }
})
</script>

<style scoped>
.done {
  color: gray;
  /* text-decoration: line-through; 是划掉线的意思 */
  text-decoration: line-through;
}
</style>