2019-10-23

var storage-KEY = 'todo'
//有内容展示存储的 可能都要事先获取本地以前用户的内容
// 这个对象里面存放 对本地存储的 所有操作方法
var todoStorage = {
  fetch: function(){
//     todos 可看看在本地的内容 没有的默认形式为【】
//     JSON.parse( ) 获取到的都是字符串  所以当获取属性对应值时  转换成 对象 
    var todos = JSON.parse(localStorage.getItem(storage-KEY) || '[]')
    todos.forEach(function(todo, index){
      todo.id = index
    })
    return todos  //调用fetch()  返回todos
    
  },
  save: function(todos){ //传入从参数 
    localStorage.setItem(storage-KEY, JSON.stringify(todos))
//     setItem(key, value) value 得转换成字符串
  }
}



var filters = {
  all: function(todos){ //这个地方写入 todos 可以传入参数用
    return todos  //return 有时候就是 我要在另一个地方执行这个函数 获取todos  取用另一个变量去接受他  使用或者干什么
  },
//   未完成的  一直ｒｅｔｕｒｎ　直到可以吧最后的结果ｒｅｔｕｒｎ出来
  active: function(todos){
    return  todos.filter(function(todo){
      return !todo.completed
    })
  },
  
  completed: function(todos){
    return 　todos.filter(function(todo){
      return todo.completed
    })
  }
}





var app = new App({
  data: {
    todos: todoStorage.fetch(),
    visibility: 'all'
  },
  //为什么要用watch  有什么用途
  watch: { //监听todos  随时保存最新的todos
    todos: {
      handler: function(todos){
        todoStorage.save(todos)
      },
      deep: true
    }
  },
  computed: {
     filteredTodos: function(){  //有封装一个函数 因为三个函数有些相像  所有 只把不固定变量给提出来 剩下的为相同部分
       return filters[this.visibility](this.todos)
     },
    remaining: function(){ //显示没有完成的todo的个数
      return filters.active(this.todos).length
    },
    allDone: { //全选  全选 为没有选中的也被全部选中
      get: function(){
        return this.remianing === 0   //返回boolean 因为v-model ="需要true 或 false"
      },
      set: function(value){ //全选直接改变一些状态的值
        this.todos.forEach(function(todo){
          todo.completed = value
        })
      }
    }
  },
  filters: {//显示 数后面的 副词的形式
    pluralize: function(n){
        return n===1? 'item': 'items'
    }
  },
  methods: {
    addTodo: function(){
      //点击enter 后 内容添加到列表
      //判断存在 并去掉空格
      var value = this.newTodo && this.newTodo.trim()
      if(!value){
        return
      }
      this.todos.push({
        id: todoStorage.uid++,
        title: value,
        completed: false
        
      })
      this.newTodo = '' //别忘了得还原 还得用它
      
    },
    removeTodo: function(todo){ //删除todo固定操作
       this.todos.splice(this.todos.indexOf(todo), 1)
    },
    editTodo: function(){
      
    },
    doneEdit: function(){
      
    }
  }
})

// hash变化监听

function onHashChange(){ 
  // 获取url知道当前的ｈａｓｈ
  var visibility = window.location.hash.replace(/#\/?/, '')
//   repalce（）方法 获取hahs ?????
  if(filters[visibility]){
    app.visibility = visibility  //根据hahs  确定当前visibility是谁
    
  }else{
    window.location.hash = ''
    app.visibility = 'all'
  }
}
//hashchange 是一个事件名
window.addEventListener('hashchange', onHashChange )

app.$mount('.todoapp')