import React from 'react';
import { TreeGrid, GridColumn } from 'rc-easyui';

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      data: null
    }
  }
  componentDidMount() {
    this.getData().then(data => {
      this.setState({ data: data })
    })
  }
  handleRowExpand(row) {
    if (!row.children) {
      this.getData(row.id).then(data => {
        row.children = data;
        this.setState({})
      })
    }
  }
  getData(id = 0) {
    const url = 'https://www.jeasyui.com/demo/main/treegrid3_getdata.php';
    return new Promise((resolve, reject) => {
      fetch(url, {
        method: 'post',
        mode: 'cors',
        headers: {
          'Accept': 'application/json, text/plain, */*',
          'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
        },
        body: 'id=' + id
      }).then(res => {
        if (res.status === 200) {
          return res.json();
        } else {
          throw new Error();
        }
      }).then(data => {
        resolve(data);
      }).catch(err => {
        reject(err);
      })
    })
  }
  render() {
    const formatDollar = ({value}) => {
      return value ? '$'+value : ''
    }
    return (
      <div>
        <h2>Lazy Load</h2>
        <TreeGrid
          style={{ height: 250 }}
          data={this.state.data}
          idField="id"
          treeField="name"
          onRowExpand={this.handleRowExpand.bind(this)}
        >
          <GridColumn field="name" title="Name" width="40%"></GridColumn>
          <GridColumn field="quantity" title="Quantity" align="right"></GridColumn>
          <GridColumn field="price" title="Price" align="right" render={formatDollar}></GridColumn>
          <GridColumn field="total" title="Total" align="right" render={formatDollar}></GridColumn>
        </TreeGrid>
      </div>
    );
  }
}

export default App;