<template>
  <div class="flex-h">
    <div v-for="v in broadcastData" :key="v.key" class="chart"><CircleNumberChart v-bind="v"/></div>
  </div>
</template>

<script>
import CircleNumberChart from '@/views/statistic/components/CircleNumberChart.vue'
import { findStatisticDataApi } from '@/api/statistic'

export default {
  components: { CircleNumberChart },

  data () {
    return {
      broadcastData: [
        { key: 'count', title: '总直播数', value: 0 },
        { key: 'duration', title: '总直播时长', unit: '分钟', value: 0 },
        { key: 'userCount', title: '累计观看人数', unit: '人', value: 0 },
        { key: 'avgTime', title: '人均观看直播时长', unit: '分钟', value: 0 }
      ]
    }
  },
  methods: {
    async findData () {
      const data = await findStatisticDataApi('all-broadcast')
      this.broadcastData.forEach((item) => { item.value = data[item.key] })
    }
  },
  mounted () {
    this.findData()
  }
}
</script>
