import React,{Component} from 'react';

import '../assets/css/index.css';

class Todolist extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            list:[
                {
                    title:'ionic',
                    checked:true
                },
                {
                    title:'nodejs',
                    checked:false
                }
                ,
                {
                    title:'egg.js',
                    checked:true
                } ,
                {
                    title:'vue',
                    checked:false
                }
            ]
        };
    }   

    addData=(e)=>{
        //按下回車的時候在增加

        if(e.keyCode==13){

                
            // alert(title);

            let title=this.refs.title.value;
            let tempList=this.state.list;

            tempList.push({
                title:title,
                checked:false
            })
            //改變後的值賦值給list

            this.setState({

                list:tempList
            })


            //表單置為空
            this.refs.title.value='';

        }
    }
    checkboxChage=(key)=>{

        // alert('111');
        let tempList=this.state.list;

        tempList[key].checked=!tempList[key].checked;


        this.setState({

            list:tempList
        })


    }
    removeData=(key)=>{

        let tempList=this.state.list;


        tempList.splice(key,1);


         this.setState({

            list:tempList
        })



    }
    render() {
        return (
            <div>
               
                <header className="title">TodoList: 　<input ref="title" onKeyUp={this.addData} /> </header>

                <h2>待辦事項</h2>

                <hr />

                <ul>
                    {
                        this.state.list.map((value,key)=>{

                            if(!value.checked){

                                return (

                                    <li>

                                        <input type="checkbox" checked={value.checked} onChange={this.checkboxChage.bind(this,key)} />

                                        {value.title}


                                        -- <button onClick={this.removeData.bind(this,key)}>刪除</button>
                                    </li>
                                )
                            }

                        })


                    }
                </ul>           



                <h2>已完成事項</h2>

                <hr />
                <ul>
                    {
                        this.state.list.map((value,key)=>{

                            if(value.checked){

                                return (

                                    <li>

                                        <input type="checkbox" checked={value.checked} onChange={this.checkboxChage.bind(this,key)} />

                                        {value.title}


                                        -- <button onClick={this.removeData.bind(this,key)}>刪除</button>
                                    </li>
                                )
                            }

                        })
                    }
                </ul>    


            </div>
        );
    }
}
export default Todolist;