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('hrmUsedemand')
@observer
export default class BarCharts extends React.Component {
  constructor(props) {
    super(props);
    this.count = -1;
  }

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

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

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

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

    this[alias] = ref;

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

  chartAction = (obj) => {
    const {
      index,
      chart
    } = obj;

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

  handleChartAction = (params) => {
    const {
      hrmUsedemand
    } = this.props, {
      barCharts,
      openDialog
    } = hrmUsedemand, {
      lIds,
      rIds,
    } = barCharts;

    const {
      name,
      dataIndex,
      index
    } = params;

    const tIds = (index == '0') ? lIds : rIds;

    openDialog({
      type: 'bar',
      field: {
        value: tIds[dataIndex],
        valueSpan: name,
        valueObj: [{
          id: tIds[dataIndex],
          name: name
        }]
      },
      index
    })
  }

  downloadImg = (index, title) => {
    const cvs = document.getElementsByTagName('canvas');

    downloadCvs2Img({
      cvs: cvs[index],
      title: title
    });
  }

  render() {
    const {
      hrmUsedemand
    } = this.props, {
      barCharts,
      openDialog,
    } = hrmUsedemand, {
      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;

      const float = (index == 1) ? 'right' : 'left',
        padding = (index == 2) ? 16 : (index == 0) ? '0 0 0 16px' : '0 16px 0 0',
        width = (index == 2) ? '100%' : '49%';

      return (
        <div style={{float, width, padding}}>
          <WeaReportCard ecId={`${this && this.props && this.props.ecId || ''}_WeaReportCard@c233xx@${index}`}
            title={title}
            onMoreClick={() => openDialog({type:`more${index}` })}
            onDownloadClick={() => bl1 && this.downloadImg(ct, title)}
            operations={(index==2) && <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@cofg1c@${index}`} 
                  ref={ref =>this.setRef(ref,`echart${index}`)}  
                  option={option} 
                  useDefault={false} 
                  chartAction={ chart => (index == 0 || index == 1) && 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>
      )
    })

  }
}