import styles from './schoolmgr.less'

import React, { Component } from 'react';
import { connect } from 'dva';

import {
    Row,
    Col,
    Icon,
    Card,
    Tabs,
    Table,
    Radio,
    DatePicker,
    Tooltip,
    Menu,
    Dropdown,
    Tree
  } from 'antd';

import {
    ChartCard,
    yuan,
    MiniArea,
    MiniBar,
    MiniProgress,
    Field,
    Bar,
    Pie,
    TimelineChart,
} from '../../components/Charts';

import Trend from '../../components/Trend';

import { R_OK } from 'constants';

import numeral from 'numeral';

const TreeNode = Tree.TreeNode;

@connect(({ linkman, loading }) => ({
    linkman,
    loading: loading.models.linkman,
  }))
export default class schoolmgr extends Component{

    state = {
      groups: [
          { title: 'Expand to load', key: '0' },
          { title: 'Expand to load', key: '1' },
          { title: 'Tree Node', key: '2', isLeaf: true },
        ],
    };

    
    componentDidMount() {

        const { dispatch } = this.props;
    
        dispatch({
          type: 'linkman/groups',
        });
      }


      onLoadData = (treeNode) => {
        return new Promise((resolve) => {
          if (treeNode.props.children) {
            resolve();
            return;
          }
          setTimeout(() => {
            treeNode.props.dataRef.children = [
              { title: 'Child Node', key: `${treeNode.props.eventKey}-0` },
              { title: 'Child Node', key: `${treeNode.props.eventKey}-1` },
            ];
            this.setState({
              treeData: [...this.state.treeData],
            });
            resolve();
          }, 1000);
        });
      }


      renderTreeNodes = (data) => {
        return data.map((item) => {
          if (item.children) {
            return (
              <TreeNode title={item.title} key={item.key} dataRef={item}>
                {this.renderTreeNodes(item.children)}
              </TreeNode>
            );
          }
          return <TreeNode {...item} dataRef={item} />;
        });
      }


    render(){

        const topColResponsiveProps = {
            xs: 24,
            sm: 12,
            md: 12,
            lg: 12,
            xl: 6,
            style: { marginBottom: 24 },
          };

        return <div>    
            
            <Row gutter={24}>
            <Col {...topColResponsiveProps}>
            <ChartCard
              bordered={false}
              title="学校名称"
              action={
                <Tooltip title="指标说明">
                  <Icon type="info-circle-o" />
                </Tooltip>
              }
              total={`${numeral(12423).format('0,0')}`}
              footer={<Field label="关注人员" value={`${numeral(12423).format('0,0')}`} />}
              contentHeight={46}
            >
              <Trend flag="up" style={{ marginRight: 16 }}>
                关注数<span className={styles.trendText}>--%</span>
              </Trend>
              <Trend flag="down">
                取关数<span className={styles.trendText}>--%</span>
              </Trend>
            </ChartCard>
          </Col>
            </Row>
            <Row gutter={24}>
                    <Col xl={16} lg={24} md={24} sm={24} xs={24}>
                      <div >
                      <Tree checkable loadData={this.onLoadData}>
                          {this.renderTreeNodes(this.state.groups)}
                        </Tree>
                       </div>
                    </Col>
                    <Col xl={8} lg={24} md={24} sm={24} xs={24}>
                       <div> two </div>
                    </Col>
            </Row>
        </div>;
    }

}