import {
  WeaInput,
  WeaEchart,
} from 'ecCom'

import {
  Row,
  Col,
  message,
} from 'antd';
import {
  i18n
} from '../../public/i18n';

import React from 'react'

import {
  jumpToHrmDept
} from '../../util/pulic-func'

class ReportChart extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidUpdate() {
    if (this.refs.echart) this.refs.echart.paint();
    if (this.refs.echart1) this.refs.echart1.paint();
  }

  componentWillReceiveProps(nextProps) {
    if (this.props.winWidth !== nextProps.winWidth) {
      if (this.refs.echart) this.refs.echart.chart.resize();
      if (this.refs.echart1) this.refs.echart1.chart.resize();
    }
  }

  getDOM(interval, key, setGap, getData, isIntervalShow, pathname, tag, isChartsShow, chartTitle) {

    return (
      <div style={{position: 'absolute', right: 0}}>
        <div style={ isIntervalShow ? {display: 'block',float: 'left'} : {display: 'none'} }>
          <div className='hrm-report-interval'>
            {this.getName(key) + ':'}
          </div>
          <div style={{width: 70, paddingTop: 8, paddingLeft: 0}} className='hrm-report-interval hrm-report-input'>
            <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@f9l569`} 
              type="text" 
              viewAttr='2' 
              value={interval} 
              onChange={(val) => setGap(val)} 
            />
          </div>
          <div className='hrm-report-interval' style={{paddingLeft: 0}}>
            {this.getSuffix(key)}
          </div>
          <div className='hrm-report-interval' style={{fontSize: 16}}>
            <a onClick={() => getData()} className='hrm-report-linkStyle' title={i18n.button.refresh()}>
              <i className='icon-coms-Refresh' />
            </a>
          </div>
        </div>
        <div style={pathname !== 'basicConditionAnalysis' ? {display: 'block', float: 'left', padding: '10px 0'} : {display: 'none'} }>
          <a onClick={() => getData(tag)} className='hrm-report-linkStyle'>{i18n.button.more()}</a>
        </div>
        <div className='hrm-report-interval' style={{padding: '8px 20px 10px 10px', fontSize: 16}}> 
          { isChartsShow ?  <a onClick={() => this.getImgSrc(tag, chartTitle)} className='hrm-report-linkStyle' title={i18n.button.saveAsImage()}>
                              <i className='icon-coms-download2' />
                            </a>
                         :  <a onClick={() => {message.info(i18n.message.dataNone())}} className='hrm-report-linkStyle' title={i18n.button.saveAsImage()}>
                              <i className='icon-coms-download2' />
                            </a>
          }
        </div>
      </div>
    )
  }

  getName(key) {
    switch (key) {
      case '1':
        return i18n.label.ageRange();
      case '3':
        return i18n.label.workingAgeRange();
      case '7':
        return i18n.label.rankingInterval();
    }
  }

  getSuffix(key) {
    switch (key) {
      case '7':
        return i18n.label.level();
      default:
        return i18n.label.year();
    }
  }


  getImgSrc(tag, chartTitle) {
    let cvs = document.getElementsByTagName('canvas');
    if (tag !== 'right') {
      this.downloadCvs2Img(cvs[0], chartTitle);
    } else {
      this.downloadCvs2Img(cvs[1], chartTitle);
    }
  }

  downloadCvs2Img(cvs, chartTitle) {
    let $a = document.createElement('a');
    $a.download = chartTitle + '.jpg';
    $a.target = '_blank';
    let url;
    if (cvs) {
      url = cvs.toDataURL("image/jpg");
    } else {
      message.info(i18n.message.dataNone());
    }
    if (url) $a.href = url;
    if (typeof MouseEvent === 'function') {
      var evt = new MouseEvent('click', {
        view: window,
        bubbles: true,
        cancelable: false
      });
      $a.dispatchEvent(evt);
    } else {
      if (window.navigator.msSaveOrOpenBlob) {
        var bstr = atob(url.split(',')[1]);
        var n = bstr.length;
        var u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        var blob = new Blob([u8arr]);
        window.navigator.msSaveOrOpenBlob(blob, chartTitle + '.jpg');
      } else {
        var html = '' +
          '<body style="margin:0;">' +
          '<img src="' + url + '" style="max-width:100%;" title="" />' +
          '</body>';
        var tab = window.open();
        tab.document.write(html);
      }
    }
  }

  chartAction(chart, ids, yAxisData, linkList) {
    chart.off('click');
    chart.on('click', (params) => this.handleClick(params, ids, yAxisData, linkList));
  }

  handleClick(params, ids, yAxisData, linkList) {
    const {
      pathname
    } = this.props;
    if (pathname !== 'departmentStatistics') return false;
    let anid = params.event.target.anid;
    if (!anid) {
      return
    }
    let index = anid.split('_')[1];
    jumpToHrmDept(ids[index])
  }

  render() {
    const {
      option,
      isIntervalShow,
      interval,
      tabKey,
      pathname,
      setGap,
      getData,
      chartTitle,
      isChartsShow,
      ids,
      yAxisData,
      linkList,
      tagName
    } = this.props;

    return (
      <div style={{padding: '8px 16px'}}>
      {(pathname == 'basicConditionAnalysis') ? (<div style={{height: 500, position: 'relative'}}>
                                                  <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@bk161k`}>
                                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@tiem4w`} span={24}>
                                                        <div style={{ height: 50 }}>
                                                           {this.getDOM(interval, tabKey, setGap, getData, isIntervalShow, pathname, pathname, isChartsShow[0], tagName)} 
                                                        </div>
                                                    </Col>
                                                  </Row>
                                                  <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@yyxmps`}>
                                                    <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@r3yrz9`} span={24}>
                                                      {isChartsShow[0] ? (<div style={{height: 400}}>
                                                                             <WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@94v101`} ref="echart" option={option[0]} useDefault={false}/>
                                                                           </div>)
                                                                        : <div style={{position: 'absolute', top: 100, left: '50%', marginLeft: -40, textAlign: 'center'}}>
                                                                            <div style={{fontSize: 80}}><i className='icon-coms-blank'></i></div>
                                                                            <div style={{fontSize: 20, color:'#B2B2B2'}}>{i18n.message.dataNone()}</div>
                                                                          </div>}
                                                    </Col>
                                                  </Row>
                                                </div>) : ''}
        { (pathname == 'departmentStatistics' || pathname == 'postStatistics') ? <div style={{height: 350, border: '1px solid #DDD', borderRadius: 3}}>
                                                                                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@xs2v2c`}>
                                                                                      <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@e1wc91`} span={24}>
                                                                                        <div style={{height: 40, backgroundColor: '#F9F9F9', position: 'relative'}}>
                                                                                          <div style={{display: 'block', width: '30%', height: '100%', float: 'left', padding: '11px 0 12px 16px' }}>{chartTitle[0]}</div>
                                                                                          <div style={{ height: 50 }}>
                                                                                             {this.getDOM(interval, tabKey, setGap, getData, isIntervalShow, pathname, pathname, isChartsShow[0], chartTitle[0])} 
                                                                                          </div>
                                                                                        </div>
                                                                                      </Col>
                                                                                    </Row>
                                                                                    <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@zdbixg`}>
                                                                                      <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@cpfhsg`} span={20} offset={2}>
                                                                                        {isChartsShow[0] ? (<div style={{height: 300}}>
                                                                                                              <WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@5ri10l`} ref="echart" option={option[0]} useDefault={false} chartAction={(chart) => this.chartAction(chart, ids, yAxisData, linkList)}/>
                                                                                                             </div>)
                                                                                                          : <div style={{position: 'absolute', top: 100, left: '50%', marginLeft: -40, textAlign: 'center'}}>
                                                                                                              <div style={{fontSize: 80}}><i className='icon-coms-blank'></i></div>
                                                                                                              <div style={{fontSize: 20, color:'#B2B2B2'}}>{i18n.message.dataNone()}</div>
                                                                                                            </div>}
                                                                                      </Col>
                                                                                    </Row>
                                                                                 </div> : ''}
        { (pathname == 'jobStatusStatistics') ? <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@d50f92`}>
                                                  <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@4odteb`} span={12}>
                                                    <div style={{height: 350, marginRight: 8, border: '1px solid #DDD', borderRadius: 3}}>
                                                      <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@9vp3z8`}>
                                                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@j8v6ki`}>
                                                          <div style={{height: 40, backgroundColor: '#F9F9F9', position: 'relative'}}>
                                                            <div style={{height: '100%', padding: '11px 0 12px 16px', float: 'left' }}>{chartTitle[0]}</div>
                                                            <div style={{height: 50 }}>
                                                               {this.getDOM(interval, tabKey, setGap, getData, isIntervalShow, pathname, 'left', isChartsShow[1], chartTitle[0])} 
                                                            </div>
                                                          </div>
                                                        </Col>
                                                      </Row>
                                                      <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@z1e7gk`}>
                                                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@6gm6oz`}>
                                                          {isChartsShow[1] ? <div style={{height: 300}}>
                                                                                <WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@mgu4rb`} ref="echart" option={option[0]} useDefault={false}/>
                                                                              </div>
                                                                            : <div style={{position: 'absolute', top: 100, left: '50%', marginLeft: -20, textAlign: 'center'}}>
                                                                                <div style={{fontSize: 50}}><i className='icon-coms-blank'></i></div>
                                                                                <div style={{fontSize: 15, color:'#B2B2B2'}}>{i18n.message.dataNone()}</div>
                                                                            </div>
                                                          }
                                                        </Col>
                                                      </Row>
                                                    </div> 
                                                  </Col>
                                                  <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@j3wbd0`} span={12}>
                                                    <div style={{height: 350, marginLeft: 8, border: '1px solid #DDD', borderRadius: 3}}> 
                                                      <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@kx8mey`}>
                                                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@d3qj2t`}>
                                                          <div style={{height: 40, backgroundColor: '#F9F9F9', position: 'relative'}}>
                                                            <div style={{height: '100%', padding: '11px 0 12px 16px', float: 'left' }}>{chartTitle[1]}</div>
                                                            <div style={{ height: 50 }}>
                                                               {this.getDOM(interval, tabKey, setGap, getData, isIntervalShow, pathname, 'right', isChartsShow[2], chartTitle[1])} 
                                                            </div>
                                                          </div>
                                                        </Col>
                                                      </Row>
                                                      <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@i0dgsy`}>
                                                        <Col ecId={`${this && this.props && this.props.ecId || ''}_Col@svragf`}>
                                                          {isChartsShow[2] ? <div style={{height: 300}}>
                                                                                <WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@ohcxa9`} ref="echart1" option={option[1]} useDefault={false}/>
                                                                              </div>
                                                                            : <div style={{position: 'absolute', top: 100, left: '50%', marginLeft: -20, textAlign: 'center'}}>
                                                                                <div style={{fontSize: 50}}><i className='icon-coms-blank'></i></div>
                                                                                <div style={{fontSize: 15, color:'#B2B2B2'}}>{i18n.message.dataNone()}</div>
                                                                              </div>}   
                                                        </Col>
                                                      </Row>
                                                    </div>
                                                  </Col>
                                                </Row> : ''}
    </div>
    )
  }
}

export default ReportChart