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,
    Button
  } 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 = {
      checkedKeys:[],
    };

    
    componentDidMount() {

        const { dispatch } = this.props;

        let schoolCode  = this.props.match.params.schcode;
        
        this.setState({
          schoolCode:schoolCode
        });

        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 "";
      }

      onCheck = (checkedKeys) => {
        console.log('onCheck', checkedKeys);
        this.setState({ checkedKeys });
      }


      //根据当前选择的对象，删除指定的联系人
      removelkman = () => {
        console.log('removelkman');
      }

      //定义特殊操作的按钮流程
      specopation = (action) => {
        console.log('specatcion'+action);
      }


    render(){

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

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

        return <div>    
            
            <Row gutter={24}>
            <Col {...topColResponsiveProps}>
            <ChartCard
              bordered={false}
              title={`学校名称-(${this.state.schoolCode})`}
              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}
                          onCheck={this.onCheck}
                          checkedKeys={this.state.checkedKeys}
                          >
                          {this.renderTreeNodes(groups)}
                        </Tree>
                       </div>
                    </Col>
                    <Col xl={8} lg={24} md={24} sm={24} xs={24}>
                       <div> 
                          <ChartCard
                              bordered={false}  
                              title='操作/功能区'     
                              contentHeight={86} >
                                <div>
                                     <Button style={{ marginLeft: 8 }} onClick={this.removelkman}>删除联系人</Button>
                                     <Button style={{ marginLeft: 8 }} onClick={() => this.specopation(1)}>头像强刷</Button>
                                     <Button style={{ marginLeft: 8 }} onClick={() =>this.specopation(2)}>通讯录强刷</Button>
                                </div>
                          </ChartCard>
                       </div>
                    </Col>
            </Row>
        </div>;
    }

}