<template>
    <section class="todoapp">
      <!-- header -->
      <header class="header">
        <input class="new-todo" autocomplete="off" placeholder="Todo List" @keyup.enter="addTodo">
      </header>
      <!-- main section -->
      <section v-show="todos.length" class="main">
        <input id="toggle-all" :checked="allChecked" class="toggle-all" type="checkbox" @change="toggleAll({ done: !allChecked })">
        <label for="toggle-all" />
        <ul class="todo-list">
          <todo
            v-for="(todo, index) in filteredTodos"
            :key="index"
            :todo="todo"
            @toggleTodo="toggleTodo"
            @editTodo="editTodo"
            @deleteTodo="deleteTodo"
          />
        </ul>
      </section>
      <!-- footer -->
      <footer v-show="todos.length" class="footer">
        <span class="todo-count">
          <strong>{{ remaining }}</strong>
          {{ remaining | pluralize('item') }} left
        </span>
        <ul class="filters">
          <li v-for="(val, key) in filters" :key="key">
            <a :class="{ selected: visibility === key }" @click.prevent="visibility = key">{{ key | capitalize }}</a>
          </li>
        </ul>
        <!-- <button class="clear-completed" v-show="todos.length > remaining" @click="clearCompleted">
          Clear completed
        </button> -->
      </footer>
    </section>
  </template>
  
  <script>
  import Todo from './Todo.vue'
  
  const STORAGE_KEY = 'todos'
  const filters = {
    all: todos => todos,
    active: todos => todos.filter(todo => !todo.done),
    completed: todos => todos.filter(todo => todo.done)
  }
  const defalutList = [
    { text: 'star this repository', done: false },
    { text: 'fork this repository', done: false },
    { text: 'follow author', done: false },
    { text: 'vue-element-admin', done: true },
    { text: 'vue', done: true },
    { text: 'element-ui', done: true },
    { text: 'axios', done: true },
    { text: 'webpack', done: true }
  ]
  export default {
    components: { Todo },
    filters: {
      pluralize: (n, w) => n === 1 ? w : w + 's',
      capitalize: s => s.charAt(0).toUpperCase() + s.slice(1)
    },
    data() {
      return {
        visibility: 'all',
        filters,
        // todos: JSON.parse(window.localStorage.getItem(STORAGE_KEY)) || defalutList
        todos: defalutList
      }
    },
    computed: {
      allChecked() {
        return this.todos.every(todo => todo.done)
      },
      filteredTodos() {
        return filters[this.visibility](this.todos)
      },
      remaining() {
        return this.todos.filter(todo => !todo.done).length
      }
    },
    methods: {
      setLocalStorage() {
        window.localStorage.setItem(STORAGE_KEY, JSON.stringify(this.todos))
      },
      addTodo(e) {
        const text = e.target.value
        if (text.trim()) {
          this.todos.push({
            text,
            done: false
          })
          this.setLocalStorage()
        }
        e.target.value = ''
      },
      toggleTodo(val) {
        val.done = !val.done
        this.setLocalStorage()
      },
      deleteTodo(todo) {
        this.todos.splice(this.todos.indexOf(todo), 1)
        this.setLocalStorage()
      },
      editTodo({ todo, value }) {
        todo.text = value
        this.setLocalStorage()
      },
      clearCompleted() {
        this.todos = this.todos.filter(todo => !todo.done)
        this.setLocalStorage()
      },
      toggleAll({ done }) {
        this.todos.forEach(todo => {
          todo.done = done
          this.setLocalStorage()
        })
      }
    }
  }
  </script>
  
  <style lang="scss">
    @import './index.scss';
  </style>