import {Icon} from 'antd'
import isEmpty from 'lodash/isEmpty'
import {WeaUpload} from 'ecCom';
import isArray from 'lodash/isArray'
import "../style/upload.less";
import {i18n} from '../public/i18n';
import {WeaLocaleProvider} from 'ecCom';
import {addContentPath} from '../../../util/index.js'
const getLabel = WeaLocaleProvider.getLabel;

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() {
    this.setState({value: ''});
    this.props.onChange && this.props.onChange('');
  }
  onChange(datas) {
    let value = '';
    if (isArray(datas) && !isEmpty(datas)) {
      value = `${datas.pop()}`;
    }else{
      value = datas;
    }
    this.setState({value});
    this.props.onChange && this.props.onChange(value);
  }
  render() {
    const {tip} = this.props;
    const {value} = this.state;
    return (
      <div className="hrm-upload-avatar">
        {
          isEmpty(value) &&
          <div className="hrm-upload-wrapper">
            <WeaUpload
              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>
            <span className="tip">(`${tip()}400*600`)</span>
          </div>
        }
        {
          !isEmpty(value) &&
          <div className="hrm-avatar">
            <img src={addContentPath(`/weaver/weaver.file.FileDownload?fileid=${value}`)}/>
            <Icon type="cross-circle-o" title={getLabel('16075',"删除图片")} onClick={this.close.bind(this)}/>
          </div>
        }
      </div>
    )
  }
}
export default Main;