import React from 'react'
import '@/assets/css/todoList.css'

export default class todo extends React.Component{
  constructor(props){
    super(props)
    this.state = {
      doingList: [],// 正在进行的任务列表
      task: '', // 任务名称
      doneList: [] // 已经完成的任务列表
    }
  }
  // 将当前事件源的 value 值赋给传入的参数 task
  formChange(key, e){
    this.setState({
      [key]: e.target.value
    })
  }
  // 添加任务
  addTodolist(e){
    let { doingList, task } = this.state
    if(task != ''){
      if(e.keyCode == 13){
        var arr = doingList
        arr.push({id: Date.now(), title: task})
        this.setState({
          doingList: arr,
          task: ''
        })
      }
    }
  }
  // 页面列表渲染
  init(list){
    let teskList = list.map( (ele, index) => (
      <li key={ele.id}>
        <span onClick={this.move.bind(this, list, ele, index)}></span>
        <input 
          value={ele.title}
          onChange={this.formChange.bind(this, 'ele.title')} />
        <a onClick={this.delCurrentTast.bind(this, list, index)}>-</a>
      </li>
    ))
    return teskList
  }
  // 删除当前任务
  delCurrentTast(list, index, e){
    let { doingList, doneList } = this.state
    list.splice(index, 1)
    this.setState({
      doingList,
      doneList
    })
  }
  // 改变任务状态
  move(list, item, index, e){
    let { doingList, doneList} = this.state
    if(list == doingList){
      doingList.splice(index, 1)
      doneList.unshift(item)
    } else {
      doneList.splice(index, 1)
      doingList.push(item)
    }
    this.setState({
      doingList,
      doneList,
    })
  }
  render(){
    let { doingList, task, doneList } = this.state
    return(
      <div id="box">
        <div id="header">
          <div className="header_wrap clear_fix">
            <label htmlFor="" className="float_l">
              ToDoList
            </label>			
            <input
              value={task}
              onChange={this.formChange.bind(this, 'task')}
              type="text"
              className="float_r"
              placeholder="添加ToDo"
              onKeyUp={this.addTodolist.bind(this)} />
          </div>
        </div>
        <section>
          <div className="con">
            <div className="doing_box">
              <div className="doing_tit clear_fix">
                <h2 className="float_l">正在进行</h2>
                <div className="doing_count float_r">{doingList.length}</div>
              </div>
              <ul className="doing_info">
                {
                  this.init(doingList)
                }
              </ul>
            </div>
            <div className="done_box">
              <div className="done_tit clear_fix">
                <h2 className="float_l">已经完成</h2>
                <div className="done_count float_r">{doneList.length}</div>
              </div>
              <ul className="done_info">
                {
                  this.init(doneList)
                }
              </ul>
            </div>
          </div>
        </section>
        <div id="footer">
          <div className="footer_wrap">
            Copyright © 2014 todolist.cn 
          </div>
        </div>
      </div>
    )
  }
}