<template>
    <div class="app-container">
        <el-form :model="queryForm" ref="queryForm" size="small" :inline="true" label-width="68px">
            <el-form-item label="学年">
                <el-input v-model="queryForm.schoolYear" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="学期">
                <el-select v-model="queryForm.semester" placeholder="请选择" clearable style="width: 100%;">
                    <el-option v-for="dict in dict.type.semester" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="届别" prop="gradeYear">
                <el-input v-model="queryForm.gradeYear" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="年级" prop="gradeId">
                <el-select v-model="form.gradeId" placeholder="请选择" clearable :style="{ width: '100%' }"
                    @change="getClasslist(form.gradeId)">
                    <el-option v-for="(item, index) in gradeList" :key="index" :label="item.gradeName"
                        :value="item.gradeId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="班级" prop="classId">
                <el-select v-model="queryForm.classId" placeholder="请选择级部" clearable :style="{ width: '100%' }">
                    <el-option v-for="(item, index) in classList" :key="index" :label="item.classValue"
                        :value="item.classId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="班级类型">
                <el-select v-model="queryForm.classType" placeholder="请选择" clearable style="width: 100%;">
                    <el-option v-for="dict in dict.type.grade_type" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="queryForm.name" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-select v-model="queryForm.sex" placeholder="请选择" clearable style="width: 100%;">
                    <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="身份证号">
                <el-input v-model="queryForm.idCard" placeholder="请输入" clearable></el-input>
            </el-form-item>
            <el-form-item label="班主任">
                <el-select v-model="queryForm.classTeacherId" placeholder="请选择" :style="{ width: '100%' }" filterable>
                    <el-option v-for="item in deptOptions" :key="item.userId" :label="item.userName"
                        :value="item.userId"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="违纪类别">
                <el-select v-model="queryForm.violateType" placeholder="请选择" clearable style="width: 100%;">
                    <el-option v-for="dict in dict.type.violate_type" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="违纪次数">
                <el-select v-model="queryForm.violateNum" placeholder="请选择" clearable style="width: 100%;">
                    <el-option v-for="dict in dict.type.violate_num" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="处分结果">
                <el-select v-model="queryForm.punishResult" placeholder="请选择" clearable style="width: 100%;">
                    <el-option v-for="dict in dict.type.punish_result" :key="dict.value" :label="dict.label"
                        :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="处分时间">
                <el-date-picker v-model="queryForm.punishTime" type="date" value-format="yyyy-MM-dd" placeholder="请选择"
                    clearable>
                </el-date-picker>
            </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-form-item>

        </el-form>
        <el-table :data="tableData" :default-sort="{ prop: 'punishTime', order: 'descending' }" border style="width: 100%">
            <el-table-column align="center" type="index" label="序号" width="55" />
            <el-table-column align="center" prop="schoolYear" sortable label="学年" />
            <el-table-column align="center" prop="semester" sortable label="学期">
                <template slot-scope="{ row }">
                    <div>{{ selectDictLabel(dict.type.semester, row.semester) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="gradeYear" sortable label="届别" />
            <el-table-column align="center" prop="gradeName" sortable label="年级" />
            <el-table-column align="center" prop="className" sortable label="班级" />
            <el-table-column align="center" prop="classType" sortable label="班级类型" width="100">
                <template slot-scope="{ row }">
                    <div>{{ selectDictLabel(dict.type.grade_type, row.classType) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="name" sortable label="姓名" />
            <el-table-column align="center" prop="sex" sortable label="性别">
                <template slot-scope="{ row }">
                    <div>{{ selectDictLabel(dict.type.sys_user_sex, row.sex) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="idCard" sortable label="身份证号" width="180" />
            <el-table-column align="center" prop="classTeacher" sortable label="班主任" width="100" />
            <el-table-column align="center" prop="gradeDirector" sortable label="级部主任" width="100" />
            <el-table-column align="center" prop="violateType" sortable label="违纪类别" width="100">
                <template slot-scope="{ row }">
                    <div>{{ selectDictLabel(dict.type.violate_type, row.violateType) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="violateNum" sortable label="违纪次数" width="100">
                <template slot-scope="{ row }">
                    <div>{{ selectDictLabel(dict.type.violate_num, row.violateNum) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="punishResult" sortable label="处分结果" width="100">
                <template slot-scope="{ row }">
                    <div>{{ selectDictLabel(dict.type.punish_result, row.punishResult) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="punishTime" sortable label="处分时间" width="100" />
            <el-table-column align="center" prop="auditState" label="审核状态">
                <template slot-scope="{ row }">
                    <div>{{ selectDictLabel(dict.type.audit_state1, row.auditState) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="remark" sortable label="备注" />
            <el-table-column align="center" fixed="right" label="操作" width="180">
                <template slot-scope="scope">
                    <el-button @click="handleLook(scope.row)" type="text" size="small">查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryForm.pageNum" :limit.sync="queryForm.pageSize"
            @pagination="getList" />

        <!-- 查看-->
        <el-dialog title="详细信息" :visible.sync="dialogTableVisible" width="1100px">
            <el-form :model="form" ref="form" size="small" label-width="120px" :disabled="isEdit" :rules="rules">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="学年" prop="schoolYear">
                            <el-input v-model="form.schoolYear" placeholder="请输入" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="学期" prop="semester">
                            <el-select v-model="form.semester" placeholder="请选择" clearable style="width: 100%;">
                                <el-option v-for="dict in dict.type.semester" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="届别" prop="gradeYear">
                            <el-input v-model="form.gradeYear" placeholder="请输入" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>

                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="年级" prop="gradeId">
                            <el-select v-model="form.gradeId" placeholder="请选择" clearable :style="{ width: '100%' }"
                                @change="getClasslist(form.gradeId)">
                                <el-option v-for="(item, index) in gradeList" :key="index" :label="item.gradeName"
                                    :value="item.gradeId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="班级" prop="classId">
                            <el-select v-model="form.classId" placeholder="请选择级部" clearable :style="{ width: '100%' }">
                                <el-option v-for="(item, index) in classList" :key="index" :label="item.classValue"
                                    :value="item.classId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="班级类型" prop="classType">
                            <el-select v-model="form.classType" placeholder="请选择" clearable style="width: 100%;">
                                <el-option v-for="dict in dict.type.grade_type" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="form.name" placeholder="请输入" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="身份证号" prop="idCard">
                            <el-input v-model="form.idCard" @blur="handleIdCardBlur" maxlength="18" placeholder="请输入"
                                clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="性别" prop="sex">
                            <el-select v-model="form.sex" placeholder="请选择" clearable style="width: 100%;">
                                <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="班主任" prop="classTeacherId">
                            <el-select v-model="form.classTeacherId" placeholder="请选择" :style="{ width: '100%' }">
                                <el-option v-for="item in deptOptions" :key="item.userId" :label="item.userName"
                                    :value="item.userId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="级部主任" prop="gradeDirectorId">
                            <el-select v-model="form.gradeDirectorId" placeholder="请选择" :style="{ width: '100%' }">
                                <el-option v-for="item in deptOptions" :key="item.userId" :label="item.userName"
                                    :value="item.userId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="违纪类别" prop="violateType">
                            <el-select v-model="form.violateType" placeholder="请选择" clearable style="width: 100%;">
                                <el-option v-for="dict in dict.type.violate_type" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="违纪次数" prop="violateNum">
                            <el-select v-model="form.violateNum" placeholder="请选择" clearable style="width: 100%;">
                                <el-option v-for="dict in dict.type.violate_num" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="处分结果" prop="punishResult">
                            <el-select v-model="form.punishResult" placeholder="请选择" clearable style="width: 100%;">
                                <el-option v-for="dict in dict.type.punish_result" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="处分时间" prop="punishTime">
                            <el-date-picker v-model="form.punishTime" type="date" value-format="yyyy-MM-dd"
                                placeholder="请选择" clearable :style="{ width: '100%' }">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="form.remark" placeholder="请输入" clearable type="textarea"
                                :rows="2"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="cancelDialog">取 消</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>

import {
    listDiscipline,// 查看学生违纪列表(管理员)
    listDisciplinegr,//查看学生违纪列表(个人)
    getDiscipline,//查看详情
    addDiscipline,// 新增学生违纪(管理员)
    addDisciplinegr,// 新增学生违纪(个人)
    updateDiscipline,// 编辑学生违纪
    delDiscipline,// 删除学生违纪
    subApply,//提交
    getGrade,// 获取最新三个年级
    getClassList,// 根据年级获取班级,
    listDisciplinetg,//查看已通过
    getTeacher,//获取教师
} from '@/api/smartSchool/awardsDisciplinary/studentViolation/disciplinaryManagemen'
import { checkIdcard } from '@/utils/utilLibrary/validate'
export default {
    name: 'index',
    dicts: ['violate_type', 'violate_num', 'punish_result', 'sys_user_sex', 'grade_type', 'semester', 'audit_state1'],
    data() {
        return {
            queryForm: {
                pageNum: 1,
                pageSize: 10,
                schoolYear: "",
                semester: "",
                gradeYear: "",
                gradeId: "",
                classId: "",
                classType: "",
                name: "",
                sex: "",
                idCard: "",
                classTeacher: "",
                violateType: "",
                violateNum: "",
                punishResult: "",
                punishTime: "",

            },
            isEdit: false,
            gradeLists: [],
            //表格数据
            tableData: [


            ],
            //查看弹窗表格
            ExperimentalData: [],
            form: {
                pageNum: 1,
                pageSize: 10,
                schoolYear: "",
                semester: "",
                gradeYear: "",
                gradeId: "",
                classId: "",
                classType: "",
                name: "",
                sex: "",
                idCard: "",
                classTeacherId: "",
                gradeDirectorId: "",
                violateType: "",
                violateNum: "",
                punishResult: "",
                punishTime: "",
                remark: "",

            },
            //弹窗
            dialogTableVisible: false,
            total: 0,
            gradeList: [],
            classList: [],
            deptOptions: [],
            rules: {
                schoolYear: [
                    { required: true, message: "学年不能为空", trigger: "change" }
                ],
                semester: [
                    { required: true, message: "学期不能为空", trigger: "change" }
                ],
                gradeYear: [
                    { required: true, message: "届别不能为空", trigger: "change" }
                ],
                sex: [
                    { required: true, message: "性别不能为空", trigger: "change" }
                ],
                gradeId: [
                    { required: true, message: "年级不能为空", trigger: "change" }
                ],
                classId: [
                    { required: true, message: "班级不能为空", trigger: "change" }
                ],
                name: [
                    { required: true, message: "姓名不能为空", trigger: "change" }
                ],
                idCard: [{ required: true, validator: checkIdcard, trigger: 'blur' }],
                classTeacherId: [
                    { required: true, message: "班主任不能为空", trigger: "change" }
                ],
                gradeDirectorId: [
                    { required: true, message: "级部主任不能为空", trigger: "change" }
                ],
                violateNum: [
                    { required: true, message: "违纪次数不能为空", trigger: "change" }
                ],
                violateType: [
                    { required: true, message: "违纪类别不能为空", trigger: "change" }
                ],
                punishResult: [
                    { required: true, message: "处分结果不能为空", trigger: "change" }
                ],
                punishTime: [
                    { required: true, message: "处分时间不能为空", trigger: "change" }
                ],


            },
        }
    },
    created() {
        this.getList();
        this.getGradelist();
        this.getTeacher();

    },

    methods: {
        handleAdd() {
            this.reset();
            this.isEdit = false;
            this.dialogTableVisible = true;
        },
        handleIdCardBlur() {
            this.form.sex = this.getGenderFromIdCard(this.form.idCard); // 调用获取性别的方法
        },
        getGenderFromIdCard(idCard) {
            const lastDigit = parseInt(idCard.charAt(idCard.length - 2)); // 获取倒数第二位数字
            return lastDigit % 2 === 0 ? '女' : '男'; // 奇数表示男性，偶数表示女性
        },

        //修改
        handleEdit(row) {
            console.log(row);
            const id = row.id || this.ids;
            getDiscipline(id).then((response) => {
                this.form = response.data;
                this.isEdit = false;
                this.dialogTableVisible = true;
            }).catch(error => {
                this.$modal.closeLoading();
            })

        },
        //查看
        handleLook(row) {
            console.log(row);
            const id = row.id || this.ids;
            getDiscipline(id).then((response) => {
                this.form = response.data;
                this.isEdit = true;
                this.dialogTableVisible = true;
                this.form.gradeId = response.data.gradeId;
                const params = { gradeId: this.form.gradeId };
                getClassList(params).then(response => {
                    this.loading = false;
                    this.classList = response.data;
                    console.log("this.classList", this.classList);
                });
            }).catch(error => {
                this.$modal.closeLoading();
            })

        },
        cancelDialog() {
            this.dialogTableVisible = false;
        },
        reset() {
            this.form = {
                pageNum: 1,
                pageSize: 10,
                schoolYear: "",
                semester: "",
                gradeYear: "",
                gradeId: "",
                classId: "",
                classType: "",
                name: "",
                sex: "",
                idCard: "",
                classTeacher: "",
                gradeDirector: "",
                violateType: "",
                violateNum: "",
                punishResult: "",
                punishTime: "",
                remark: "",

            },

                this.resetForm('form')
        },
        //审核
        handleExamine(row) {
            console.log(row, 'row');
            this.$confirm('确认要提交申请?', '提示', {
                confirmButtonText: '同意',
                cancelButtonText: '不同意',
                confirmButtonClass: 'custom-blue-button',
                cancelButtonClass: 'custom-blue-button'
            })

                .then(() => {
                    // 弹出确认框，用户点击同意后执行的逻辑
                    const params = {
                        id: row.id,
                        auditState: '2'  // 表示同意
                    };
                    subApply(params).then(res => {
                        if (res.code == 200) {
                            this.$message({
                                type: 'success',
                                message: '提交成功!'
                            });
                            this.getList();
                        }
                    });
                })
                .catch(() => {
                    // 用户点击不同意或者取消后执行的逻辑
                    const params = {
                        id: row.id,
                        auditState: '3'  // 表示不同意
                    };
                    subApply(params).then(res => {
                        if (res.code == 200) {
                            this.$message({
                                type: 'info',
                                message: '已取消审核'
                            });
                        }
                    });
                });
        },
        // 删除
        handleDelete(row) {
            this.$modal.confirm(`是否确认删除此数据？`).then(() => {
                this.loading = true;
                return delDiscipline(row.id);
            }).then(() => {
                this.getList();
                this.loading = false;
                this.$modal.msgSuccess("删除成功");
            }).catch(() => {
                this.loading = false
            });
        },


        getList() {
            listDisciplinetg(this.queryForm)
                .then(response => {
                    this.tableData = response.rows;
                    console.log('response', response);
                    this.total = response.total;
                    this.loading = false;
                })
                .catch(error => {
                    this.loading = false;
                    console.log(error);
                });
        },
        //获取教师下拉框
        getTeacher() {
            getTeacher().then(response => {
                this.deptOptions = response.data;
                console.log(this.deptOptions, ' this.deptOptions ');
            });
        },
        //确定按钮
        submitForm: function () {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    if (this.form.id != null) {
                        updateDiscipline(this.form).then(({ code }) => {
                            console.log(this.form, 'this.form');
                            if (code == 200) {
                                this.$modal.msgSuccess('修改成功')
                                this.dialogTableVisible = false
                                this.getList()
                            }
                        }).catch(() => {
                            this.$modal.msgError("修改失败");
                        });
                    } else {
                        addDiscipline(this.form).then(response => {
                            console.log(this.form, 'this.form');
                            this.$modal.msgSuccess('新增成功')
                            this.dialogTableVisible = false
                            this.getList()
                        }).catch(() => {
                            this.$modal.msgError("新增失败");
                        });
                    }
                }
            });
        },

        // 获取最新三个年级
        getGradelist() {
            getGrade().then(response => {
                this.loading = false;
                this.gradeList = response.data;
                this.getClasslist()
                console.log("this.gradeList", this.gradeList);
            });
        },
        handleChange(selectedGrade) {
            console.log(selectedGrade, 'selectedGrade');
            this.getClasslist(selectedGrade); // 传递选择的年级id作为参数
        },
        // 根据年级获取班级
        getClasslist(selectedGrade) {
            const query = { gradeId: selectedGrade }; // 创建包含gradeId的对象
            getClassList(query).then(response => {
                this.loading = false;
                this.classList = response.data;
                console.log("this.classList", this.classList);
            });
        },


        resetQuery() {
            this.queryForm = {
                pageNum: 1,
                pageSize: 10,
                schoolYear: "",
                semester: "",
                gradeYear: "",
                gradeId: "",
                classId: "",
                classType: "",
                name: "",
                sex: "",
                idCard: "",
                classTeacher: "",
                violateType: "",
                violateNum: "",
                punishResult: "",
                punishTime: "",

            },
                this.getList();
        },


    },
}
</script>

<style lang="scss" scoped></style>