<template>
  <div class="chart_layout">
    <h3 class="v-title mb-12 block">学习统计</h3>
    <template v-if="$store.statistic_tab_active===0">
      <OrgUserChart class="chart" @change="userChange" />
      <div v-for="v in courseContent" :key="v.key" class="chart"><CircleNumberChart v-bind="v" /></div>
    </template>
    <CourseManage v-if="$store.statistic_tab_active===1" :showButton="false" style="flex-"></CourseManage>
  </div>
</template>

<script>
import OrgUserChart from '@/views/statistic/components/OrgUserChart.vue'
import CircleNumberChart from '@/views/statistic/components/CircleNumberChart.vue'
import { findStatisticDataApi } from '@/api/statistic'
import CourseManage from '@/views/online-course/course-manage/index.vue'

export default {
  components: { OrgUserChart, CircleNumberChart, CourseManage },

  data: () => ({
    curUser: null,
    courseContent: [
      { key: 'studyTime', title: '学习时长综合统计', value: 0, unit: '分钟' },
      { key: 'resourceCount', title: '学习资源综合统计', unit: '个', value: 0 }
    ]
  }),

  methods: {
    userChange (user) {
      this.curUser = user
      this.findData(user.id)
    },
    async findData (id) {
      const data = await findStatisticDataApi('study-count', { id })
      this.courseContent.forEach((item) => {
        item.value = +data[item.key]
      })
    }
  }
}
</script>
