interface toDo{
  todo:string,
  flag:boolean
}
@Entry
@Component
struct Page348 {
  @State message: string = 'Hello World';
  @State toDoList:toDo[] = []
  build() {
    Column(){
      Row(){
        TextInput({text:$$this.message}).layoutWeight(1)
        Button('添加').onClick((event: ClickEvent) => {
          this.toDoList.push({
            todo:this.message,
            flag:false
          })
          this.message = ''
        })
      }
      ForEach(this.toDoList,(item:toDo,index:number)=>{
        Row(){
          Checkbox().shape(CheckBoxShape.ROUNDED_SQUARE).select(item.flag).onClick(()=>{
            this.toDoList[index] = {
              todo:item.todo,
              flag:!item.flag
            }
          })
          Text(item.todo).fontSize(30).decoration({type:this.toDoList[index].flag===true?TextDecorationType.LineThrough:TextDecorationType.None})
            .fontColor(this.toDoList[index].flag===true?'#ccc':'#000')
        }
      })
      Text(this.toDoList.filter((item:toDo)=>item.flag).length.toString())
    }
    .height('100%')
    .width('100%')
  }
}