<template>
  <view class="overviewWpy homePageModule">
    <view class="title">概览</view>
    <view class="content">

      <view class="top">
        <view class="value">{{ overviewData.eventCount }}</view>
        <view>事件总数</view>
      </view>

      <view class="bottom">

        <repeat for="{{ dataInfo }}" item="n" index="i" key="i">
          <view class="item">
            <view class="name">{{ n.name }}</view>
            <view class="value">{{ n.value }}</view>
          </view>
        </repeat>

      </view>

    </view>
  </view>
</template>

<script>
import wepy from 'wepy'
// import { ago } from '@/static/js/ago_CN.js'

export default class overview extends wepy.component {
  props = {
    overviewData: {}
  }

  data = {
    // dataInfo: [
    //   { name: '影响力均值', value: Math.format.thousandBitSymbol(6789) },
    //   { name: '峰值平均传播速度', value: '12条/小时' },
    //   { name: '达到峰值平均用时', value: '22.5小时' }
    // ]
  }

  onLoad () {

  }

  computed = {
    dataInfo () {
      return this.overviewData.eventCount !== undefined ? [
        { name: '影响力均值', value: Math.format.thousandBitSymbol(Math.round(this.overviewData.avgSumH)) },
        { name: '峰值平均传播速度', value: `${this.overviewData.avgMaxSpeed}条/小时` },
        { name: '达到峰值平均用时', value: `${Math.format.round(this.overviewData.avgMaxTime / 1000 / 60 / 60, 1)}` }
      ] : []
    }
  }
}
</script>

<style lang="scss" scoped>
.overviewWpy{
  background-color: #49619F;
  border-radius: 8rpx;
  overflow: hidden;
  color: #fff;
  font-size: 32rpx;

  .top{
    padding: 20rpx 0;
    text-align: center;
    .value{
      margin-bottom: 20rpx;
      font-size: 52rpx;
      font-weight: lighter;
    }
  }

  .bottom{
    background-color: #445A93;
    .item{
      display: flex;
      justify-content: space-between;
      padding: 20rpx 24rpx;
    }
  }

}
</style>
