<style lang="scss" scoped>
@import "../table.scss";
</style>
<template>
    <div>
        <el-card>
            <!--  检索区域  -->
            <div class="seachbox">

                <div class="seachbox">
                    <!-- 学期检索 --><!-- <el-select v-model="queryParams.Term" @change="getgetcourseListinfo()" filterable
                        placeholder="学期" clearable size="small" class="ml-5 seachbox_input">
                        <el-option v-for="item in TermList" :key="item.name" :label="item.name" :value="item.value" />
                    </el-select> -->
                    <!-- 学院检索  -->
                    <!-- <el-select v-model="queryParams.collegeId" filterable @change="getgetcourseListinfo()"
                        placeholder="学院" clearable size="small" class="ml-5 seachbox_input">

                        <el-option v-for="item in CollegeList" :key="item.value" :label="item.name"
                            :value="item.value" />
                    </el-select> -->
                    <!-- 教师检索  -->
                    <el-input v-model.trim="queryParams.nname" placeholder="教师姓名" clearable size="small"
                        style="width:200px; margin:0px 10px 0px 0px "></el-input>
                    <el-input v-model.trim="queryParams.num" placeholder="教师工号" clearable size="small"
                        style="width:200px; margin:0px 10px 0px 0px "></el-input>
                    <!-- 课程名检索 -->
                    <el-select v-model="queryParams.coursevalue" filterable placeholder="课程名" clearable size="small"
                        class="ml-5 seachbox_input">
                        <el-option v-for="item in courseList
                                    " :key="item.CourceCode.toString()" :label="item.CourceName"
                            :value="item.CourceCode.toString()" />
                    </el-select>
                    <!-- 按钮——————搜索 -->
                    <el-button class="ml-5" style="margin-left: 10px;" type="primary"
                        @click="ClickSearch">搜索</el-button>
                </div>
                <!-- 状态检索 -->
                <!-- <div class="status">
                   
                            </div> -->
            </div>
            <!-- 检索结束  -->

            <!-- table开始-->
            <el-table :data="tableData" border stripe :header-cell-style="{ 'text-align': 'center' }"
                :scrollbar-always-on="true">
                <!-- <el-table-column type="selection" width="55" align="center" /> -->
                <el-table-column prop="CollegeName" align="center" label="学院">
                </el-table-column>
                <el-table-column prop="CourceName" label="课程" align="left">
                </el-table-column>
                <el-table-column prop="Teacher" align="center" label="教师" :show-overflow-tooltip="true">
                    <template v-slot="scope">
                        <span>{{ scope.row.TeacherName }}({{ scope.row.TeacherNumber }}) </span>
                    </template>
                </el-table-column>
                <el-table-column prop="ClassName" align="left" label="班级">
                </el-table-column>
                <el-table-column prop="ClassroomName" align="left" label="教室">
                </el-table-column>
                <el-table-column prop="weeksAndWeekday" align="center" label="节次">
                    <template v-slot="scope">
                        <span>{{ scope.row.ScheduleName }}({{ scope.row.AcademicNumber }})</span>
                    </template>
                </el-table-column>

                <el-table-column label="操作" align="center" width="150" fixed="right">
                    <template v-slot="scope">
                        <Details-Button permission="courseStatisticsColumns:Details" v-if="scope.row.ReviewNumber != 0"
                            @clicknative="detailTableItem(scope.row)" content="详情"></Details-Button>
                        <span v-else>暂无考勤信息</span>
                    </template>
                </el-table-column>
            </el-table>
            <!-- table结束 -->
            <!-- 分页 -->
            <div class="paginationbox">
                <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageobj.pageNum" :page-sizes="pageobj.pageSizeOptions" :page-size="pageobj.pageSize"
                    layout="total, sizes, prev, pager, next" :total="pageobj.Total">
                </el-pagination>
            </div>



        </el-card>
    </div>
</template>

<script>
import { nanoid } from 'nanoid'
import { getsplit } from "@/utils/common.js"

import { getTermList, getCollegeList, getcourseList, getTabledata } from "@/api/courseStatistics.js"
export default {
    name: 'courseStatistics_index',
    components: {

    },
    directives: {

    },
    data() {

        return {
            //检索部分
            // 检索 ---数组列表  数组系列
            TermList: [],          //检索——学期
            CollegeList: [],       //检索——学院 
            courseList: [],
            tableData: [],         //检索——表格
            allvalue: 0,
            //检索  ----参数
            queryParams: {
                Term: '',
                semesterNum: "全部学期",
                collegeId: '',
                nname: "",
                num: "",
                coursevalue: "",    //日期
            },

            //新增  -----form数组列表
            isedit: false,
            //分页
            pageobj: {
                oldTotal: 0,
                oldCurrent: 1,
                Total: 0,
                pageSize: 10,
                pageNum: 1,
                pageSizeOptions: [10, 20, 50, 100, 150, 200],
            }
        }
    },
    methods: {
        //分页部分
        //切换页码
        handleCurrentChange(e) {    //e---指代的是页码数
            this.pageobj.pageNum = Math.ceil(e);
            this.getTabledatainfo(this.pageobj.pageNum);
        },
        //切换每页条数
        handleSizeChange(e) {  //e--指代的是每页条数
            this.pageobj.pageSize = Math.ceil(e);
            this.pageobj.pageNum = 1;    //这里是当我们位于每页十条的时候的第5页的时候  我们切换每页条数 页面跳转到第一页
            this.getTabledatainfo(this.pageobj.pageNum);
        },
        // 检索部分
        // 检索——Term（学期）
        getTermListinfo() {

            getTermList({ SelectTermList: '' })
                .then((res) => {
                    this.TermList = res
                })
        },
        //检索--课程名
        getgetcourseListinfo() {
            this.queryParams.semesterNum =
                this.queryParams.semesterNum == "全部学期"
                    ? ""
                    : this.queryParams.semesterNum;
            getcourseList({ term: this.queryParams.semesterNum, collegeId: this.queryParams.collegeId || 0 })
                .then((res) => {
                    this.courseList = res
                })
        },
        //检索——College（学院）
        getCollegeListinfo(params) {

            const { collegeId, isAll } = params;

            getCollegeList({ SelectCollegeList: collegeId, isAll: isAll })
                .then((res) => {
                    this.CollegeList = res
                })
        },
        //检索——Classroom（教室）
        getClassroomListinfo() {
            getClassroomList({
                bName: '',
            }).then((res) => {
                this.ClassroomList = res
            })
        },

        ClickSearch() {
            //搜索
            this.getTabledatainfo(1);
        },
        //All检索——表格

        getTabledatainfo(pageNum) {  //pageNum---当前页
            let semesterNum1 = this.queryParams.Term;
            let collegeId1 = this.queryParams.collegeId || 0;
            let nname = this.queryParams.nname;
            let num = this.queryParams.num;
            let coursevalue = this.queryParams.coursevalue;

            this.pageobj.pageNum = pageNum;
            getTabledata({
                oldTotal: this.pageobj.oldTotal,
                oldCurrent: this.pageobj.oldCurrent,
                pageSize: this.pageobj.pageSize,
                pageNum: pageNum,
                collegeId: collegeId1,
                teaNum: num,
                teaName: nname,
                courceCode: coursevalue,
                term: semesterNum1 === "全部学期" ? "" : semesterNum1,
            }).then((res) => {
                let data = res;
                if (data.length > 0) {
                    this.pageobj.Total = data[0].total;
                } else {
                    this.pageobj.Total = 0;
                    this.pageobj.pageNum = 1;
                }

                this.tableData = data;
                // debugger

            })
        },
        // 检索完成  
        detailTableItem(row) {
            // debugger
            let argu = {
                courseId: row.CourceCode,
                ClassroomCode: row.ClassroomCode,
                TeacherNumber: row.TeacherNumber,
            };
            this.$router.push({
                name: "courseInfos",
                query: argu,

            });
        },
        //初始化
        Initialization() {
            this.getTermListinfo();          //学期
            this.getCollegeListinfo({
                collegeId: "",
                isAll: false,
            });     //学院
            this.getgetcourseListinfo()
            this.getTabledatainfo(1)        //桌面
        },
        // 添加页面

        //获取学院信息 --这里获取学院信息有点重复
        getNewCollegeListinfo() {
            getNewCollegeList({
                scSchoolCode: '',
            }).then((res) => {
                this.NewCollegeList = res
            }).catch((err) => {
                // console.log('学院信息请求错误');
            })
        },
        CollegeChange() {
            this.Form.Major = "";
            this.Form.Grade = "";
            this.Form.Class = "";
            this.getNewMajorListinfo()
        },


    },
    mounted() {
        this.Initialization()
    },
    activated() {

    },
    created() {

    },
}
</script>

<style lang="scss" scoped>
.status {
    display: flex;
    flex-direction: row;
}

.date {
    margin: 0px 10px 0px 0px;
}

.el-form .el-select {
    width: 80%;
}

.el-form .el-input {
    width: 80%;
}

.demo-drawerchange__footer {
    position: relative;
    margin-top: 50px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.box-card {
    position: absolute;
    width: 60%;
    left: 20%;
    top: 30%;
    z-index: 3;
}

.Newfooter {
    position: relative;
    float: right;
    margin: 10px 0px;
}

.btn_close {
    box-shadow: none;
    border: none;
    background: none;
    color: #606266;
}

.btn_cancel {
    box-shadow: none;
    border: none;
    background: none;
}

.div_forshow {}

.div_show {
    position: relative;
    margin: 5px 0px;
    border: 2px dotted rgba(113, 158, 243, 0.3);
    display: flex;
    flex-direction: row;
    font-size: 13px;
}

.div_item {
    width: 220px;
    margin: 0px 20px;
}

.btn_semiselect {
    margin: 2px 0px;
    border: none;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    box-shadow: none;
    background: rgba(139, 139, 241, 0.5);
    color: white;
}

.div_btn {
    width: 60px;
}
</style>