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,
    message,
    Avatar
  } 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;
const { Meta } = Card;

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

    state = {
      checkedKeys:[],
      groupsMap:{},
    };

    
    componentDidMount() {

        const { dispatch } = this.props;

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

        dispatch({
          type: 'linkman/groups',
          payload:{schoolCode:schoolCode},
        });

        dispatch({
          type: 'linkman/schDetail',
          payload:{schoolCode:schoolCode},
        });

        dispatch({
          type: 'wxdata/fetch',
          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;
        });
      }
     
      //通讯录分组信息的排序控制
      groupsort = (a, b) => ( a.order > b.order ? 1:-1 )
      
      //加载所有数节点
      renderTreeNodes = (data) => {
        return data.map((item) => {
          if (item.children) {
            return (
              <TreeNode title={item.name} key={item.id} dataRef={item}>
                {this.renderTreeNodes(item.children.sort(this.groupsort))}
              </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]){
           let templist = linkmanMap['g_'+groupid].sort((a, b) => ( a.name > b.name ? -1:1 ));
           return templist.map((item)=>{
              let status = item.status;
              let showninfo = item.name+" # "+item.userid+"  "+(status==1?"已关注":"未关注");
              return (<TreeNode isLeaf title={showninfo} key={`m_${item.userid}`} dataRef={item}/>);
           });
         }
         else 
            return "";
      }

      //响应节点选中的事件
      onCheck = (checkedKeys) => {
        console.log('onCheck', checkedKeys);
        this.setState({ checkedKeys:checkedKeys });
        console.log(this.state);
      }

      //定义特殊操作的按钮流程
      specopation = (action) => {
        console.log('specatcion'+action);
        const {dispatch} = this.props;
        let schoolCode  = this.props.match.params.schcode;    
      
        if(action==1){
          //删除联系人的操作
          const {checkedKeys} = this.state;
          let manids = '';
          let index = '';
          let uid = '';
          
          for(index in checkedKeys){
              uid = checkedKeys[index];
              if(uid.indexOf('m_')==0){
                manids+=","+uid.slice(2);
              }
          }

          if(manids.length>0){
            console.log(manids.slice(1));
            dispatch({
              type: 'linkman/sysOperation',
              payload:{
                       schoolCode:schoolCode,
                       CMD:'lk_del',
                       content:manids.slice(1)
                      },
              callback: () => {
                        message.success('已选中的联系人删除成功了');
                        this.setState({
                          checkedKeys:[],
                          linkmanMap:{ }
                        });
                      },
            });

          }
          //end 联系人删除操作
        }else if(action==2){
          //触发操作事件
          dispatch({
            type: 'linkman/sysOperation',
            payload:{
                     schoolCode:schoolCode,
                     CMD:'force_update_lk',
                     content:""
                    },
          });
        }else if(action==3){
          //触发操作事件
          dispatch({
            type: 'linkman/sysOperation',
            payload:{
                     schoolCode:schoolCode,
                     CMD:'force_update_cache',
                     content:""
                    },
          });

        }

      }

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

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

      }

      //显示用户所处的分组信息
      renderUserBelongGroupMath=(departments)=>(
         departments.map((deparmentid) =>{
            const {groupsMap} = this.state;
            return <em key={`g_${deparmentid}`}><font size="2" color="blue">{groupsMap[deparmentid]},</font></em>;
         })
      )

      //显示信息优化
      renderFindUserResultBlock=(item,content)=>(
        <span><font size="2" color="black">{item}:</font><font size="2" color="blue">{content}</font> </span>
      )

      //显示对应查询用户的结果信息
      renderFoundUserResult(){
        const {linkman:{userFoundResult}} = this.props;
        if(userFoundResult){
          return (<div className={styles.finduserBlock}>
                      <span><font size="3" color="black">检索结果：</font></span>
                      <div>
                          <Avatar src={userFoundResult.avatar}/><br/>
                          {this.renderFindUserResultBlock("用户  uid",userFoundResult.userid)}<br/>
                          {this.renderFindUserResultBlock("姓     名",userFoundResult.name)}<br/>
                          {this.renderFindUserResultBlock("状     态",(userFoundResult.status==1?"已关注":"未关注"))}<br/>
                          {this.renderFindUserResultBlock("角     色",userFoundResult.position)}<br/>
                          <span><font size="2" color="black">所在的部门:</font>{this.renderUserBelongGroupMath(userFoundResult.department)}</span><br/>
                      </div>
                  </div>);
        }else{
          return (<div>
                      
          </div>);
        }
        
      }

    //处理分组到临时目录
    cacheGroupsInfo(groups){
      let {groupsMap} = this.state;
      groups.map((group)=>{
          //console.log(group);
          groupsMap[group.id] = group.name;
          if(group.children && group.children.length>0){
              this.cacheGroupsInfo(group.children);
          }
      });
    }

    //显示应用的安装情况
    renderAppSetUpInfo=(appsList)=>(
        appsList.map((app)=>{
            const kejianfanwen = this.renderUserBelongGroupMath(app.allow_partys);
            return <div className={styles.applist} key={`a_1_${app.agentid}`}>
                      <Avatar src={app.square_logo_url}/> &nbsp;
                      <span key={`a_2_${app.agentid}`}><font size="2" color="blue">{app.name}</font></span>&nbsp;&nbsp;&nbsp;
                      <span>可见范围：{kejianfanwen} </span>
                  </div>
        })
    )


    render(){

        const {linkman:{groups,schoolDetail},wxdata:{applist}} = this.props;

        this.cacheGroupsInfo(groups);

        return <div>    
            <Row gutter={24}>
            <Col xl={14} lg={24} md={24} sm={24} xs={24}>
            <ChartCard
              bordered={false}
              title={`${schoolDetail.sysName} -- (学校码:${this.state.schoolCode}  企业id:${schoolDetail.corpid})`}
              action={
                <Tooltip title="指标说明">
                  <Icon type="info-circle-o" />
                </Tooltip>
              }
              total={`${numeral(schoolDetail.members).format('0,0')} 人`} 
              footer={<Field label="关注人员" value={`${numeral(schoolDetail.followed).format('0,0')}`} />}
              contentHeight={46}
            >
              <Trend flag="up" style={{ marginRight: 16 }}>
                关注数<span className={styles.trendText}> {`${numeral(schoolDetail.followed*100/schoolDetail.members).format('0.00')}`} %</span>
              </Trend>
              <Trend flag="down">
                取关数<span className={styles.trendText}> {`${numeral(schoolDetail.unfollowed*100/schoolDetail.members).format('0.00')}`}%</span>
              </Trend>
            </ChartCard>
          </Col>
          <Col xl={10}>
               <Card
                  hoverable
                  style={{ width: 340}}
                  cover={<img alt="企业号二维码" width="160" height="220" src={schoolDetail.wxqrcodeUrl} />}
                >
                  <Meta
                    title={schoolDetail.sysName}
                    description="企业二维码"
                  />
                </Card>
          </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={40} >
                                <div className={styles.func_block}>
                                     <Button onClick={() =>this.specopation(1)}>删除已选的人</Button>
                                     <Button onClick={() =>this.specopation(2)}>头像/关注强刷</Button> 
                                     <Button onClick={() =>this.specopation(3)}>通讯录缓存强刷</Button>
                                </div>
                          </ChartCard>
                          <br/>
                          <ChartCard
                              bordered={false}  
                              title='应用安装情况'>
                                <div>
                                    {this.renderAppSetUpInfo(applist)}
                                </div>
                          </ChartCard>
                    </Col>
            </Row>
        </div>;
    }

}