<template >
  <div class="online-data-statistics">
    <div class="data-statistics__total">全部设备 <span class="total_value"><CountTo :startVal="0" :endVal="143250" separator=""/></span></div>
    <ModePanel @register="registerModePanel"></ModePanel>
  </div>
</template>

<script>
import ModePanel from '@/bis-components/DataStatistics/ModePanel.vue'
import { useComponent } from '@/hooks/register'
import CountTo from 'vue-count-to'

/**
 * 使用组件
 */
const [registerModePanel, { call: callModePanel }] = useComponent()
export default {
  name: 'OnlineDataStatistics',
  components: {
    ModePanel,
    CountTo
  },
  data() {
    return {}
  },
  
  mounted() {
    // 设置数据
    this.setData([
      {
        count: 1324,
        label: '物联设备'
      },
      {
        count: 1200,
        label: '视频设备'
      },
      {
        count: 1200,
        label: '全部设备'
      },
      {
        count: 1325,
        label: '联网建筑'
      },
      {
        count: 1327,
        label: '联网单位'
      },
      {
        count: 1329,
        label: '水源点'
      }
    ])
  },
  methods: {
    registerModePanel,
    setData: data => callModePanel('setData', data)
  }
}
</script>

<style scoped lang='less'>
.online-data-statistics {
  font-size: 12px;
  color: aliceblue;
  .data-statistics__total {
    padding-left: 20px;
    .total_value {
      display: inline-block;
      padding-left: 20px;
      color: #ffde24;
      font-size: 23px;
      font-family: Anton-Regular;
    }
  }
}
</style>
