<template>
  <el-table
    :data="list"
    :header-cell-style="{background:'#EDEEF0',color:'#444'}"
  >
    <el-table-column
      prop="type"
      label="课程类型"
      align="center"
    >
      <template slot-scope="scope">
        {{courseType[scope.row.type]}}
      </template>
    </el-table-column>
    <el-table-column
      prop="time"
      label="剩余时长(分)"
      align="center"
    />
  </el-table>
</template>

<script>
import { queryStudentSubTotalCourseTimes } from '../../api'
import { courseType } from '@/constant'
export default {
  props: ['detail'],
  data() {
    return {
      courseType,
      list: []
    }
  },
  mounted() {
    this.FetchDetail()
  },
  methods: {
    async FetchDetail() {
      try {
        const res = await queryStudentSubTotalCourseTimes({
          userId: this.detail.userId,
          musicGroupId: this.detail.musicGroupId,
        })
        this.list = Object.keys(res.data).map(item => ({type: item, time: res.data[item]}))
      } catch (error) {}
    }
  }
}
</script>
