import {
  inject,
  observer,
} from 'mobx-react';

import {
  toJS
} from 'mobx';

import {
  WeaEchart,
  WeaLocaleProvider
} from 'ecCom';

import {
  Tabs
} from 'antd';
const TabPane = Tabs.TabPane;
const getLabel = WeaLocaleProvider.getLabel;

import Query from './Query';

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

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

  componentDidUpdate() {
    const {
      hrmApplicant
    } = this.props, {
      tabs
    } = hrmApplicant, {
      key
    } = tabs;

    this[`echart${key}`] && this[`echart${key}`].paint();
  }

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

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

    this[alias] = ref;

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

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

  handleChartAction = (params, index) => {
    const {
      hrmApplicant
    } = this.props, {
      tab,
      query,
      openDialog,
    } = hrmApplicant, {
      ids0,
      ids1,
    } = tab, {
      value
    } = query;

    const {
      name,
      dataIndex
    } = params;

    let obj;
    if (index == 0) {
      obj = {
        category: ids0[dataIndex]
      }
    }
    if (index == 1) {
      obj = {
        educationlevel: ids1[dataIndex]
      }
    }
    const is_other = !name.includes('-') ? true : false;

    const [
      f,
      t
    ] = !is_other ? name.split('(')[0].split('-') : [];

    if ([2, 3].includes(index)) {
      obj = {
        [index == 2 ? 'salaryNeed' : 'workTime']: is_other ? -1 : f * (index == 2 ? 10000 : 1),
        [index == 2 ? 'salaryNeedto' : 'workTimeto']: is_other ? -1 : t * (index == 2 ? 10000 : 1),
        [index == 2 ? 'salaryNeedeRand' : 'workTimeRand']: (value ? value : (index == 2) ? 5 : 2) * (index == 2 ? 10000 : 1),
      }
    }

    openDialog('pie', obj, true);
  }

  render() {
    const {
      hrmApplicant
    } = this.props, {
      tabs,
      tabsCallback,
    } = hrmApplicant, {
      charts,
      key,
    } = tabs;

    return (<div style={{float:'left',  width: '100%',padding:16}}>
              <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@g2w560`} onChange={key => tabsCallback(key)} type="card">{
                  toJS(charts).map((chart, index) => {
                    const {title, option} = chart;

                    const bl1 = option.series[0].data.length > 0  ;
                      return (
                          <TabPane ecId={`${this && this.props && this.props.ecId || ''}_TabPane@pkm298@${index}`} tab={title} key={index}>
                              <Query ecId={`${this && this.props && this.props.ecId || ''}_Query@iz0on0@${index}`} 
                                title={title} 
                                index={index}
                                bl1={bl1}
                              />
                              <div style={{height: 380}}>
                                {
                                  bl1  
                                  ?   
                                      <div style={{height: '100%'}}>
                                        {key == index && <WeaEchart ecId={`${this && this.props && this.props.ecId || ''}_WeaEchart@8c7r8n@${index}`} 
                                          ref={ref =>this.setRef(ref,`echart${index}`)} 
                                          option={chart.option} 
                                          useDefault={false} 
                                          chartAction={ chart =>  this.chartAction(chart,index)}
                                        />}
                                      </div>
                                  : <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>
                          </TabPane>
                      )
                  })
              }</Tabs>
          </div>)
  }
}