/**
 * Created by vison on 16/11/30.
 */
import React from 'react';
import { Col, Row, Icon, Badge } from '../../components/mxa';
import ImageLink from '../constant/imageLink';

export default class TabPaneHeader extends React.Component {
  static propTypes = {
    headerText: React.PropTypes.string,
    headerIcon: React.PropTypes.oneOf(['maskRemind', 'notification', 'warn', 'advice', 'link']),
    unRead: React.PropTypes.number,
    bgColor: React.PropTypes.string
  };

  static defaultProps = {
    unRead: 0,
    headerIcon: 'notification'
  };

  renderIcon = () => {
    switch (this.props.headerIcon) {
      case 'maskRemind':
        return (
          <img src={ImageLink.home_schedule_mask_remind} alt="任务提示" style={{ padding: 10 }} />
        );
      case 'notification':
        return (
          <img src={ImageLink.home_schedule_notification} alt="提示页面" style={{ padding: 10 }} />
        );
      case 'warn':
        return (
          <img src={ImageLink.home_schedule_warn} alt="预警页面" style={{ padding: 10 }} />
        );
      case 'advice':
        return (
          <img src={ImageLink.home_schedule_advice} alt="征求意见" style={{ padding: 10 }} />
        );
      case 'link':
        return (
          <img src={ImageLink.home_schedule_link} alt="重点信息链接" style={{ padding: 10 }} />
        );
      default:
        return (
          <img src={ImageLink.home_schedule_mask_remind} alt="任务提示" style={{ padding: 10 }} />
        );
    }
  };

  renderUnRead = () => {
    return (
      <Badge
        count={this.props.unRead}
        style={{ backgroundColor: '#fff', color: '#999', position: 'absolute', left: -5, top: 5 }}
      />
    );
  };

  render() {
    return (
      <div style={{ backgroundColor: this.props.bgColor, width: 100 }}>
        <Row type="flex" justify="center">
          {this.renderIcon()}
          {this.renderUnRead()}
        </Row >
        <Row type="flex" justify="center">
          <p style={{ color: '#fff', paddingBottom: 10 }}>{this.props.headerText}</p>
        </Row>
      </div>
    );
  }
}
