<template>
    <div class="singInWrapper">
        <div class="expBtn">
            <el-button icon="el-icon-download" type="warning" size="small" style="margin-bottom:20px" @click="excelExport">导出为excel</el-button>
        </div>
        <el-table v-loading="loading" :data="signinList">
            <el-table-column label="序号" type="index" />
            <el-table-column label="学生姓名" prop="studentName" align="center" />
            <el-table-column label="学号" prop="studentCode" align="center" />
            <el-table-column label="手机号" prop="mobile" align="center"> </el-table-column>
            <!-- <el-table-column label="签到总次数" prop="createTime" align="center"></el-table-column> -->
            <el-table-column label="实际签到次数" prop="signCount" align="center"></el-table-column>
        </el-table>

        <pagination
            v-show="total > 0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="signIninit"
        />
    </div>
</template>

<script>
import { getAttendanceList, delAttendance, exportAttendance } from '@/api/trainService/index'
import { saveAs } from 'file-saver'

export default {
    created() {
        const query = this.$route.query
        this.name = query.name
        this.id = query.id
        this.signIninit()
    },
    props: {},
    data() {
        return {
            name: '',
            id: '',
            loading: false,
            total: 0,
            signinList: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
        }
    },
    methods: {
        async signIninit() {
            const res = await getAttendanceList(this.id)
            this.total = res.total
            this.signinList = res.rows
        },
        async excelExport() {
            const res = await exportAttendance(this.id)
            const blob = new Blob([res])
            saveAs(blob, this.name + '考勤表.xlsx')
        },
        toDelSignInItem(params) {
            this.$confirm('是否确认删除', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            })
                .then(function () {
                    return delAttendance(params.signId)
                })
                .then(() => {
                    this.signIninit()
                    this.$message.success('删除成功')
                })
        },
    },
}
</script>

<style lang="scss" scoped>
.singInWrapper {
    padding: 20px;
    .expBtn {
        display: flex;
        margin: 5px;
        justify-content: space-between;
    }
}
</style>