<template>
  <div class="block" style="display:flex">
    <VListCard
      class="mr-12"
      style="width:200px"
      title="直播列表"
      v-loading="loading"
      :dataList="liveList"
      :loadMore="loadMore"
      @change="findChartsData"
    />
    <div v-for="v in broadcastData" :key="v.key" class="chart"><CircleNumberChart v-bind="v" :value="v.value" /></div>
    <LiveDetailScoreTower :live="live" />
    <LiveDetailStuCountLine :live="live" />
  </div>
</template>

<script>
import CircleNumberChart from '@/views/statistic/components/CircleNumberChart.vue'
import { getLiveListAPI } from '@/api/online-teaching/live-manage'
import { findStatisticDataApi } from '@/api/statistic'
import VListCard from '@/views/statistic/components/VListCard.vue'
import LiveDetailScoreTower from './LiveDetailScoreTower.vue'
import LiveDetailStuCountLine from './LiveDetailStuCountLine.vue'

export default {
  components: { CircleNumberChart, VListCard, LiveDetailScoreTower, LiveDetailStuCountLine },

  data () {
    return {
      broadcastData: [
        { key: 'duration', title: '直播时长', unit: '分钟', value: 0 },
        { key: 'count', title: '最高观看直播人数', value: 0 }
      ],
      page_info: { currentPage: 1, pageSize: 10, total: 0 },
      live: null,
      loading: false,
      overload: false,
      liveList: []
    }
  },
  methods: {
    async findChartsData (live) {
      this.live = live
      const data = await findStatisticDataApi('detail-broadcast', { id: live.id })
      this.broadcastData.forEach((item) => {
        item.value = data[item.key] || 0
      })
    },

    /**
     * 分页加载数据
     */
    async loadMore () {
      if (this.loading || this.overload) return
      this.loading = true
      try {
        const { data } = await getLiveListAPI({ page: this.page_info.currentPage, pageSize: this.page_info.pageSize })
        this.liveList.push(...data.data)

        // 列表数据长度等于数据总数则标记为已加载完所有数据
        this.overload = this.liveList.length === data.total
        this.page_info.currentPage++
      } catch (error) {}
      this.loading = false
    }
  }
}
</script>
