const app = new Vue({
    el: '#app',
    data() {
        // 校验学号是否存在
        const rulesSno = (rule, value, callback) => {
            if (this.isEdit) {
                callback();
            }
            // 使用 Axios 进行校验
            axios
                .post(
                    this.baseURL + 'sno/check/',
                    {
                        sno: value,
                    }
                )
                .then((res) => {
                    if (res.data.code === 1) {
                        // 请求成功
                        if (res.data.exists) {
                            callback(new Error("学号已存在"));
                        } else {
                            callback();
                        };
                    } else {
                        // 请求失败
                        callback(new Error("校验学号后端出现异常"));
                    };
                })
                .catch((err) => {
                    // 如果请求失败在控制台打印
                    console.log(err);
                })
        }
        return {
            students: [], // 所有学生信息
            pageStudents: [], // 分页后当前页的学生信息
            // baseURL: "http://172.29.89.96/",
            baseURL: window.location.origin + '/', // 动态获取请求的url
            inputStr: '', // 输入查询的关键字
            selectStudents: [], // 选择复选框时把选择记录存在此集合

            // === 分页相关的变量 ===
            total: 0, // 数据总行数
            currentpage: 1, // 当前所在的页
            pagesize: 10, // 每页显示多少行
            // === 弹出框表单 ===
            dialogVisible: false, // 默认为不弹出状态
            dialogTitle: false, // 弹出框标题默认为空
            isView: false, // 标识是否是查看
            isEdit: false, // 标识是否是编辑
            // 添加默认空集合
            studentForm: {
                sno: '',
                name: '',
                gender: '',
                birthday: '',
                mobile: '',
                email: '',
                address: '',
                image: '',
                imageUrl: '',
            },
            // 弹出框输入校验
            rules: {
                sno: [
                    { required: true, message: "学号不能为空", trigger: 'blur' },
                    { pattern: /^[9][5]\d{3}$/, message: "学号必须是95开头的五位数字", trigger: 'blur' },
                    { validator: rulesSno, trigger: 'blur' },
                ],
                name: [
                    { required: true, message: "姓名不能为空", trigger: 'blur' },
                    { pattern: /^[\u4e00-\u9fa5]{2,5}$/, message: "姓名必须是2-5个汉字", trigger: 'blur' },
                ],
                gender: [
                    { required: true, message: "性别不能为空", trigger: 'change' },
                ],
                birthday: [
                    { required: true, message: "出生日期不能为空", trigger: 'change' },
                ],
                mobile: [
                    { required: true, message: "电话号码不能为空", trigger: 'blur' },
                    { pattern: /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/, message: "请检查电话号码是否输入正确", triggler: 'blur' },
                ],
                email: [
                    { required: true, message: "邮箱地址不能为空", trigger: 'blur' },
                    {
                        pattern: /^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/,
                        message: "请检查邮箱地址是否输入正确", trigger: 'blur'
                    },
                ],
                address: [
                    { required: true, message: "家庭住址不能为空", trigger: 'blur' },
                ]
            },
        }
    },

    mounted() {
        // 自动加载数据
        this.getStudents();
    },
    // 事件
    methods: {
        // 获取所有学生的信息
        getStudents: function () {
            // 记录 this 的地址
            let that = this
            // 使用 Axios 实现 Ajax 请求
            axios
                .get(that.baseURL + "students/")
                .then(function (res) {
                    // 请求成功后执行的函数
                    if (res.data.code == 1) {
                        // 数据返回给 students
                        that.students = res.data.data;
                        // 获取返回记录的总行数
                        that.total = res.data.data.length;
                        // 获取当前页的数据
                        that.getPageStudents();
                        // 弹窗提示
                        that.$message({
                            message: '数据加载成功！',
                            type: 'success'
                        });
                        console.log(that.students);
                    } else {
                        that.$message.error(res.data.msg);
                    }
                })
                .catch(function (err) {
                    // 请求失败后执行的函数
                    console.log(err)
                });
        },
        // 清除输入内容获取所有学生信息
        getAllStudents() {
            this.inputStr = "";
            this.getStudents();
        },
        // 获取当前页的学生数据
        getPageStudents() {
            // 清空 pageStudents 中的数据
            this.pageStudents = [];
            // 获取当前页的数据
            for (let i = (this.currentpage - 1) * this.pagesize; i < this.total; i++) {
                // 遍历数据添加到 pageStudents 中
                this.pageStudents.push(this.students[i]);
                // 判断是否达到一页的要求
                if (this.pageStudents.length === this.pagesize) break;
            }
        },
        // 实现学生信息查询
        queryStudents() {
            // 使用Ajax请求 -- POST --> 传递 InputStr
            let that = this
            axios
                .post(
                    that.baseURL + "students/query/",
                    {
                        inputstr: that.inputStr
                    }
                )
                .then(function (res) {
                    if (res.data.code === 1) {
                        // 数据返回给 students
                        that.students = res.data.data;
                        // 获取返回记录的总行数
                        that.total = res.data.data.length;
                        // 获取当前页的数据
                        that.getPageStudents();
                        // 弹窗提示
                        that.$message({
                            message: '数据加载成功！',
                            type: 'success'
                        });
                    } else {
                        that.$message.error(res.data.msg);
                    }
                })
                .catch(function (err) {
                    console.log(err)
                    that.$message.error("获取后端查询结果出现异常！");
                });
        },
        // 添加学生信息明细弹出框
        addStudent() {
            // 修改弹出框标题
            this.dialogTitle = "添加学生明细";
            // 弹出表单
            this.dialogVisible = true;
        },
        // 根据 id 获取 image
        getImageBySno(sno) {
            for(oneStudent of this.students) {
                // 判断
                if(oneStudent.sno == sno) {
                    return oneStudent.image;
                }
            }
        },
        // 查看学生信息明细弹出框
        viewStudent(row) {
            // 修改弹出框标题
            this.dialogTitle = "查看学生明细";
            // 修改 isView 变量
            this.isView = true;
            // 弹出表单
            this.dialogVisible = true;
            // 深拷贝方法：
            this.studentForm = JSON.parse(JSON.stringify(row));
            // 获取照片
            this.studentForm.image = this.getImageBySno(row.sno);
            // 获取照片url
            this.studentForm.imageUrl = this.baseURL + 'media/' + this.studentForm.image;
        },
        // 编辑学生详细信息弹出框
        updateStudent(row) {
            // 修改弹出框标题
            this.dialogTitle = "编辑学生明细";
            // 修改 isEdit 变量
            this.isEdit = true;
            // 弹出表单
            this.dialogVisible = true;
            // 深拷贝方法：
            this.studentForm = JSON.parse(JSON.stringify(row));
            // 获取照片
            this.studentForm.image = this.getImageBySno(row.sno);
            // 获取照片url
            this.studentForm.imageUrl = this.baseURL + 'media/' + this.studentForm.image;
        },
        // 提交学生的表单（添加、编辑）
        submitStudentForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 判断提交表单事件类型，添加 or 编辑
                    if (this.isEdit) {
                        // 修改事件
                        this.submitUpdateStudent();
                    } else {
                        // 添加事件
                        this.submitAddStudent();
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 添加学生信息到数据库
        submitAddStudent() {
            // 定义 that
            let that = this;
            // 执行 Axios 请求
            axios
                .post(that.baseURL + 'student/add/', that.studentForm)
                .then(res => {
                    // 执行成功
                    if (res.data.code === 1) {
                        // 获取所有学生信息
                        that.students = res.data.data;
                        // 获取记录条数
                        that.total = res.data.data.length;
                        // 获取分页信息
                        that.getPageStudents();
                        // 弹窗提示
                        that.$message({
                            message: '数据添加成功！',
                            type: 'success'
                        });
                        // 关闭弹窗
                        that.closeDialogForm('studentForm');
                    } else {
                        that.$message.error(res.data.msg);
                    }
                })
                .catch(err => {
                    // 执行失败
                    console.log(err)
                    that.$message.error("添加时获取后端查询结果出现异常！");
                })
        },
        // 编辑学生信息到数据库
        submitUpdateStudent() {
            // 定义 that
            let that = this;
            // 执行 Axios 请求
            axios
                .post(that.baseURL + 'student/update/', that.studentForm)
                .then(res => {
                    // 执行成功
                    if (res.data.code === 1) {
                        // 获取所有学生信息
                        that.students = res.data.data;
                        // 获取记录条数
                        that.total = res.data.data.length;
                        // 获取分页信息
                        that.getPageStudents();
                        // 弹窗提示
                        that.$message({
                            message: '数据修改成功！',
                            type: 'success'
                        });
                        // 关闭弹窗
                        that.closeDialogForm('studentForm');
                    } else {
                        that.$message.error(res.data.msg);
                    }
                })
                .catch(err => {
                    // 执行失败
                    console.log(err)
                    that.$message.error("修改时获取后端查询结果出现异常！");
                })
        },
        // 删除学生信息到数据库
        deleteStudent(row) {
            // 等待确认
            this.$confirm('是否确认删除学生信息【学号：' + row.sno + '\t姓名：' + row.name + '】？', '提示', {
                confirmButtonText: '确定删除',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 确认删除相应事件
                let that = this
                // 调用后端接口
                axios
                    .post(that.baseURL + 'student/delete/', { sno: row.sno })
                    .then(res => {
                        if (res.data.code === 1) {
                            // 获取所有学生信息
                            that.students = res.data.data;
                            // 获取记录数
                            that.total = res.data.data.length;
                            // 获取分页信息
                            that.getPageStudents();
                            // 弹窗提示
                            that.$message({
                                message: '数据删除成功！',
                                type: 'success'
                            });
                        } else {
                            that.$message.error(res.data.msg);
                        }
                    })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 批量删除学生信息到数据库
        deleteStudents() {
            // 等待确认
            this.$confirm("是否确认批量删除 " + this.selectStudents.length + " 名学生信息?", '提示', {
                confirmButtonText: '确定删除',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                // 确认删除相应事件
                let that = this
                // 调用后端接口
                axios
                    .post(that.baseURL + 'students/delete/', { student: that.selectStudents })
                    .then(res => {
                        if (res.data.code === 1) {
                            // 获取所有学生信息
                            that.students = res.data.data;
                            // 获取记录数
                            that.total = res.data.data.length;
                            // 获取分页信息
                            that.getPageStudents();
                            // 弹窗提示
                            that.$message({
                                message: '数据批量删除成功！',
                                type: 'success'
                            });
                        } else {
                            that.$message.error(res.data.msg);
                        }
                    })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 关闭弹出框的表单
        closeDialogForm(formName) {
            // 重置表单校验
            this.$refs[formName].resetFields();
            // 清空弹出框集合
            this.studentForm.sno = '';
            this.studentForm.name = '';
            this.studentForm.gender = '';
            this.studentForm.birthday = '';
            this.studentForm.mobile = '';
            this.studentForm.email = '';
            this.studentForm.address = '';
            this.studentForm.image = '';
            this.studentForm.imageUrl = '';
            // 关闭弹出框
            this.dialogVisible = false;
            // 清空 isView 和 isEdit 的值
            this.isView = false;
            this.isEdit = false;
        },
        //选择学生头像后点击确定后触发的事件
        uploadPicturePost(file) {
            //定义that
            let that = this;
            //定义一个FormData类
            let fileReq = new FormData();
            //把照片穿进去
            fileReq.append('avatar', file.file);
            //使用Axios发起Ajax请求
            axios(
                {
                    method: 'post',
                    url: that.baseURL + 'upload/',
                    data: fileReq
                }
            ).then(res => {
                // 根据code判断是否成功
                if (res.data.code === 1) {
                    //把照片给image 
                    that.studentForm.image = res.data.name;
                    //拼接imageurl 
                    that.studentForm.imageUrl = that.baseURL + "media/" + res.data.name;
                } else {
                    //失败的提示！
                    that.$message.error(res.data.msg);
                }

            }).catch(err => {
                console.log(err);
                that.$message.error("上传头像出现异常！");
            })

        },
        // excel文件导入
        uploadExcelPost(file) {
            let that = this
            //实例化一个formdata
            //定义一个FormData类
            let fileReq = new FormData();
            //把照片穿进去
            fileReq.append('excel', file.file);
            //使用Axios发起Ajax请求
            axios(
                {
                    method: 'post',
                    url: that.baseURL + 'excel/import/',
                    data: fileReq
                }
            ).then(res => {
                // 根据code判断是否成功
                if (res.data.code === 1) {
                    //把照片给image 
                    that.students = res.data.data;
                    //计算总共多少条
                    that.total = res.data.data.length;
                    //分页
                    that.getPageStudents();
                    //弹出框体显示结果 
                    this.$alert('本次导入完成! 成功：' + res.data.success +'失败：'+ res.data.error 
                    , '导入结果展示', {
                        confirmButtonText: '确定',
                        callback: action => {
                            this.$message({
                                type: 'info',
                                message: "本次导入失败数量为：" + res.data.error + ",具体的学号："+res.data.errors,
                            });
                        }
                    });
                    //把失败明细打印
                    console.log("本次导入失败数量为：" + res.data.error + ",具体的学号：");
                    console.log(res.data.errors);
                } else {
                    //失败的提示！
                    that.$message.error(res.data.msg);
                }

            }).catch(err => {
                console.log(err);
                that.$message.error("上传Excel出现异常！");
            })

        },
        // excel文件导出
        exportToExcel(){
            let that = this
            axios.get(that.baseURL + 'excel/export/')
            .then(res=>{
                if(res.data.code ===1){
                    //拼接excel 的完整URL
                    let url = that.baseURL + 'media/'+ res.data.name;
                    //下载
                    window.open(url);
                } else {
                    that.$message.error("导出Excel出现异常！");
                }
            })
            .catch(err=>{
                console.log(err);
            });

        },
        // 分页时修改每页的行数
        handleSizeChange(size) {
            // 修改当前每页的数据行数
            this.pagesize = size;
            // 数据重新分页
            this.getPageStudents();
        },
        // 调整当前的页码
        handleCurrentChange(pageNumber) {
            // 修改当前的页码
            this.currentpage = pageNumber;
            // 数据重新分页
            this.getPageStudents();
        },
        // 选择复选框时触发的操作
        handleSelectionChange(data) {
            this.selectStudents = data;
            console.log(data);
        },
    },
})