import { Icon } from 'antd';
import isEmpty from 'lodash/isEmpty';
import { WeaUpload } from 'ecCom';
import isArray from 'lodash/isArray';
import './index.less';
import { i18n } from '../../../pc4mobx/hrm/public/i18n';

class Main extends React.Component {
  static defaultProps={
    tip: i18n.label.pictureSizeSuggestedInfo,
  }
  constructor(props) {
    super(props);
    this.state = {
      value: props.value || '',
    };
  }
  componentWillReceiveProps(nextProps) {
    if ('value' in this.props && this.state.value !== nextProps.value) {
      this.setState({ value: nextProps.value });
    }
  }
  close() {
    let { domkey } = this.props;
    this.setState({ value: '' });
    this.props.onChange && this.props.onChange('', domkey);
  }
  onChange(id, datas) {
    let { domkey } = this.props; // 每个WeaSwitch的key
    let value = '';
    if (isArray(datas) && !isEmpty(datas)) {
      let data = datas.pop();
      value = data.fileidCode;
    } else {
      value = datas.fileidCode;
    }
    this.setState({ value });
    this.props.onChange && this.props.onChange(value, domkey);
  }
  render() {
    const { tip, nohelpful } = this.props;
    const { value } = this.state;
    return (
      <div className="hrm-upload-avatar">
        {
          isEmpty(value) &&
          <div className="hrm-upload-wrapper">
            <WeaUpload ecId={`${this && this.props && this.props.ecId || ''}_WeaUpload@yzd3tq`}
              autoUpload
              uploadUrl="/api/doc/upload/uploadFile"
              category="all"
              limitType="jpg,gif,png"
              onChange={this.onChange.bind(this)}
            >
              <i className="icon-coms-AddTo upload-icon" />
            </WeaUpload>
            {
              nohelpful ? '' // 需不需要后面的提示
              :
              <span className="tip">({`${tip()}400*600`})</span>
            }
          </div>
        }
        {
          !isEmpty(value) &&
          <div className="hrm-avatar">
            <img src={`/weaver/weaver.file.FileDownload?fileid=${value}`} />
            <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@rcwrkh`} type="cross-circle-o" title="删除图片" onClick={this.close.bind(this)} />
          </div>
        }
      </div>
    );
  }
}
export default Main;