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';
import linkman from '../../../mock/linkman';

const TreeNode = Tree.TreeNode;

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

    state = {

    };

    
    componentDidMount() {

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

      }


      onLoadData = (treeNode) => {
        return new Promise((resolve) => {
          if (treeNode.props.children) {
            resolve();
            return;
          }

          const { dispatch } = this.props;
          let groupid  = treeNode.props.eventKey;
          dispatch({
            type: 'linkman/lklist',
            payload:{groupid:groupid},
          });

          resolve();
          return;
        });
      }


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

      renderTreeLefs = (groupid)=>{
         const {linkman:{linkmanMap}} = this.props;
         if(linkmanMap['g_'+groupid]){
           return linkmanMap['g_'+groupid].map((item)=>{
              return (<TreeNode isLeaf title={item.name} key={item.id} dataRef={item}>
              </TreeNode>);
           });
         }
         else 
            return "";
      }


    render(){

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

        const {linkman:{groups}} = this.props;

        console.log('render()');

        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 >
                        <div><span>企业号通讯录结构</span></div>
                      <Tree checkable loadData={this.onLoadData}>
                          {this.renderTreeNodes(groups)}
                        </Tree>
                       </div>
                    </Col>
                    <Col xl={8} lg={24} md={24} sm={24} xs={24}>
                       <div> two </div>
                    </Col>
            </Row>
        </div>;
    }

}