import React from 'react'
import * as mobx from 'mobx'
import {
    inject,
    observer
} from 'mobx-react'
import {
    WeaTop, WeaTab, WeaFormItem, WeaRightMenu, WeaLeftRightLayout, WeaDatePicker
} from 'ecCom'
import {
    Spin,Button
} from 'antd'
import {
    i18n
} from '../../public/i18n';
const toJS = mobx.toJS;
import '../../style/common.less';
import domtoimage from 'dom-to-image';
import { saveAs } from 'file-saver';

@inject('orgchart')
@observer
export default class OrgChart extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
		this.init();
    console.log("22",document.getElementById("box_org_tree"));
    window.addEventListener('message', this.messageHandle, false);
	}

	componentWillUnmount() {
		window.removeEventListener('message', this.messageHandle, false);
	}

	componentWillReceiveProps(nextProps) {
		if (this.props.location.key !== nextProps.location.key) {
			this.init(true);
		}
	}

  messageHandle = (e) => {
      const {
        orgchart: store
      } = this.props;
      if (e.data.act == 'initOrgChart') {
        store.onInitOrgChart(e.data.status);
      } else if (e.data.act == 'callChild') {
        store.showSpin(e.data.status);
      }
	}

  //导出架构图
  exportImage = () => {
    const node = document.getElementById("box_org_tree");
    domtoimage.toBlob(node).then((blob) => {
        // 调用file-save方法 直接保存图片
        saveAs(blob, '组织架构.png')
    })
}

    /**
     * 添加多级路径
     *
     * @param {*} url
     */
  addContentPath = (url) => {
      const ecologyContentPath = window.ecologyContentPath || '';
      if (url && ecologyContentPath) {
        //避免重复添加ecologyContentPath
        //避免传入的参数不是链接
        if (url.startsWith('/') && !url.startsWith(ecologyContentPath)) {
          url = ecologyContentPath + url;
        }
      }
      return url;
    };

  init(refresh = false) {
    const {
      orgchart: store
    } = this.props;
    //checkAuthorized('orgchart', null, () => initData(refresh));
    store.initData(refresh);
  }

  getChildrenCom = () => {
    const {
      orgchart
    } = this.props;
    const {
      date
    } = orgchart;

     let btns = [];
     btns.push(
           <div>
              <h6 style={{float:'left'}}>日期选择:</h6>
              <WeaDatePicker
                  value={date}
                  viewAttr={2}
                  style={{marginLeft:'20px',marginRight:'40px'}}
                  onChange={value => orgchart.changeDate(value)}
                  endValue={new Date()}
              />
              <Button type="primary" onClick={() => this.exportImage()}>导出</Button>
           </div>
     )
    return btns;
  }



  render() {

    const {
      orgchart: store
    } = this.props;
    const {
      setIframe,
      spinning
    } = store;

    return (

      <div  style={{ height: '100%' }}>
        <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@hkptkq`} spinning={spinning}>
          <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@bj98s7`}
                          title='人员分布图'
                          icon={<i className='icon-coms-hrm' />}
                          iconBgcolor='#217346'
                          loading={true}
                          buttons={this.getChildrenCom()}
            >
              <div className='org-frame' style={{ height: '100%',width:'100%' }}>
                <iframe id='orgChartFrame' src={this.addContentPath('/hrm/hrm_e9/orgChart1/orgChart.html')} style={{border: 'none'}} width='100%' height='100%' ref={(dom) => setIframe(dom)}/>
              </div> 
            </WeaTop>
          </Spin>
      </div>
      )
    }
}