<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="80px">
            <el-form-item label="任务名称" prop="curriculaName">
                <el-select v-model="queryParams.curriculaName" placeholder="请选择任务名称" @change="updateClassList">
                    <el-option v-for="(item, index) in taskNameList" :key="index" :label="item.curriculaName"
                        :value="item.curriculaId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="班级" prop="classId">
                <el-select v-model="queryParams.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 label="课程类型" prop="courseType">
                <el-select v-model="queryParams.courseType" placeholder="请选择课程类型" clearable>
                    <el-option v-for="(item, index) in dict.type.course_type" :key="index" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="选课状态" prop="curriculaState">
                <el-select v-model="queryParams.curriculaState" placeholder="请选择选课状态" clearable>
                    <el-option v-for="(item, index) in dict.type.curricula_state" :key="index" :label="item.label"
                        :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="学生姓名" prop="studentName">
                <el-input v-model="queryParams.studentName" placeholder="请输入学生姓名" clearable />
            </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 type="warning" icon="el-icon-upload2" size="mini" @click="exportRecord">导出</el-button>
            </el-form-item>
        </el-form>
        <div class="flexBlock person">
            <div>总人数：{{ taskStats.total }} 人</div>
            <div>已选课：<span>{{ taskStats.selected }}</span> 人</div>
        </div>
        <el-table :data="courseSelectionData" stripe>
            <el-table-column label="序号" type="index" width="55" align="center" />
            <el-table-column label="学生姓名" align="center" prop="studentName" />
            <el-table-column label="身份证号" align="center" prop="idCard" />
            <el-table-column label="学号" align="center" prop="studentNumber" />
            <el-table-column label="课程类型" align="center" prop="courseType">
                <template slot-scope="{ row }">
                    <div>{{ selectDictLabel(dict.type.course_type, row.courseType) }}</div>
                </template>
            </el-table-column>
            <el-table-column label="选课时间" align="center" prop="curriculaTime" />
            <el-table-column label="选课状态" align="center" prop="curriculaState">
                <template slot-scope="{ row }">
                    <div>{{ selectDictLabel(dict.type.curricula_state, row.curriculaState) }}</div>
                </template>
            </el-table-column>
            <el-table-column label="已选专业/课程" align="center" prop="orgname">
                <template slot-scope="{ row }">
                    <div v-if="row.courseType == 1">{{ selectDictLabels(dict.type.specialty, row.selectedMajor) }}</div>
                    <div v-else-if="row.courseType == 2">{{ selectDictLabel(dict.type.section_type, row.selectedCourse) }}
                    </div>
                    <div v-else-if="row.courseType == 3">
                        {{ selectDictLabel(dict.type.section_type, row.selectedCourse) }}
                        {{ selectDictLabel(dict.type.art_subject, row.selectedSubject) }}
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <pagination ref="pageBlock" v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>
</template>

<script>

import { getStudentsList, getDetailInfo, classList } from "@/api/smartSchool/classAdviser/courseView";

export default {
    dicts: ['curricula_state', 'course_type', 'specialty', 'section_type', 'art_subject'],
    data() {
        return {
            taskStats: {},
            //班级
            grades: [],
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                curriculaId: "",
                curriculaName: "",
                classId: '',
                courseType: "",
                curriculaState: "",
                studentName: "",

            },
            courseTypeList: [], //课程类型
            selectionStatusList: [], //选课状态
            courseSelectionData: [],
            taskNameList: [], //任务名称
            classList: [], //班级
            loading: false,
            total: 0,
            totalPerson: 0, // 总人数
            choosePerson: 0 // 已选人数
        }
    },
    mounted() {

        this.getTaskNameList();
    },
    methods: {
        getList() {
            this.loading = true
            let data = {
                curriculaId: this.queryParams.curriculaName,
                classId: this.queryParams.classId,
                courseType: this.queryParams.courseType,
                curriculaState: this.queryParams.curriculaState,
                studentName: this.queryParams.studentName,
            }
            console.log('data', data);
            getStudentsList(data).then(res => {
                // console.log('this.grades', this.grades);
                if (res.code == 200) {
                    this.courseSelectionData = res.rows;
                    console.log('res.rows', res.rows);
                    // 更新人数/总人数
                    this.calculateStats();
                    this.total = res.total
                    this.loading = false
                }
            }

            )

        },
        //任务名称下拉框
        getTaskNameList() {
            getDetailInfo({ ...this.queryParams }).then(res => {
                if (res.code == 200) {
                    this.taskNameList = res.data;
                    // 获取最新一次的任务名称
                    const latestTask = this.taskNameList[0]; // 假设任务名称列表按照时间降序排列
                    // 设置默认选中的任务名称
                    this.queryParams.curriculaName = latestTask.curriculaId;
                    console.log("latestTask.curriculaId", latestTask.curriculaId);
                    this.getList(latestTask.curriculaId);
                    this.getClassList(latestTask.grade);
                    //人数总人数
                    // this.calculateStats();
                    // console.log('this.taskNameList', this.taskNameList);
                    this.grades = res.data.map(item => {
                        return {
                            curriculaId: item.curriculaId,
                            grade: item.grade,
                        }
                    });
                }
            })
        },
        //下拉框数据联动
        updateClassList() {
            const selectedCurriculaId = this.queryParams.curriculaName;
            const selectedTask = this.taskNameList.find(item => item.curriculaId === selectedCurriculaId);
            const selectedGrade = selectedTask.grade;
            this.getClassList(selectedGrade);
            // this.calculateStats();
        },
        //任务名称和人数数据联动
        calculateStats() {
            const selectedTask = this.taskNameList.find(item => item.curriculaId === this.queryParams.curriculaName);
            if (selectedTask) {
                this.taskStats.total = selectedTask.zrs;
                this.taskStats.selected = selectedTask.yxrs;
            }
        },

        //班级下拉框
        getClassList(grades) {
            classList(grades).then(res => {
                if (res.code === 200) {
                    // console.log(this.grades);
                    this.classList = res.data;
                }
            });
        },


        //重置
        resetQuery() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10
            };
            //默认选择最新的任务名称
            if (this.taskNameList.length > 0) {
                const firstTask = this.taskNameList[0];
                this.queryParams.curriculaName = firstTask.curriculaId;
            }
            this.taskStats.total = 0;
            this.taskStats.selected = 0;

            // this.calculateStats();
            this.resetForm("queryParams");
            this.getList();
        },

        //导出
        exportRecord() {
            console.log('this.queryParams.curriculaName', this.queryParams.curriculaName);
            let data = {
                curriculaId: this.queryParams.curriculaName,
                classId: this.queryParams.classId,
                courseType: this.queryParams.courseType,
                curriculaState: this.queryParams.curriculaState,
                studentName: this.queryParams.studentName,
            }
            console.log('data', data);
            this.download(
                "curricula/student/exportBzr",
                { ...data },
                `学生选课信息_${new Date().getTime()}.xlsx`
            );
        },


    }

}
</script>

<style lang="scss" scoped>
.person {
    line-height: 35px;
    color: #333333;
    font-size: 14px;
    padding-bottom: 10px;
}

.person div:last-child {
    padding-left: 20px;
}

.person div:last-child span {
    color: #1890ff;
    font-weight: 500;
}
</style>
