<template>
    <el-dialog title="班级学员列表" :visible.sync="visible" width="1000px" @close="closeDialog">
        <div class="student-list-container">
            <!-- 搜索区域 -->
            <div class="search-section">
                <el-form :model="query" :inline="true" class="search-form">
                    <el-form-item label="学员" prop="employeeId">
                        <userSelect v-model="query.employeeId" placeholder="请选择学员" size="small" />
                    </el-form-item>
                    <el-form-item label="HR归属">
                        <el-input v-model="query.hrBelong" placeholder="请输入HR归属" clearable size="small" />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" size="small" @click="search">搜索</el-button>
                        <el-button size="small" @click="reset">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>

            <!-- 学员列表 -->
            <div class="table-section">
                <el-table :data="studentList" v-loading="loading" border stripe style="width: 100%">
                    <el-table-column prop="employeeName" label="学员姓名" width="120" fixed="left" />
                    <el-table-column prop="employeePhone" label="手机号" width="140" />
                    <!-- <el-table-column prop="employeeId" label="员工ID" width="120" /> -->
                    <el-table-column prop="admissionTime" label="入学时间" width="180" :formatter="ncc.tableDateFormat">
                    </el-table-column>
                    <el-table-column prop="className" label="班级名称" width="150" />
                    <el-table-column prop="hrBelong" label="HR归属" width="120" />
                    <el-table-column label="操作" width="120" fixed="right">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="viewStudyRecords(scope.row)">学习记录</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页 -->
                <div class="pagination-section">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                        :current-page="pagination.pageIndex" :page-sizes="[10, 20, 50, 100]"
                        :page-size="pagination.pageSize" layout="total, sizes, prev, pager, next, jumper"
                        :total="pagination.total">
                    </el-pagination>
                </div>
            </div>
        </div>

        <!-- <div slot="footer" class="dialog-footer">
            <el-button @click="closeDialog">关闭</el-button>
        </div> -->
    </el-dialog>
</template>

<script>
import { getStudentListByClassId } from '@/api/extend/lqStudyClass'

export default {
    name: 'StudentListDialog',
    data() {
        return {
            visible: false,
            loading: false,
            classId: '',
            className: '',
            studentList: [],
            query: {
                employeeName: '',
                employeePhone: '',
                employeeId: '',
                hrBelong: '',
                classId: ''
            },
            pagination: {
                pageIndex: 1,
                pageSize: 20,
                total: 0
            }
        }
    },
    methods: {
        init(classId, className) {
            this.visible = true
            this.classId = classId
            this.className = className
            this.query.classId = classId
            this.getStudentList()
        },

        // 获取学员列表
        getStudentList() {
            this.loading = true
            const params = {
                ...this.query,
                currentPage: this.pagination.pageIndex,
                pageSize: this.pagination.pageSize
            }

            getStudentListByClassId(params).then(response => {
                if (response.code === 200) {
                    this.studentList = response.data.list || []
                    this.pagination.total = (response.data.pagination && response.data.pagination.total) || 0
                } else {
                    this.$message.error(response.msg || '获取学员列表失败')
                }
                this.loading = false
            }).catch(() => {
                this.loading = false
            })
        },

        // 搜索
        search() {
            this.pagination.pageIndex = 1
            this.getStudentList()
        },

        // 重置
        reset() {
            this.query = {
                employeeName: '',
                employeePhone: '',
                employeeId: '',
                hrBelong: '',
                classId: this.classId
            }
            this.pagination.pageIndex = 1
            this.getStudentList()
        },

        // 分页大小改变
        handleSizeChange(val) {
            this.pagination.pageSize = val
            this.pagination.pageIndex = 1
            this.getStudentList()
        },

        // 当前页改变
        handleCurrentChange(val) {
            this.pagination.pageIndex = val
            this.getStudentList()
        },

        // 查看学习记录
        viewStudyRecords(row) {
            this.$emit('viewStudyRecords', row)
        },

        // 关闭弹窗
        closeDialog() {
            this.visible = false
            this.studentList = []
            this.query = {
                employeeName: '',
                employeePhone: '',
                employeeId: '',
                hrBelong: '',
                classId: ''
            }
            this.pagination = {
                pageIndex: 1,
                pageSize: 20,
                total: 0
            }
        }
    }
}
</script>

<style scoped>
.student-list-container {
    /* padding: 20px; */
}

.search-section {
    margin-bottom: 20px;
    padding: 15px;
    background: #f5f7fa;
    border-radius: 4px;
}

.search-form .el-form-item {
    margin-bottom: 10px;
}

.table-section {
    margin-bottom: 20px;
}

.pagination-section {
    text-align: right;
    margin-top: 20px;
}
</style>
