<template>
    <div style="padding: 20px;">
        <el-button icon="el-icon-download" type="warning" size="small" style="margin-bottom: 20px"
            @click="excelExport">导出为excel</el-button>

        <el-table v-loading="false" :data="listenCourseNum">
            <el-table-column label="序号" type="index" align="center" />
            <el-table-column label="姓名" align="center" prop="studentName" />
            <el-table-column label="手机号" align="center" prop="mobile" />
            <el-table-column label="开始听课时间" align="center" prop="startTime"></el-table-column>
        </el-table>
        <pagination :total="studentTotal" :page.sync="studentParams.pageNum" :limit.sync="studentParams.pageSize"
            @pagination="init('')" />
    </div>
</template>

<script>
import {
    getStudyRows,
    expLearnNum
} from '@/api/trainService/index'
import { saveAs } from 'file-saver';
export default {
    data() {
        return {
            listenCourseNum: [],
            studentTotal: 1,
            studentParams: {
                pageNum: 1,
                pageSize: 10,
            },
            courseId:'',
            rourseName:''
        }
    },
    created() {
        this.courseId = this.$route.query.courseId
        this.rourseName = this.$route.query.rourseName
        this.init()
    },
    methods: {
        init() {
            getStudyRows(this.courseId, this.studentParams).then(res => {
                this.studentTotal = res.total
                this.listenCourseNum = res.rows.map(item => {
                    if (!item.data) {
                        item.startTime = '未开始'
                        return item
                    }
                    const tempData = JSON.parse(item.data)
                    const courseKey = 'courseId_' + this.courseId
                    item.startTime = tempData.find(ph => {
                        return ph[courseKey]
                    })[courseKey]
                    return item
                })
            })
        },
        async  excelExport() {
           const res = await expLearnNum(this.courseId)
           const blob = new Blob([res])
           saveAs(blob, this.rourseName + '学习人数表.xlsx')
        }
    }
}
</script>

<style></style>