import {
  inject,
  observer,
} from 'mobx-react';
import {
  toJS
} from 'mobx';
import {
  WeaReportCard,
  WeaEchart,
  WeaLocaleProvider,
} from 'ecCom';

import {
  downloadCvs2Img
} from './util'
const getLabel = WeaLocaleProvider.getLabel;

@inject('hrmApplicant')
@observer
export default class BarCharts extends React.Component {
  constructor(props) {
    super(props);
    this.count = -1;
  }

  componentDidMount() {
    // this.props.hrmApplicant.getBarChartsDatas();
  }

  componentDidUpdate() {
    [0, 1].map(val => {
      this[`echart${val}`] && this[`echart${val}`].paint();
    })
  }

  componentWillUnmount() {
    this.props.hrmApplicant.resetBarCharts();
  }

  setRef = (ref, alias) => {
    const {
      hrmApplicant
    } = this.props, {
      setRef
    } = hrmApplicant;

    this[alias] = ref;

    setRef({
      ref,
      alias,
      type: 'barCharts',
    });
  }

  chartAction = (chart, index) => {
    chart.off('click');
    chart.on('click', params => this.handleChartAction(params, index));
  }

  handleChartAction = (params, index) => {
    const {
      hrmApplicant
    } = this.props, {
      barCharts,
      openDialog
    } = hrmApplicant, {
      ids
    } = barCharts;

    const {
      name,
      dataIndex
    } = params;

    openDialog('bar', (index == '0') ? {
      value: ids[dataIndex],
      valueSpan: name,
      valueObj: [{
        id: ids[dataIndex],
        name: name
      }]
    } : {
      createMonth: name
    })

  }

  downloadImg = (index, title) => {
    const cvs = document.getElementsByTagName('canvas');
    downloadCvs2Img({
      cvs: cvs[index],
      title: title
    });
  }

  render() {
    const {
      hrmApplicant
    } = this.props, {
      barCharts,
      openDialog,
    } = hrmApplicant, {
      charts
    } = barCharts;

    this.count = -1;

    return toJS(charts).map((chart, index) => {
      const {
        title,
        option
      } = chart;

      const bl1 = option.series[0].data.length > 0;

      bl1 && this.count++;

      const ct = this.count;

      return (
        <div style={{float:(index==0)?'left':'right',width:'49%', paddingLeft: (index==0)?16:0, paddingRight:(index==0)?0:16}}>
          <WeaReportCard ecId={`${this && this.props && this.props.ecId || ''}_WeaReportCard@yadz79@${index}`}
            title={title}
            onMoreClick={() => openDialog('more')}
            onDownloadClick={() => bl1 && this.downloadImg(ct, title)}
            operations={(index==1) && <i className='icon-coms-download2' style={{cursor:'pointer'}} onClick={() => bl1 && this.downloadImg(this.count, title)}/>}
          >   
              <div style={{height: 380,position:'relative'}} >
                {
                   bl1 ? 
                  <WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@t9hj4p@${index}`} 
                  ref={ref =>this.setRef(ref,`echart${index}`)}  
                  option={option} 
                  useDefault={false} 
                  chartAction={ chart =>  this.chartAction(chart,index)}
                />:
                <i 
                  className='icon-coms-blank' 
                  style={{fontSize: 50, position:'absolute',top:'50%',left:'50%',marginLeft: -25,marginTop: -50}} 
                >
                  <span style={{display:'block',fontSize: 12}}>{getLabel(83553, '暂无数据')}</span>
                </i>
                }
                
              </div>
          </WeaReportCard>
        </div>
      )
    })

  }
}