<template>
  <div class="chart" style="padding:10px">
    <h2 style="margin-bottom:10px" class="v-title">课程内容统计</h2>
    <div v-for="(info,i) in courseContent" :key="info.key" :class="'course_content_item cci_'+i">
      <p>{{info.value}}</p>
      <h5>{{info.title}}</h5>
    </div>
  </div>
</template>

<script>

import { findStatisticDataApi } from '@/api/statistic'

export default {
  data () {
    return {
      courseContent: [
        /**
         * 内含课件
         */
        { key: 'coursewareCount', title: '内含课件', value: 0 },
        /**
         * 课程总学时
         */
        { key: 'studyTime', title: '课程总学时', value: 0 },
        /**
         * 内含章节
         */
        { key: 'section', title: '内含章节', value: 0 },
        /**
         * 内含练习题数
         */
        { key: 'exercises', title: '内含练习题数', value: 0 }
      ]
    }
  },
  methods: {
    async findData () {
      const data = await findStatisticDataApi('course-content')
      this.courseContent.forEach(item => {
        item.value = +data[item.key]
      })
      console.log(this.courseContent)
    }
  },

  mounted () {
    this.findData()
  }
}
</script>

<style lang="scss" scoped>
.course_content_item {
  width: 49%;
  height: 49%;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  > p {
    font-weight: bold;
    font-size: 28px;
    color: #208ac6;
  }

  > h5 {
    line-height: 30px;
    font-weight: 500;
    color: #888;
  }

  &.cci_0 {
    position: relative;

    &::before{
      content: '';
      display: block;
      width: 1px;
      height: 140%;
      position: absolute;
      right: 0;
      bottom: -68%;
      background-color: #e8e8e8;
    }

    &::after {
      content: '';
      display: block;
      width: 160%;
      height: 1px;
      position: absolute;
      right: -80%;
      bottom: 0;
      background-color: #e8e8e8;
    }
  }
}
</style>
