<template>
    <div>
      <div class="">
        <el-button @click="rein">
          <refresh style="width: 1em; height: 1em; margin-right: 8px;" />刷新
        </el-button>
        <el-button style="float: right;margin-left: 50px" @click="addStudent"><circle-plus
            style="width: 1em; height: 1em; margin-right: 8px;" />添加</el-button>
        <el-input v-model="search" type="text" placeholder="输入学号搜索" style="width:500px;margin-left: 50px;"
          @input="onInputNumber" />
        <el-button @click="searchStudentByNo(search)">
          <search style="width: 1em; height: 1em; margin-right: 8px;" />搜索
        </el-button><el-button @click="resetting">重置</el-button>
        <el-select v-model="selectedClass" placeholder="选择班级" style="margin-left: 8px;">
          <el-option v-for="(item, index) in classinfoList" :key="index" :label="item" :value="item"></el-option>
        </el-select>
      </div>
      <div class="allinfo">
        <el-table :data="allinfo">
          <el-table-column prop="id" label="id" align="center"></el-table-column>
          <el-table-column prop="classinfo" label="班级" width="150px" align="center"></el-table-column>
          <el-table-column prop="studentName" label="姓名" align="center"></el-table-column>
          <el-table-column prop="studentNo" label="学号" align="center" width="120px"></el-table-column>
          <el-table-column prop="depart" label="部门" align="center"></el-table-column>
          <el-table-column prop="school" label="学校" show-overflow-tooltip align="center" width="200px"></el-table-column>
          <el-table-column prop="major" label="专业" align="center"></el-table-column>
          <el-table-column width="250px" label="操作">
            <template v-slot="{ row }">
              <el-button @click="editStudent(row)" type="primary">
                <edit style="width: 1em; height: 1em; margin-right: 8px;" />修改
              </el-button>
              <el-button @click="deleteStudent(row.id)" type="danger">
                <delete style="width: 1em; height: 1em; margin-right: 8px;" />删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
  
        <el-pagination v-if="page.total>0" background layout="prev, pager, next" :page-size="page.size" :total="page.total"
          :current-page="page.current" @current-change="currentchange"></el-pagination>
      </div>
    </div>
  
  
    <el-dialog v-model="dialogFormVisible" title="学生编辑">
      <el-form :model="allinfos">
        <el-form-item label="学号" :label-width="formLabelWidth">
          <el-input v-model="allinfos.studentNo" autocomplete="off" />
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="allinfos.studentName" autocomplete="off" />
        </el-form-item>
        <el-form-item label="班级" :label-width="formLabelWidth">
          <el-input v-model="allinfos.classinfo" autocomplete="off" />
        </el-form-item>
        <el-form-item label="部门" :label-width="formLabelWidth">
          <el-input v-model="allinfos.depart" autocomplete="off" />
        </el-form-item>
        <el-form-item label="学校" :label-width="formLabelWidth">
          <el-input v-model="allinfos.school" autocomplete="off" />
        </el-form-item>
        <el-form-item label="专业" :label-width="formLabelWidth">
          <el-input v-model="allinfos.major" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="save">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>
  </template>
  
  <script>
  import { defineComponent } from "vue"
  import axios from "axios";
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { cloneDeep } from 'lodash-es'
  import { getallinfo, studentAdd, studentEdit, studentdel, getStudentsByNo, getall, getwant } from '@/http/student.js'
  
  
  export default defineComponent({
    props: {
      page: {
        type: Object,
        default: () => ({
          current: 1,
          school: "泉州信息工程学院",
          size: 15
        })
      }
    },
    //adCates=allinfo adCate=allinfos
    data() {
      return {
        allinfo: [], // 初始化数据数组
        all: [],
        dialogFormVisible: false,
        formLabelWidth: '80px',
        search: "",
        total: 0,
        selectedClass: '', //选中的班级信息
        classinfoList: [], //所有班级信息
        allinfos: {
          "classinfo": "",
          "createTime": "",
          "depart": "",
          "id": "",
          "major": "",
          "school": "",
          "studentName": "",
          "studentNo": "",
          "updateTime": "",
          "userId": 0,
        },
      }
    },
    mounted() {
      this.getAllInfo(1);
      this.getAll()
      this.getWant()
    },
    methods: {
      getWant() {
        const params = {
          colums: 1,
          classinfo: "20软工3班",
        }
        getwant(params).then(res => {
          console.log(res)
        }).catch(err => {
          console.log(err);
        })
      },
      getAll() {
        getall().then(res => {
          console.log(res)
          const renj = res.data;
          this.all = renj.students;
          this.classinfoList = Array.from(new Set(this.all.map((item) => item.classinfo)));
          console.log(this.classinfoList);
          this.filterBySelectedClass();
        }).catch(err => {
          console.log(err);
        })
        this.allinfo = this.filteredInfo;
      },
      getAllInfo(current) {
        const params = {
          current: current,
          school: "泉州信息工程学院",
          size: 15,
        }
        getallinfo(params).then(res => {
          console.log(res);
          const page = res.data.page;
          this.allinfo = page.records; // 将数据记录数组赋值给 allinfo 变量
          this.page.total = page.total;
          console.log(this.page.size)
  
        }).catch(err => {
          console.log(err);
        })
      },
      rein() {
        location.reload()
      },
      currentchange(current) {
        // console.log(current);
        this.getAllInfo(current);
        this.page.current = current; //数据更新目前显示的页面
      },
      onInputNumber() {
        this.search = this.search.replace(/[^0-9]/g, '');
      },
      addStudent() {
        this.allinfos = {
          "classinfo": "",
          "createTime": "",
          "depart": "",
          "id": "",
          "major": "",
          "school": "",
          "studentName": "",
          "studentNo": "",
          "updateTime": "",
          "userId": 0,
        }
        this.dialogFormVisible = true;
      },
      editStudent(allinfos) {
        console.log(allinfos);
        this.dialogFormVisible = true;
        this.allinfos = cloneDeep(allinfos);
      },
      save() {
        const allinfos = this.allinfos;
        if (allinfos.id == 0) {
          studentAdd(allinfos).then(res => {
            if (res.success) {
              //刷新页面
              this.dialogFormVisible = false;
              console.log(this.page.current),
                this.getAllInfo(this.page.current)
              ElMessage(res.msg)
            }
            else {
              ElMessage(res.msg)
              return false
            }
          }).catch(err => {
            ElMessage('网络错误联系管理员')
          })
        }
        else {
          studentEdit(allinfos).then(res => {
            if (res.success) {
              //刷新页面
              this.dialogFormVisible = false;
              this.getAllInfo(this.page.current)
              ElMessage(res.msg)
            }
            else {
              ElMessage(res.msg)
              return false
            }
          }).catch(err => {
            ElMessage('网络错误联系管理员')
          })
        }
  
      },
      deleteStudent(id) {
        ElMessageBox.confirm('确定要删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          console.log(id)
          const params = {
            id: id
          }
          studentdel(params).then(res => {
            if (res.success) {
              this.getAllInfo(this.page.current)
  
            }
            else {
              console.log(res.msg)
              return false
            }
  
  
          }).catch(err => {
            console.log(err)
          })
        }).catch((e) => {
  
        });
  
      },
      searchStudentByNo(search) {
        if (this.search !== "" && this.search !== null) {
          this.searchStudentnoData(search);
        }
      },
      searchStudentnoData(search) {
        const params = {
          studentNo: search,
        };
        getStudentsByNo(params)
          .then(res => {
            console.log(res.data); // 确认返回数据格式是否正确
            let datas = res.data;
            this.allinfo = [];
            if (Array.isArray(datas?.student)) {
              datas.student = [datas.student];
            }
            this.allinfo = this.allinfo.concat(datas.student);
            // 如果搜索结果为空数组，重置 allinfo 为一个空数组
            if (this.allinfo.length == 0) {
              this.page.total = 0;
            }
            // 手动更新分页组件的当前页码和总记录数
            this.page.current = 1;
            this.page.total = this.allinfo.length;
          })
          .catch(err => {
            console.log(err);
            ElMessage('未找到该学生');
            this.page.total = 0;
            this.page.current = 0;
            console.log(this.page.total)
          });
      },
  
      resetting() {
        this.search = "";
      },
      filterBySelectedClass() {
        if (!this.selectedClass) {
          this.filteredInfo = [];
          return;
        }
        this.filteredInfo = this.all.filter((item) => item.classinfo === this.selectedClass);
      },
   
  
      watch: {
        selectedClass(value) {
          this.filterBySelectedClass();
        }
      },
  
    }
  })
  
  </script>
  
  <style lang="scss" scoped></style>