import React from 'react'
import Tree from './Tree'
import './styles.scss'

const treeStyles = {
  position: 'absolute',
  top: 20,
  left: 20,
  color: 'white',
  fill: 'white',
  width: '100%',
}

const typeStyles = {
  fontSize: '1em',
  verticalAlign: 'middle',
}

export default function TreeView() {
  return (
    <div className="treeview-main">
      <Tree content="项目经理" type="职业" canHide open style={treeStyles}>
        <Tree
          content="人月神话"
          type={<span style={typeStyles}>🙀</span>}
          canHide
        />
        <Tree content="subtree with children" canHide>
          <Tree content="hello" />
          <Tree content="sub-subtree with children">
            <Tree content="child 1" style={{ color: '#63b1de' }} />
            <Tree content="child 2" style={{ color: '#63b1de' }} />
            <Tree content="child 3" style={{ color: '#63b1de' }} />
          </Tree>
          <Tree content="hello" />
        </Tree>
        <Tree content="hello" canHide />
        <Tree content="hello" canHide />

        <Tree content="subtree with children" canHide>
          <Tree content="hello" />
          <Tree content="sub-subtree with children">
            <Tree content="child 1" style={{ color: '#63b1de' }} />
            <Tree content="child 2" style={{ color: '#63b1de' }} />
            <Tree content="child 3" style={{ color: '#63b1de' }} />
          </Tree>
          <Tree content="hello" />
        </Tree>
      </Tree>

    </div>
  )
}

class TreeSet extends Component {
  state = {
    node: null
  }
  componentDidMount(){
    $.getJSON(`https://api.ourfor.top/job/users/jc?jobName=项目经理`, ({data: {node}})=>{
      this.setState(state => ({
        node
      }));
      console.log('Tree Set',node);
    });
  }
  render(){
    console.log(this.state.node);
    return (
      <div className="treeview-main">
        {extra(this.state.node)}
      </div>
    );
  }
}


function extra(node){
  // 分解n叉树
  console.log(node);
  if(node!==null) {
    if(node.children){
      return (
        <Tree content={node.name} canHide>
          {
            node.children.map((v,i)=>{
              return extra(v);
            })
          }
        </Tree>
      );
    } else {
      return (
        <Tree content={node.name} style={{ color: '#63b1de' }} />
      );
    }    
  }
}

export { TreeSet };