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

import {
  WeaInput,
  WeaLocaleProvider,
} from 'ecCom';

import {
  downloadCvs2Img
} from './util'

const getLabel = WeaLocaleProvider.getLabel;

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

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

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

    downloadCvs2Img({
      cvs: cvs[cvs.length - 1],
      title: title
    });
  }

  render() {
    const {
      hrmApplicant,
      title,
      index,
      bl1,
    } = this.props, {
      query,
      tabs,
      inputCallback,
      getTabsDatas,
    } = hrmApplicant, {
      value,
    } = query, {
      key,
    } = tabs;

    return (<div style={{textAlign: 'right'}}>
              {
                (key == '2' || key == '3') && 
                <span>
                  <span>
                    {key == 2 ? getLabel('391163',"年薪区间") : getLabel('391165',"年限区间")}
                  </span>
                  <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@qpbghz`} 
                    value={value} 
                    defaultValue={key=='2' ? '5' : '2'}
                    style={{display: 'inline-block', width:55, margin:'0 15px'}}
                    onChange={value => inputCallback(value)} 
                  />
                  <span>
                    {key == 2 ? getLabel('391164',"万元") : getLabel('26577',"年")}
                  </span>
                  <i 
                    className='icon-coms-Refresh wea-f14' 
                    style={{margin:'0 10px',cursor:'pointer'}} 
                    onClick={() => getTabsDatas()}
                  />
                </span>
              }
              <i 
                className='icon-coms-download2 wea-f14' 
                style={{marginRight: 15,cursor:'pointer'}}
                onClick={() => bl1 && this.downloadImg( index,title)}
              />
          </div>)

  }

}