/**
 * Created by baoyinghai on 4/20/17.
 */
import React from 'react';
import Qs from 'qs';
import { Modal } from '../../../../components/mxa';
import { ProgressBar } from '../../../../components';
import { iconWrapper } from '../../../utils/IconHelper';
import { getRecMenuId } from '../../../service/SessionStorage';

export default class TitleBar extends React.Component {

  _closeWin = () => {
    Modal.confirm({
      title: '提示',
      content: '确定关闭当前页面吗?',
      onOk: window.close,
    });
  };

  _renderCloseBtn = () => {
    const queryStr = location.href.split('?p=', 2)[1];
    const query = queryStr && Qs.parse(atob(queryStr));
    const ids = Object.assign({}, getRecMenuId(), query);
    if (ids && ids.processMenuId) return null;
    return (
      <div className="title-close-btn" >
        {iconWrapper('icon-guanbifuzhi', undefined, undefined, { onClick: this._closeWin })}
      </div>
    );
  };

  _renderInfoCompleteGlobal(infoCompleteness) {
    const pre = parseInt(infoCompleteness / 100, 10);
    return (
      <div className="info-completeness-global">
        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
          <span>信息完整度</span>
          <div><span style={{ color: pre > 99 ? '#26BF8C' : '#fa7252' }}>{pre}</span><span>%</span></div>
        </div>
        <div style={{ marginTop: 9 }}>
          <ProgressBar width={85} pre={pre} />
        </div>
      </div>
    );
  }

  render() {
    const { prefixCls = 'info-title-bar', getTitleDesc, infoCompleteness } = this.props;
    return (
      <div className={prefixCls + '-wrapper'}>
        <div className={prefixCls}>
          <span className="title-desc">{getTitleDesc && getTitleDesc()}</span>
          <div className="btn-list">
            {this.props.children}
            {(infoCompleteness || infoCompleteness === 0) && this._renderInfoCompleteGlobal(infoCompleteness)}
          </div>
          {this._renderCloseBtn()}
        </div>
      </div>
    );
  }
}
