<template>
    <div class="app-container">
        <el-form :model="queryForm" ref="queryForm" size="small" :inline="true" label-width="80px">
            <el-form-item prop="studentName" label="学生姓名">
                <el-input clearable v-model="queryForm.studentName" placeholder="学生姓名"></el-input>
            </el-form-item>
            <el-form-item prop="classId" label="班级">
                <el-select v-model="queryForm.classId" placeholder="班级" clearable>
                    <el-option v-for="(item, index) in classList" :key="index" :label="item.className"
                        :value="item.classId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="selectedCourse" label="已选课程">
                <el-select v-model="queryForm.selectedCourse" placeholder="请选择学生已选专业" clearable>
                    <el-option v-for="(item, index) in dict.type.section_type" :key="index" :label="item.label"
                        :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                <el-button icon="el-icon-user" size="mini" :disabled="hasclassName" @click="shiftRules">分班规则</el-button>
                <el-button type="warning" icon="el-icon-upload2" size="mini" @click="handleExport">导出</el-button>
            </el-form-item>
        </el-form>
        <!-- 表单信息 -->
        <el-table border v-loading="loading" :row-style="{ height: '35px' }" :cell-style="{ padding: '0' }"
            :data="studentsList" style="font-size: 14px" stripe>
            <el-table-column label="班级" prop="className" align="center" width="150px" />
            <el-table-column label="学生姓名" prop="studentName" align="center" width="150px" />
            <el-table-column label="学号" prop="studentNumber" align="center" />
            <el-table-column label="身份证号" prop="idCard" width="300px" align="center" />
            <el-table-column label="成绩" prop="courseScore" align="center" />
            <el-table-column label="已选课程" prop="selectedCourse" align="center">
                <template slot-scope="{ row }">
                    <div>{{ selectDictLabel(dict.type.section_type, row.selectedCourse) }}</div>
                </template>

            </el-table-column>
            <el-table-column label="所分班级" prop="divisionClassesName" align="center" />
        </el-table>

        <!-- 分班规则弹窗 -->
        <el-dialog :title="title" :visible.sync="open" width="50%" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="140px">
                <div>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="分班规则" prop="divisionClassesRule">
                                <el-radio-group v-model="form.divisionClassesRule">
                                    <el-radio label="1">平行分班</el-radio>
                                    <el-radio label="2">分层分班</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-form-item v-for="course in selectedCourse" :key="course.id"
                        :label="`${course.courseName} (${course.coursePeopleNumber})`">
                        <div class="input-wrapper">
                            <el-input v-model="course.classesNumber" placeholder="班级数量"></el-input>
                            <el-input v-model="course.peopleNumber" placeholder="每班人数"></el-input>
                        </div>
                    </el-form-item>
                </div>
            </el-form>

            <div style="text-align: center">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>

        </el-dialog>

        <pagination v-show="total > 0" :total="total" :page.sync="queryForm.pageNum" :limit.sync="queryForm.pageSize"
            @pagination="getList" />

    </div>
</template>

<script>
import { classList } from "../../../../../api/smartSchool/gradeWork/courseSelection/taskPublishing";
import { courseSelectionSummerList, addDivision, getsDivision } from "../../../../../api/smartSchool/gradeWork/courseSelection/courseSelection";

export default {
    name: "springView",
    dicts: ['section_type'],
    data() {
        return {
            divisionClassesRule: '',
            selectedCourse: [],
            classList: [],
            // 查询表单
            queryForm: {
                curriculaId: "",
                studentName: "",
                classId: "",
                selectedCourse: "",
                pageNum: 1,
                pageSize: 10
            },
            form: {
                curriculaId: "",
                course: "",
                courseName: "",
                coursePeopleNumber: "",
                classesNumber: "",
                peopleNumber: "",
                divisionClassesRule: "",
                divisionClassesFrequency: '1',
            },
            // 遮罩层
            loading: false,
            total: 0,
            // 信息列表
            studentsList: [],
            // 新增/编辑表单
            postForm: {

            },

            fbgz: '',
            // 是否显示弹出层
            open: false,
            // 校验规则
            rules: {

            },
            // 弹出层标题
            title: '',
            // 是否禁用删除按钮--项目明细
            multiple: false,

        }
    },
    computed: {
        hasclassName() {
            return this.studentsList.find(item => item.divisionClassesName !== null) !== undefined;
        }
    },

    created() {
        this.getList();
        this.getClassList();
    },
    methods: {

        // 获取列表
        getList() {
            this.queryForm.curriculaId = this.$route.query.id;
            courseSelectionSummerList(this.queryForm).then(res => {
                if (res.code == 200) {
                    this.studentsList = res.rows;
                    console.log('this.studentsList', this.studentsList);
                    this.total = res.total;
                    this.loading = false;
                }
            })
        },


        //获取班级下拉框数据
        getClassList() {
            let grade = this.$route.query.grade;
            classList(grade).then(res => {
                if (res.code == 200) {
                    this.classList = res.data;
                }
            })
        },
        // 分班规则
        shiftRules() {
            this.reset();
            this.open = true;
            this.getCourseSelection();
            this.title = "分班规则";
        },
        //获取每种课程选择人数
        getCourseSelection() {
            getsDivision({ curriculaId: this.queryForm.curriculaId }).then(res => {
                if (res.code == 200) {
                    this.selectedCourse = res.data.map(item => {
                        return {
                            curriculaId: this.queryForm.curriculaId,
                            course: item.selectedCourse,
                            courseName: item.selectedCourseName,
                            coursePeopleNumber: item.peopleNumber,
                            classesNumber: '',
                            peopleNumber: '',
                            divisionClassesRule: "",
                            divisionClassesFrequency: '1'
                        }
                    });

                    console.log('this.selectedCourse', this.selectedCourse);
                }
            })
        },

        // 重置按钮
        resetQuery() {
            this.queryForm = {
                pageNum: 1,
                pageSize: 10,
                curriculaId: "",
                studentName: "",
                classId: "",
                selectedCourse: "",
                pageNum: 1,
                pageSize: 10

            };
            this.resetForm("queryForm");
            this.getList();
        },

        // 重置
        reset() {
            this.form = {
                curriculaId: "",
                course: "",
                courseName: "",
                coursePeopleNumber: "",
                classesNumber: "",
                peopleNumber: "",
                divisionClassesRule: "",
                divisionClassesFrequency: '1',
            }
            this.resetForm('form');
        },

        // 取消按钮
        cancel() {
            this.open = false;
            this.reset();
            this.resetForm('postForm');
        },
        // 导出
        handleExport() {
            this.download('/curricula/student/exportXj', {
                ...this.queryForm,
            }, `学生夏季选课查看_${Date.now()}.xlsx`)
        },
        // 分班按钮
        submitForm() {
            this.$confirm('确定要分班吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const formData = this.selectedCourse.map((course) => {
                    return {
                        curriculaId: this.queryForm.curriculaId,
                        course: course.course,
                        classesNumber: course.classesNumber,
                        peopleNumber: course.peopleNumber,
                        coursePeopleNumber: course.coursePeopleNumber,
                        divisionClassesRule: this.form.divisionClassesRule,
                        divisionClassesFrequency: course.divisionClassesFrequency
                    };
                });

                addDivision(formData).then((response) => {
                    console.log(response);
                    this.$modal.msgSuccess('分班成功');
                    this.open = false;
                    this.getList();
                }).catch(error => {
                    console.error(error);
                });



            })

        },











    }
}
</script>

<style lang="scss" scoped>
::v-deep .inline-table .cell {
    padding: 0;
}

.title {
    font-size: 20px;
    text-align: center;
}

.el-col {
    margin-right: 10px;
}

.input-wrapper {
    display: flex;
}

.input-wrapper el-input {
    margin-right: 10px;
    /* 可调整元素之间的间距 */
}
</style>
