<template>
  <div class="block flex-h">
    <VListCard class="mr-12" style="width:200px" title="课程列表" :dataList="courseList" @change="findChartsData" />
    <div class="chart" v-for="v in broadcastData" :key="v.key"><CircleNumberChart v-bind="v" /></div>
  </div>
</template>

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

export default {
  components: { CircleNumberChart, VListCard },

  data () {
    return {
      broadcastData: [
        { key: 'courseHours', title: '课程学时', value: 0, unit: '分钟' },
        { key: 'sectionCount', title: '课程章节', unit: '章', value: 0 },
        { key: 'userCount', title: '学习人数', unit: '人', value: 0 },
        { key: 'avgTime', title: '平均学习时长', unit: '分钟', value: 0 }
      ],
      courseList: []
    }
  },

  created () {
    this.getCourseListData()
  },

  methods: {
    async findChartsData ({ id }) {
      const data = await findStatisticDataApi('detail-analysis', { id })
      this.broadcastData.forEach((item) => {
        item.value = Math.round(data[item.key] * 100, 2) / 100
      })
    },

    async getCourseListData () {
      const { data } = await findStatisticDataApi('detail-analysis-live-list')
      this.courseList = data
    }

  }

}
</script>
