import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';

import BaseForm from './baseForm.js';
import Slider from './slider.js';
import OrgTree from '../../public/tree/index.js';
import SidePage from './side.js'
import AffixComs from './affix.js';
import '../../style/index.less';

import { Button, Image } from 'antd';
import { WeaLogView } from 'comsMobx';
import { WeaTop, WeaRightMenu, WeaLocaleProvider, WeaNewScroll } from 'ecCom';
import { renderNoright, renderLoading, getSearchs, renderNoData, isEmpty } from '../../util'; // 从util文件引入公共的方法
const getLabel = WeaLocaleProvider.getLabel;
const WeaLogViewComp = WeaLogView.Component;


@inject('standardOrgStore')
@observer
export default class StandardOrg extends React.Component {

  componentWillMount() { // 初始化渲染页面
    const { standardOrgStore: { doInit } } = this.props;
    doInit();
  }

  componentWillReceiveProps(nextProps) {
    const { standardOrgStore: { doInit } } = this.props;
    if (this.props.horizontal !== nextProps.horizontal) { // 手动刷新、切换菜单 重新初始化
      doInit();
    }
  }

  /**
   * 查询
   */
  getSearch = (params) => {
    const { standardOrgStore } = this.props;
    standardOrgStore.getStandardOrg(params);
  }

  //调用侧滑页面子组件
  openSidePage = (params) => {
    this.child.openSide(params);
  }

  onRef = (ref) => {
    this.child = ref
  }



  render() {
    const { standardOrgStore } = this.props;
    const { loading, hasRight, form, condition, data, horizontal, collapsable, expandAll, labelClassName, treeType, scale } = standardOrgStore; // 从后台取数据 和 方法
    //alert(JSON.stringify(data))

    if (!hasRight && !loading) { // 无权限处理
      return renderNoright();
    }

    if (isEmpty(data)) { //无数据处理
      return renderNoData();
    }

    return (
      <div className='standard-container'>
        <SidePage  onRef={this.onRef} />
        {loading ? renderLoading() :
          <div>
            {/* {getSearchs(form, toJS(condition), 1)} 初始化表单*/}
            <BaseForm getSearch={this.getSearch} />
            <div className="m-t-lg text-center" id="node" style={{
              transform: `scale(${scale}) translate(${0}px, ${0}px)`,
              transformOrigin: "center top"
            }}>
              <OrgTree
                data={toJS(data)}
                horizontal={horizontal}
                collapsable={collapsable}
                labelClassName={labelClassName}
                expandAll={expandAll}
                treeType={treeType}
                openSidePage={this.openSidePage}
                // onClick={(e, data) => {
                //   //this.openSidePage(data, e)
                // }}
              >
              </OrgTree>
            </div>
            <AffixComs orgStore={standardOrgStore} />
            {/* <Slider /> */}
          </div>
        }
      </div>
    )
  }
}