<template>
    <div class="NCC-common-layout">
        <div class="NCC-common-layout-center">
            <!-- 搜索区域 -->
            <el-row class="NCC-common-search-box" :gutter="16">
                <el-form @submit.native.prevent>
                    <el-col :span="6">
                        <el-form-item label="班级名称">
                            <el-input v-model="query.className" placeholder="请输入班级名称" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="授课老师">
                            <userSelect v-model="query.teacherId" placeholder="请选择授课老师" clearable />
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="开始时间">
                            <el-date-picker v-model="query.startTime" type="date" placeholder="选择开始时间"
                                value-format="yyyy-MM-dd" clearable>
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
                            <el-button icon="el-icon-refresh-right" @click="reset()">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>

            <!-- 主要内容区域 -->
            <div class="NCC-common-layout-main NCC-flex-main">
                <!-- 操作按钮区域 -->
                <div class="NCC-common-head">
                    <div>
                        <el-button type="primary" icon="el-icon-plus" @click="addClassHandle()">创建班级</el-button>
                        <el-button type="success" icon="el-icon-user"
                            @click="addStudentHandle()">添加学员(需选择班级)</el-button>
                        <el-button type="text" icon="el-icon-download" @click="exportData()">导出</el-button>
                    </div>
                    <div class="NCC-common-head-right">
                        <el-tooltip effect="dark" content="刷新" placement="top">
                            <el-link icon="icon-ym icon-ym-Refresh NCC-common-head-icon" :underline="false"
                                @click="reset()" />
                        </el-tooltip>
                        <screenfull isContainer />
                    </div>
                </div>

                <!-- 班级列表表格 -->
                <NCC-table v-loading="listLoading" :data="list" has-c @selection-change="handleSelectionChange">
                    <el-table-column prop="className" label="班级名称" align="left" show-overflow-tooltip />
                    <el-table-column prop="teacherName" label="授课老师" align="left" show-overflow-tooltip />
                    <el-table-column prop="startTime" label="开始时间" align="center" width="120">
                        <template slot-scope="scope">
                            {{ scope.row.startTime | dateFormat }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="endTime" label="结束时间" align="center" width="120">
                        <template slot-scope="scope">
                            {{ scope.row.endTime | dateFormat }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="remark" label="备注" align="left" show-overflow-tooltip />
                    <el-table-column label="操作" align="center" width="200" fixed="right">
                        <template slot-scope="scope">
                            <el-button type="text" @click="viewStudents(scope.row)">查看学员</el-button>
                            <el-button type="text" @click="addStudentsToClass(scope.row)">添加学员</el-button>
                            <el-button type="text" @click="viewStudyRecords(scope.row)">学习记录</el-button>
                        </template>
                    </el-table-column>
                </NCC-table>

                <!-- 分页组件 -->
                <pagination v-show="total > 0" :total="total" :page.sync="query.currentPage"
                    :limit.sync="query.pageSize" @pagination="getList" />
            </div>
        </div>

        <!-- 创建班级弹窗 -->
        <CreateClassForm v-if="createClassVisible" ref="CreateClassForm" @refreshDataList="getList" />

        <!-- 添加学员弹窗 -->
        <AddStudentForm v-if="addStudentVisible" ref="AddStudentForm" @refreshDataList="getList" />

        <!-- 学员列表弹窗 -->
        <StudentListDialog v-if="studentListVisible" ref="StudentListDialog"
            @viewStudyRecords="handleViewStudyRecords" />

        <!-- 学习记录弹窗 -->
        <StudyRecordDialog v-if="studyRecordVisible" ref="StudyRecordDialog" />
    </div>
</template>

<script>
import { getClassList } from '@/api/extend/lqStudyClass'
import CreateClassForm from './CreateClassForm'
import AddStudentForm from './AddStudentForm'
import StudentListDialog from './StudentListDialog'
import StudyRecordDialog from './StudyRecordDialog'
import Pagination from '@/components/Pagination'

export default {
    name: 'LqStudyClass',
    components: {
        CreateClassForm,
        AddStudentForm,
        StudentListDialog,
        StudyRecordDialog,
        Pagination
    },
    data() {
        return {
            query: {
                className: '',
                teacherId: '',
                startTime: '',
                endTime: '',
                currentPage: 1,
                pageSize: 20
            },
            list: [],
            total: 0,
            listLoading: true,
            createClassVisible: false,
            addStudentVisible: false,
            studentListVisible: false,
            studyRecordVisible: false,
            selectedIds: []
        }
    },
    created() {
        this.getList()
    },
    methods: {
        // 获取班级列表
        getList() {
            this.listLoading = true
            getClassList(this.query).then(response => {
                if (response.code === 200) {
                    this.list = response.data.list || []
                    this.total = (response.data.pagination && response.data.pagination.total) || 0
                } else {
                    this.$message.error(response.msg || '获取班级列表失败')
                }
                this.listLoading = false
            }).catch(() => {
                this.listLoading = false
            })
        },

        // 搜索
        search() {
            this.query.currentPage = 1
            this.getList()
        },

        // 重置
        reset() {
            this.query = {
                className: '',
                teacherId: '',
                startTime: '',
                endTime: '',
                currentPage: 1,
                pageSize: 20
            }
            this.getList()
        },

        // 创建班级
        addClassHandle() {
            this.createClassVisible = true
            this.$nextTick(() => {
                this.$refs.CreateClassForm.init()
            })
        },

        // 添加学员
        addStudentHandle() {
            if (this.selectedIds.length === 0) {
                this.$message.warning('请先选择一个班级')
                return
            }
            if (this.selectedIds.length > 1) {
                this.$message.warning('请只选择一个班级')
                return
            }

            // 找到选中的班级信息
            const selectedClass = this.list.find(item => item.id === this.selectedIds[0])
            if (selectedClass) {
                this.addStudentVisible = true
                this.$nextTick(() => {
                    this.$refs.AddStudentForm.init(selectedClass.id, selectedClass.className)
                })
            }
        },

        // 向班级添加学员
        addStudentsToClass(row) {
            this.addStudentVisible = true
            this.$nextTick(() => {
                this.$refs.AddStudentForm.init(row.id, row.className)
            })
        },

        // 查看学员
        viewStudents(row) {
            this.studentListVisible = true
            this.$nextTick(() => {
                this.$refs.StudentListDialog.init(row.id, row.className)
            })
        },

        // 查看学习记录
        viewStudyRecords(row) {
            this.studyRecordVisible = true
            this.$nextTick(() => {
                this.$refs.StudyRecordDialog.init(row.id, row.className)
            })
        },

        // 多选
        handleSelectionChange(selection) {
            this.selectedIds = selection.map(item => item.id)
        },

        // 处理学员列表中的学习记录查看
        handleViewStudyRecords(row) {
            this.studyRecordVisible = true
            this.$nextTick(() => {
                this.$refs.StudyRecordDialog.init(row.classId, row.className)
            })
        },
    }
}
</script>

<style scoped>
.NCC-common-layout {
    height: 100%;
}
</style>
