import React, { Component } from "react";
import { CHANGE_INPUT,ADD_ITEM,DELETE_ITEM} from "./store/actionsTypes";
import store from "./store/index";
import TotoListUI from './TotoListUI'
// import axios from 'axios'
// const https = 'https://www.easy-mock.com/mock/5cfcce489dc7c36bd6da2c99/xiaojiejie/getList'


// const Arrdata = ["kong"];
class TotoList extends Component {
  constructor(props) {
    super(props);
 
    this.state = store.getState();
    console.log(store.getState());
    // this.changeInputValue = this.changeInputValue.bind(this)
    //  this.storeChange = this.storeChange.bind(this);
  }
 
  storeChange() {
    this.setState(store.getState());
  }
  changeInputValue(e) {
    // console.log(e.target.value)
    const action = {
      type: CHANGE_INPUT,
      value: e.target.value,
    };

    store.dispatch(action);
  }
  addValue() {
    // console.log("dianjile ");
    const action = {
      type: ADD_ITEM,
    };
    store.dispatch(action);
  }
  deleteItem(index) {
    // console.log(index)
    const action = {
      type: DELETE_ITEM,
      index,
    };
    store.dispatch(action);
  }
  componentDidMount() {
    store.subscribe(() => {
      console.log("change",store.getState())
      this.storeChange();
    });
    // axios.get('https://www.easy-mock.com/mock/5cfcce489dc7c36bd6da2c99/xiaojiejie/getList').then((res) =>{
    //   console.log(res)
    // })
  }
  render() {
    return (
      <TotoListUI
      inputValue={this.state.inputValue}
      changeInputValue={this.changeInputValue}
      addValue={this.addValue}
      list={this.state.list}
      deleteItem={this.deleteItem}
      />
    );
  }
}
export default TotoList;