import React, { Component, useEffect } from 'react';
import './App.css';
import { observable, computed, action } from 'mobx';
import { observer,Provider,inject } from 'mobx-react'

//数据结构
class Todo {

@observable todos = [
    {
        id: 1,
        title: '任务1',
        finished: true
    }, {
        id: 2,
        title: '任务2',
        finished: false
    }
];

@computed get unfinishedTodoCount() {
    return this.todos.filter(todo => !todo.finished).length;
}

@action delTodo(id) {
    console.log('删除');
    this.todos = this.todos.filter(todo => todo.id !== id);
    console.log(this.todocs);
}

@action updateTodo(id,done) {
    console.log('update');
    const newTodos = this.todos.map((todoObj)=>{
        if(todoObj.id === id) return {...todoObj,done}
        else return todoObj
    })
    this.todos = newTodos;
}

}

@observer
class TodoListView extends Component {

updateTodo = (todoId,done) => {
    this.props.todoList.delTodo(todoId,done)
}
delTodo = (todoId) => {
    this.props.todoList.delTodo(todoId)
}
render() {
    return (
        <div>
            <ul>
                {this.props.todoList.todos.map(todo =>
                    <TodoView todo={todo} key={todo.id} delTodo={this.delTodo} updateTodo={this.updateTodo} />
                )}
            </ul>
            未完成任务数：{this.props.todoList.unfinishedTodoCount}
        </div>
    )

}

}

@observer
class TodoView extends Component {

render() {
    // return <div>{this.props.todo.title}</div>;
    var todo = this.props.todo;
    return (
        <li>
            <label htmlFor="">
                <input
                    type="checkbox"
                    checked={todo.finished}
                    onChange={() => this.props.updateTodo(todo.id,todo.finished)}
                />

                {todo.title}
            </label>
            <button onClick={() => this.props.delTodo(todo.id)}>del</button>
        </li>
    )
}

}

const todoList = new Todo();

const ToDoApp = inject('todoList')(observer(({todoList}) => {

useEffect(() => {
    console.log('hhhh');
})
return (
    <div>
        <TodoListView todoList={todoList}/>
    </div>
)

}))

class App extends Component{

render(){
    return (
        <Provider todoList={todoList}>
            <div>
                <ToDoApp />
            </div>
        </Provider>
        
    );
}

}
export default App;