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

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

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

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

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

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

    this[alias] = ref;

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

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

    return (<div style={{float:'left',  width: '100%',padding:16}}>
              <Tabs ecId={`${this && this.props && this.props.ecId || ''}_Tabs@i27qoz`} 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@3l040q@${index}`} tab={title} key={index}>
                              <Query ecId={`${this && this.props && this.props.ecId || ''}_Query@76h1r1@${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@i0c0mc@${index}`} 
                                          ref={ref =>this.setRef(ref,`echart${index}`)} 
                                          option={chart.option} 
                                          useDefault={false} 
                                        />}
                                      </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>)
  }
}