import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import { Grid } from '@icedesign/base';

const { Row, Col } = Grid;

export default class RealTimeStatistics extends Component {
  static displayName = 'RealTimeStatistics';

  static propTypes = {};

  static defaultProps = {};

  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const { data } = this.props;

    return (
      <div className="real-time-statistics">
        <Row style={styles.items}>
          <Col span="8" style={styles.item}>
            <div style={{ ...styles.itemBody, ...styles.green }}>
              <div style={styles.itemTitle}>
                <p style={styles.titleText}>构建次数</p>
                <span style={styles.tag}>每30分钟更新</span>
              </div>
              <div style={styles.itemContent}>
                <h2 style={styles.itemNum}>{data.collectCount}</h2>
                <div style={styles.itemMeta}>
                  <p style={styles.total}>{'　'}</p>
                  <p style={styles.desc}>累计使用 ICE 构建器的次数</p>
                </div>
              </div>
            </div>
          </Col>
          <Col span="8" style={styles.item}>
            <div style={{ ...styles.itemBody, ...styles.lightBlue }}>
              <div style={styles.itemTitle}>
                <p style={styles.titleText}>开发者数量</p>
                <span style={styles.tag}>每30分钟更新</span>
              </div>
              <div style={styles.itemContent}>
                <h2 style={styles.itemNum}>{data.developerCount || 0}</h2>
                <div style={styles.itemMeta}>
                  <p style={styles.total}>{'　'}</p>
                  <p style={styles.desc}>使用 ICE 进行开发的集团员工数</p>
                </div>
              </div>
            </div>
          </Col>
          <Col span="8" style={{}}>
            <div style={{ ...styles.itemBody, ...styles.darkBlue }}>
              <div style={styles.itemTitle}>
                <p style={styles.titleText}>使用项目</p>
                <span style={styles.tag}>每30分钟更新</span>
              </div>
              <div style={styles.itemRow}>
                <div style={styles.itemCol}>
                  <h2 style={styles.itemNum}>{data.projectCount}</h2>
                  <p style={styles.total}>ICE 累计使用项目数</p>
                  <p style={styles.desc}>仅包括已经上线的项目</p>
                </div>
              </div>
            </div>
          </Col>
        </Row>
      </div>
    );
  }
}

const styles = {
  item: {
    paddingRight: '28px',
  },
  itemBody: {
    padding: '12px',
    borderRadius: '4px',
    color: '#fff',
    height: '144px',
  },
  itemRow: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
  },
  itemTitle: {
    position: 'relative',
  },
  titleText: {
    margin: 0,
    fontSize: '14px',
  },
  tag: {
    position: 'absolute',
    right: 0,
    top: 0,
    padding: '2px 4px',
    borderRadius: '4px',
    fontSize: '12px',
    background: 'rgba(255, 255, 255, 0.3)',
  },
  itemNum: {
    margin: '20px 0',
    fontSize: '32px',
  },
  total: {
    margin: 0,
    fontSize: '12px',
  },
  desc: {
    margin: 0,
    fontSize: '12px',
  },
  green: {
    background: '#31B48D',
  },
  lightBlue: {
    background: '#38A1F2',
  },
  darkBlue: {
    background: '#7538C7',
  },
  navyBlue: {
    background: '#3B67A4',
  },
};