<template>
  <div class="app">
    <div>
      <button @click="isok = false">未完成</button>
      <button @click="isok = true">已完成</button>
    </div>
    <div v-show="!isok">
      <div v-for="(item,index) in list" :key="index" v-show="item.isok == false">
        <input type="checkbox" name="list" @click="setstate(index)" v-bind:id="'f-' + index" :checked="item.isok" /><label :for="'f-' + index" @click="setstate(index)">{{item.name}}</label><button v-on:click="remove(index)">删除</button>
      </div>
    </div>
    <div v-show="isok">
      <div v-for="(item,index) in list" :key="index" v-show="item.isok == true">
        <input type="checkbox" name="list" @click="setstate(index)" :id="'t-' + index" :checked="item.isok" /><label @click="setstate(index)" :for="'t-' + index">{{item.name}}</label><button @click="remove(index)">删除</button>
      </div>
    </div>
    <div>
      添加任务：<input type="text" v-model="todoname" @keyup.enter="add" /><button @click="add">添加</button>
    </div>
  </div>
</template>

<script>

export default {
  name: 'App',
  components: {
  },
  data(){
    return {
      isok:false,
      list:[{
        name:"默认代办",
        isok:false
      }],
      todoname:"",
      time:0
    }
  },
  methods:{
    add(){
      this.list.push({name: this.todoname,isok: false});
      this.todoname = "";
      localStorage.setItem("list",JSON.stringify(this.list))
    },
    remove(index){
      this.list.splice(index,1),
      localStorage.setItem("list",JSON.stringify(this.list))
    },
    setstate(index){
      if(this.time){
        clearTimeout(this.time)
        this.time = 0;
      }
      this.time = setTimeout(()=>{
        this.list[index].isok = !this.list[index].isok;
        this.$forceUpdate();
        localStorage.setItem("list",JSON.stringify(this.list))

      },100)
    }
  },
  mounted(){
    let list = localStorage.getItem("list");
    this.list = list ? JSON.parse(list) : [{
        name:"默认代办",
        isok:false
      }]
  },
  watch:{
    
  }
}
</script>

<style>
.app{
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>
