import React from 'react';
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import OrgTree from '../../public/tree/index.js';
import BaseForm from './baseForm.js';
import Slider from './slider.js';
import AffixComs from './affix.js';

import domtoimage from 'dom-to-image';
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('simpleOrgStore')
@observer
export default class simpleOrg extends React.Component {

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

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

  getSearch = (params) => {
    const { simpleOrgStore } = this.props;
    simpleOrgStore.getSimpleOrg(params);
  }

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

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

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



    return (
      <div className='simple-container'>
        {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}
                onClick={(e, data) => {
                  //todo
                }}
              >
              </OrgTree>
            </div>
            <AffixComs orgStore={simpleOrgStore} />
            {/* <Slider /> */}
          </div>
        }
      </div>
    )
  }
}