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,
    Input
  } 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 { Search } = Input;
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) => {
        
        let schoolCode  = this.props.match.params.schcode;

        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,
                     schoolCode:schoolCode
                    },
          });

          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)=>{
              let showninfo = item.name+" # "+item.userid;
              return (<TreeNode isLeaf title={showninfo} key={item.userid} dataRef={item}/>);
           });
         }
         else 
            return "";
      }

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


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

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

      //查找目标的用户
      findUser = (content)=>{

        if(content && content.length>0){
            const {dispatch } = this.props;
            const {schoolCode} = this.state;
            dispatch({
              type: 'linkman/findUser',
              payload:{
                phone:content,
                schoolCode:schoolCode
              },
            });
        }

      }

      //显示对应查询用户的结果信息
      renderFoundUserResult(){
        const {linkman:{userFoundResult}} = this.props;
        if(userFoundResult){
          return (<div>
                  <span><strong>检索结果：</strong></span>
                      <div>
                          <span>uid:  {userFoundResult.userid}</span><br/>
                          <span>姓名:  {userFoundResult.name}</span><br/>
                          <span>角色:  {userFoundResult.position}</span><br/>
                          <span>部门:  {userFoundResult.department}</span><br/>
                      </div>
                  </div>);
        }else{
          return (<div>
                      
          </div>);
        }
        
      }

    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={14} lg={24} md={24} sm={24} xs={24}>
                    <ChartCard title='企业号通讯录结构'>
                      <div >
                        <div><span>可以展开</span></div>
                      <Tree 
                          checkable 
                          loadData={this.onLoadData}
                          onCheck={this.onCheck}
                          checkedKeys={this.state.checkedKeys}
                          >
                          {this.renderTreeNodes(groups)}
                        </Tree>
                       </div>
                       </ChartCard>
                    </Col>
                    <Col xl={10} lg={24} md={24} sm={24} xs={24}>
                    <ChartCard
                              bordered={true}  
                              title='信息检索'     
                              >                               
                                <Search
                                        className={styles.extraContentSearch}
                                        placeholder="请输入收集号码"
                                        onSearch={this.findUser}
                                      />
                                {this.renderFoundUserResult()}
                          </ChartCard>   
                          <br/>
                          <ChartCard
                              bordered={false}  
                              title='操作/功能区'     
                              contentHeight={46} >
                                <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>
                          
                      
                    </Col>
            </Row>
        </div>;
    }

}