<script lang="ts">
// 学生管理
export default {
  name: 'schoolStudent' // 学生
};
</script>

<script setup lang="ts">
import { onMounted, reactive, ref, nextTick } from "vue";
import { ElMessage, ElMessageBox, FormRules } from "element-plus";
import { querySchoolStudentList, addSchoolStudent,updateSchoolStudent,delSchoolStudent,shiftSchoolStudent,querySchoolStudentPage,
  adjustClass,muchTransferOut } from "@/api/regionmodule/schoolStudent";
import { querySchoolClassList } from "@/api/regionmodule/schoolClass";
import { querySchoolGradeList } from "@/api/regionmodule/schoolGrade"
import { getBirthdayByIdNumber } from '@/utils/index'
import Page from '@/components/Pagination/page.vue'
import StudentVisdata from './studentVisdata.vue'
import StudentInfolog from './studentInfolog.vue'
const multipleSelection = ref([]);
const multipleIdsSelection = ref([]);
function handleSelectionChange(val: any) {
  multipleSelection.value = val;
}
function handleSelectionIdsChange(val: any) {
  multipleIdsSelection.value = val;
}

const emit = defineEmits([ 'returnClick']);
const props:any = defineProps({
  classInfo: {
    required: false,
    type: Object,
    default: {}
  }
})
function returnClick(){
  emit('returnClick', false);
}

const queryInfo:any = ref({
   name:"",
   gender:""
})
const tableData:any =ref([])
function getResetting(){
  queryInfo.value.name = ""
  queryInfo.value.gender = ""
  getData()
}
const loading = ref(false)
function getData(){
  queryInfo.value.name = queryInfo.value.name.replace(/\s+/g, "");
  if(props.classInfo.class_id == '' || props.classInfo.class_id == null){
    tableData.value = []
    return
  }
  let params = {
    name: queryInfo.value.name,
    gender: queryInfo.value.gender,
    classId: props.classInfo.class_id,
  };
  loading.value = true
  querySchoolStudentList(params).then((res) => {
    tableData.value = res.data;
    loading.value = false
  });
}
const isSwitch = ref(false)
const info:any = ref({})
//新建学生
function addClick() {
  isSwitch.value = false
  const infoagin = ref({
    id: null,
    school_id: props.classInfo.school_id,
    school_name: props.classInfo.school_name,
    grade_id: props.classInfo.grade_id,
    grade_name: props.classInfo.grade_name,
    grade_code: props.classInfo.grade_code,
    class_id: props.classInfo.class_id, 
    class_code: props.classInfo.class_code, 
    class_name: props.classInfo.class_name, 
    code: "", // 学生代码
    name: "", // 学生名称
    photo: "",
    id_code: "",
    nation: info.value.nation,
    study_code: "",
    gender: "",
    birth_date: ""

  });
  info.value = infoagin.value;
  title.value = "新增学生";
  dialogVisible.value = true;
}
const title = ref("")
const dialogVisible = ref(false)
//修改学生
function editHandle(row: any) {
  isSwitch.value = false
  title.value = "修改学生";
  info.value = JSON.parse(JSON.stringify(row));
  dialogVisible.value = true;
}
//删除学生
function delHandle(row: any) {
  ElMessageBox.confirm("确定删除此学生吗?", "删除提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    let params = {
      ids: row.id,
    };
    delSchoolStudent(params).then(() => {
      getData();
      ElMessage({
        message: "删除成功",
        type: "success",
      });
    });
  });
}
//新建班级-保存/修改
function confirmClick(formEl: any) {
  formEl.validate((valid: any) => {
    if (valid) {
      if(isSwitch.value == true){
        return
      }
      isSwitch.value = true
      if (info.value.id) {
        const data:any = {
          id:info.value.id,
          schoolId:info.value.school_id,
          schoolName:info.value.school_name,
          gradeId:info.value.grade_id,
          gradeCode:info.value.grade_code,
          gradeName:info.value.grade_name,
          classId:info.value.class_id,
          classCode:info.value.class_code,
          className:info.value.class_name,
          code: info.value.code, // 学生代码
          name: info.value.name, // 学生名称
          photo:info.value.photo,
          idCode:info.value.id_code,
          nation:info.value.nation,
          studyCode:info.value.study_code,
          gender:info.value.gender,
          birthDate:info.value.birth_date,
          age:info.value.age
        };
        updateSchoolStudent(data).then((res:any) => {
          if(res.code == "0"){
            dialogVisible.value = false;
            ElMessage({
              message: "修改成功",
              type: "success",
            });
            getData();
          }else{
            isSwitch.value = false
          }
        }).catch(()=>{
          isSwitch.value = false
        })
      } else {
        const data:any = {
          schoolId:info.value.school_id,
          schoolName:info.value.school_name,
          gradeId:info.value.grade_id,
          gradeCode:info.value.grade_code,
          gradeName:info.value.grade_name,
          classId:info.value.class_id,
          classCode:info.value.class_code,
          className:info.value.class_name,
          code: info.value.code, // 学生代码
          name: info.value.name, // 学生名称
          photo:info.value.photo,
          idCode:info.value.id_code,
          nation:info.value.nation,
          studyCode:info.value.study_code,
          gender:info.value.gender,
          birthDate:info.value.birth_date,
          age:info.value.age
        };
        addSchoolStudent(data).then((res:any) => {
          if(res.code == "0"){
            dialogVisible.value = false;
            getData();
            ElMessage({
              message: "新增成功",
              type: "success",
            });
          }else{
            isSwitch.value = false
          }
          
        }).catch(()=>{
          isSwitch.value = false
        })
      }
     
    }
  })
}
onMounted(() => {
  getData();
  getGrade(props.classInfo.school_id)
  getClass(props.classInfo.grade_id)
});
function handleClose(){
  if (infoForm.value != null) infoForm.value.resetFields();
  dialogVisible.value = false
}

// 身份证号校验规则
const IdNumberRule = /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0[1-9]|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/
const checkIdNumber = (rule: any, value: any, callback: any) => {
  if (value === '') {
    info.value.birth_date = ''
    info.value.age = ''
    info.value.gender = '男'
    callback('请输入身份证号')
  } else {
    if (IdNumberRule.test(value)) {
      // 验证通过则根据身份证号得到出生日期、年龄和性别
      let params = getBirthdayByIdNumber(value)
      info.value.birth_date = params.birth_date
      info.value.age = params.age
      info.value.gender = params.gender
      callback()
    } else {
      callback(new Error('请输入正确的身份证号'))
    }
  }
}
//填写规则
const moderules = reactive<FormRules>({
  code: [{ required: true, message: "请输入学生代码", trigger: "blur" }],
  name: [{ required: true, message: "请输入学生姓名", trigger: "blur" }],
  id_code: [{ required: true, validator: checkIdNumber, trigger: 'blur' }],
});
function uploadChange(file:any){
  var reader = new FileReader();
  reader.readAsDataURL(file.raw);
  reader.onload = () => {
    info.value.photo =reader.result
  };
  reader.onerror = function(error) {
    console.log("Error: ", error);
  };
}
function delPhoto(){
  info.value.photo = ""
}
const infoForm = ref();
const isShiftClass = ref(false)
const isMuchShiftClass = ref(false)
const isTransferOut = ref(false)
function shiftClassClick(item:any){
  title.value = '学生调班'
  isSwitch.value = false
 
  info.value = JSON.parse(JSON.stringify(item));
  shiftClassInfo.value = {
    grade_id: info.value.grade_id,
    grade_code: info.value.grade_code,
    grade_name: info.value.grade_name,
    class_id: info.value.class_id,
    class_code: info.value.class_code,
    class_name: info.value.class_name,
  }
  isShiftClass.value = true
}
function classClose(){
  isShiftClass.value = false
  isTransferOut.value = false
  isShiftStudent.value = false
  isMuchShiftClass.value = false
}
const gradeData:any = ref([])
const classData:any = ref([])

function getGrade(schoolId:any){ // 获取年级
  let params = {
    schoolId: schoolId,
  };
  querySchoolGradeList(params).then((res:any) => {
    gradeData.value = res.data;
  });
}
const shiftClassInfo: any = ref({})
function gradeChange(e:any){
  for(let i=0;i<gradeData.value.length;i++){
    if(e== gradeData.value[i].id){
      shiftClassInfo.value.grade_name = gradeData.value[i].name
      shiftClassInfo.value.grade_code = gradeData.value[i].code
    }
  }
  shiftClassInfo.value.class_id = ""
  shiftClassInfo.value.class_code = ""
  shiftClassInfo.value.class_name = ""
  getClass(e)
}
function classChange(e:any){
  for(let i=0;i<classData.value.length;i++){
    if(e== classData.value[i].id){
      shiftClassInfo.value.class_name = classData.value[i].name
      shiftClassInfo.value.class_code = classData.value[i].code
    }
  }
}
function getClass(gradeId:any){ // 获取班级
  let params = {
    gradeId: gradeId,
  };
  querySchoolClassList(params).then((res) => {
    classData.value = res.data;
  });
}



function transferOutClick(item:any){ // 转出弹框
  title.value="学生转出"
  isSwitch.value = false
  info.value = item
  isTransferOut.value = true
}


function confirmShiftClassMuch(){ //多人调班提交
  if(shiftClassInfo.value.class_id == ""){
    ElMessage({
      message: "请选择调入班级！",
      type: "warning",
    })
    return
  }
  let ids = [] as any[];
    multipleIdsSelection.value.forEach((item: any) => {
      ids.push(item.id)
    })
  const data:any = {
    ids:ids.join(","),
    gradeId:shiftClassInfo.value.grade_id,
    gradeCode:shiftClassInfo.value.grade_code,
    gradeName:shiftClassInfo.value.grade_name,
    classId:shiftClassInfo.value.class_id,
    classCode:shiftClassInfo.value.class_code,
    className:shiftClassInfo.value.class_name,
  };
  if(isSwitch.value == true){
    return
  }
  isSwitch.value = true
  adjustClass(data).then((item) => {
    isMuchShiftClass.value = false;
    ElMessage({
      message: "调班成功",
      type: "success",
    });
    getData();
    isSwitch.value = false
  }).catch(()=>{
    isSwitch.value = false
  })
}

function confirmShiftClass(){ //调班提交
  if(shiftClassInfo.value.class_id == ""){
    ElMessage({
      message: "请选择调入班级！",
      type: "warning",
    })
    return
  }
  const data:any = {
    id:info.value.id,
    gradeId:shiftClassInfo.value.grade_id,
    gradeCode:shiftClassInfo.value.grade_code,
    gradeName:shiftClassInfo.value.grade_name,
    classId:shiftClassInfo.value.class_id,
    classCode:shiftClassInfo.value.class_code,
    className:shiftClassInfo.value.class_name,
  };
  if(isSwitch.value == true){
    return
  }
  isSwitch.value = true
  updateSchoolStudent(data).then((item) => {
    isShiftClass.value = false;
    ElMessage({
      message: "调班成功",
      type: "success",
    });
    getData();
    isSwitch.value = false
  }).catch(()=>{
    isSwitch.value = false
  })
}
function confirmTransferOut(){ // 转出提交
  const data:any = {
    id:info.value.id,
    status:"02"
  };
  if(isSwitch.value == true){
    return
  }
  isSwitch.value = true
  updateSchoolStudent(data).then((item) => {
    isTransferOut.value = false;
    ElMessage({
      message: "转出成功！",
      type: "success",
    });
    getData();
    isSwitch.value = false
  }).catch(()=>{
    isSwitch.value = false
  })
}

//转入学生列表
const shiftData:any = ref([])
const shiftloading =ref(false)
const isShiftStudent =ref(false) // 查询学生转入弹框

function shiftClick(){
  title.value = "转入学生"
  queryShift.value = {
    schoolName:'',
    gradeName:'',
    name:'',
    idCode:'',
    status:'02',
    current:1,
    size:10,
    total:0
  }
  getShift()
  isShiftStudent.value = true
}
const queryShift:any = ref({
  schoolName:'',
  gradeName:'',
  name:'',
  idCode:'',
  status:'02',
  current:1,
  size:10,
  total:0
})
function getShift(){
  shiftloading.value = true
  queryShift.value.schoolName = queryShift.value.schoolName.replace(/\s+/g, "");
  queryShift.value.gradeName = queryShift.value.gradeName.replace(/\s+/g, "");
  queryShift.value.name = queryShift.value.name.replace(/\s+/g, "");
  queryShift.value.idCode = queryShift.value.idCode.replace(/\s+/g, "");
  querySchoolStudentPage(queryShift.value).then((res) => {
    shiftData.value = res.data.records
    queryShift.value.total = res.data.total
    shiftloading.value = false
  }).catch(()=>{
    shiftloading.value = false
  })
}

function allshiftClick(){
    ElMessageBox.confirm("确定转入已选择的学生吗?", "转入提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      let id = [] as any[];
      multipleSelection.value.forEach((item: any) => {
        id.push(item.id)
      })
      let params = {
        schoolId: props.classInfo.school_id,
        schoolName: props.classInfo.school_name,
        gradeId: props.classInfo.grade_id,
        gradeCode: props.classInfo.grade_code,
        gradeName: props.classInfo.grade_name,
        classId: props.classInfo.class_id,
        classCode: props.classInfo.class_code,
        className: props.classInfo.class_name,
        studentId: info.value.id,
        ids: id.join(','),
      };
      shiftSchoolStudent(params).then(() => {
        getData();
        ElMessage({
          message: "转入成功！",
          type: "success",
        });
        getShift()
        isShiftStudent.value = true
      });
    });
}
const isList = ref(true)
function shiftClassMuch(){ // 人多调班
  title.value = '学生调班'
  isSwitch.value = false
  shiftClassInfo.value = {
    gradeId:shiftClassInfo.value.grade_id,
    gradeCode:shiftClassInfo.value.grade_code,
    gradeName:shiftClassInfo.value.grade_name,
    classId:shiftClassInfo.value.class_id,
    classCode:shiftClassInfo.value.class_code,
    className:shiftClassInfo.value.class_name,
  }
  isMuchShiftClass.value = true
}
function transferOutMuch(){ // 人多转出
  let id = [] as any[];
  let name = [] as any[];
    multipleIdsSelection.value.forEach((item: any) => {
      id.push(item.id)
      name.push(item.name)
    })
  ElMessageBox.confirm("确定确定将"+ name.join(',') +"吗?", "学生转出", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
     
      let params = {
        ids: id.join(','),
      };
      muchTransferOut(params).then(() => {
        getData();
        ElMessage({
          message: "转出成功！",
          type: "success",
        });
      });
    });
}
// 多选删除学校
function delClick() {
  ElMessageBox.confirm("确定删除已选择的学生吗?", "删除提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    let id = [] as any[];
    multipleIdsSelection.value.forEach((item: any) => {
      id.push(item.id)
    })
    let params = {
      ids: id.join(','),
    };
    delSchoolStudent(params).then(() => {
      getData();
      ElMessage({
        message: "删除成功",
        type: "success",
      });
    });
  });
}
const htmlStatus = ref('1')
function viewVisdata(item:any){ // 查看学生视力档案
  info.value = item
  htmlStatus.value = '2'
}
function logClick(item:any){ // 查看学生日志
  info.value = item
  htmlStatus.value = '3'
}

function returnStudent(e:any){
  htmlStatus.value = '1'
}
</script>
<template>
  <div class="schoolStudent-box" v-loading="loading">
    <div v-if="htmlStatus == '1'" >
      <div class="schoolStudent-title" style="margin-right: 20px;">
        <div class="class_order">{{ props.classInfo.grade_name }}{{ props.classInfo.class_name }}</div>
        <div class="return" @click="returnClick">
          <img src="@/assets/tableicon/u549.png" alt="">
          <div style="padding-left: 2px;padding-top: 2px;">返回</div>
        </div>
      </div>
      <div class="schoolStudent-line" style="width:calc(100% - 25px) ;margin-left: 5px;"></div>
      <el-row style="margin: 15px 0;width:calc(100% - 25px);margin-bottom: 10px;margin-left: 5px;" >
        <el-col :span="24" class="top-nav">
          <div>
            <el-input v-model="queryInfo.name" placeholder="请输入学生姓名" clearable style="width: 200px;"
              @keyup.enter="getData" />
            <el-select v-model="queryInfo.gender"  placeholder="请选择性别" style="width: 150px;margin-left: 10px;" clearable
             @change="getData">
              <el-option  label="男" value="1"></el-option>
              <el-option  label="女" value="2"></el-option>
              <el-option  label="不详" value="0"></el-option>
          </el-select>
            <el-button type="primary" style="margin-left: 10px;" @click="getData">搜索</el-button>
            <el-button style="margin-left: 10px;" @click="getResetting">重置</el-button>
          </div>
          <div class="left-nav">
            <el-button type="primary" @click="addClick"><img style="margin-right:5px;" src="@/assets/MenuIcon/jscz_xz.png" alt=""> 新增</el-button>
            <el-button  v-if="isList == true" :disabled="multipleIdsSelection.length ==0" type="primary" @click="shiftClassMuch"><img style="margin-right:5px;" src="@/assets/student/u991.png" alt=""> 调班</el-button>
            <el-button v-if="isList == true" :disabled="multipleIdsSelection.length ==0" type="primary" @click="transferOutMuch"><img style="margin-right:5px;" src="@/assets/student/u986.png" alt=""> 转出</el-button>
            <el-button  type="primary" @click="shiftClick"><img style="margin-right:5px;" src="@/assets/student/u792.png" alt=""> 转入</el-button>
            <el-button v-if="isList == true" :disabled="multipleIdsSelection.length ==0" type="primary" @click="delClick"><img style="margin-right:5px;" src="@/assets/student/u762.png" alt="" >删除</el-button>
            <el-button v-if="isList == false" type="primary" @click="isList = true"><img style="margin-right:5px;" src="@/assets/student/u815.png" alt=""> 列表显示</el-button>
            <el-button v-if="isList == true" type="primary" @click="isList = false"><img style="margin-right:5px;" src="@/assets/student/u996.png" alt=""> 缩略图显示</el-button>
          </div>
        </el-col>
      </el-row>
      <div v-if="isList == false">
        <div class="schoolClassUi">
          <div class="schoolClassLis" v-for="item in tableData" :key="item.id">
            <div class="zhaunchu" v-if="item.status == '02'">已转出</div>
            <img class="imgclass" src="@/assets/MenuIcon/lbcz_xg.png" title="修改" style="right: 50px;"
              @click="editHandle(item)" >
            <img class="imgclass" src="@/assets/MenuIcon/lbcz_sc.png" title="删除" style="right: 20px;"
              @click="delHandle(item)" >
            <div style="display: flex;align-items: center;">
              <img v-if="(item.photo=='' || item.photo==null) && item.gender == '1'" src="@/assets/student/man.png" alt="" style="width:60px;height:60px;">
              <img v-if="(item.photo=='' || item.photo==null) && item.gender == '2'" src="@/assets/student/woman.png" alt="" style="width:60px;height:60px;">
              <img v-if="item.photo!='' && item.photo!=null" :src="item.photo" alt="" style="width:60px;height:60px;">
              <div style="margin-left: 15px;">
                <div class="basicname">
                  <span style="padding-right:20px">{{ item.name }}</span>
                  <span v-if="item.gender == '1'">男</span>
                  <span v-if="item.gender == '2'">女</span>
                </div>
                <div class="basicinfo">
                  <span>{{item.nation}}</span>
                  <span style="padding: 0 15px;">|</span>
                  <span>{{ item.birth_date }}</span>
                  <span style="padding: 0 15px;">|</span>
                  <span>{{ item.age }}岁</span>
                </div>
              </div>
            </div>
            <div class="basicinfo" style="padding-top: 18px;">
              <span>学籍号：</span>
              <span>{{ item.study_code }}</span>
            </div>
            <div class="basicinfo" style="padding-top: 10px;">
              <span>身份证：</span>
              <span>{{ item.id_code }}</span>
            </div>
            <div style="display:flex ;align-items: center;justify-content: space-between;padding-top: 15px;">
              <div class="classbutton" @click="shiftClassClick(item)">调班</div>
              <div class="classbutton" @click="transferOutClick(item)">转出</div>
            </div>
            <div style="display:flex ;align-items: center;justify-content: space-between;padding-top: 10px;">
              <div class="classbutton" @click="viewVisdata(item)">查看视力档案</div>
              <div class="classbutton" @click="logClick(item)">信息变动日志</div>
            </div>
          </div>
        </div>
      </div>
      <div v-else>
        <el-table v-loading="shiftloading" :data="tableData" style="width: 100%; height:calc(100vh - 250px)" row-key="id" border
            @selection-change="handleSelectionIdsChange" default-expand-all :header-cell-style="{background:'rgb(250 250 250)',height:'50px'}" >
            <el-table-column type="selection" width="50" align="center" />
            <!-- <el-table-column prop="code" label="学生代码" width="100"></el-table-column> -->
            <!-- <el-table-column prop="photo" label="照片" width="80" align="center">
              <template #default="scope">
                <img v-if="(scope.row.photo=='' || scope.row.photo==null) && scope.row.gender == '1'" src="@/assets/student/man.png" alt="" style="width:40px;height:40px;">
                <img v-if="(scope.row.photo=='' || scope.row.photo==null) && scope.row.gender == '2'" src="@/assets/student/woman.png" alt="" style="width:40px;height:40px;">
                <img v-if="scope.row.photo!='' && scope.row.photo!=null" :src="scope.row.photo" alt="" style="width:40px;height:40px;">
              </template>
            </el-table-column> -->
            <el-table-column prop="study_code" label="学籍号" width="240"  align="center"></el-table-column>
            <el-table-column prop="id_code" label="身份证" width="240" align="center"></el-table-column>
            <el-table-column prop="name" label="学生姓名" min-width="100"></el-table-column>
            <el-table-column prop="grade_name" label="所属年级" width="180" align="center"></el-table-column>
            <el-table-column prop="class_name" label="所属班级" width="120" align="center"></el-table-column>
            <el-table-column prop="gender" label="性别" width="100" align="center">
              <template #default="scope">
              <span v-if="scope.row.gender == '1'">男</span>
              <span v-if="scope.row.gender == '2'">女</span>
              </template>
            </el-table-column>
            <el-table-column prop="age" label="年龄" width="100" align="center"></el-table-column>
            <el-table-column prop="birth_date" label="出生日期" width="140" align="center"></el-table-column>
            <!-- <el-table-column prop="nation" label="民族" width="100"></el-table-column> -->
            
            <el-table-column prop="status" label="状态" width="120" align="center">
              <template #default="scope">
              <span v-if="scope.row.status == '01'">正常</span>
              <span v-if="scope.row.status == '02'" style="color:#FF9900 ;">已转出</span>
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="200">
              <template #default="scope">
                <span style="display: flex;display: -webkit-flex;justify-content: space-around; -webkit-justify-content: space-around; ">
                  <img src="@/assets/MenuIcon/lbcz_xg.png" title="修改" style="cursor: pointer;"
                  @click="editHandle(scope.row)" >
                  <img src="@/assets/tableicon/u885.png" title="调班" style="cursor: pointer;"
                  @click="shiftClassClick(scope.row)" >
                  <img src="@/assets/tableicon/u878.png" title="转出" style="cursor: pointer;"
                  @click="transferOutClick(scope.row)" >
                  <img src="@/assets/tableicon/u880.png" title="查看视力档案" style="cursor: pointer;"
                  @click="viewVisdata(scope.row)" >
                  <img src="@/assets/tableicon/u883.png" title="信息变动日志" style="cursor: pointer;"
                  @click="logClick(scope.row)" >
                <img  src="@/assets/tableicon/u186.png" title="删除" style="cursor: pointer;"
                  @click="delHandle(scope.row)" >
                </span>
              </template>
            </el-table-column>
          </el-table>
      </div>

    </div>
    <StudentVisdata  v-if="htmlStatus == '2'" :studentInfo="info" @returnStudent="returnStudent"/>
    <StudentInfolog  v-if="htmlStatus == '3'" :studentInfo="info" @returnStudent="returnStudent"/>
    
    <el-dialog v-model="dialogVisible" :before-close="handleClose" :title="title" draggable width="620px">
      <el-form ref="infoForm" :model="info" label-width="100px" :rules="moderules">
        <div style="width: 100%;display: flex;">
          <div style="width:460px">
            <el-form-item label="所属学校">
              <el-input v-model="info.school_name" style="width: 100%;height: 40px;"  :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="所属年级">
              <el-input v-model="info.grade_name" style="width: 100%; height: 40px;"  :disabled="true"></el-input>
            </el-form-item>
          </div>
          <div style="margin-left:20px">
            <el-upload
                class="avatar-uploader"
                accept=".png, .jpg, .jpeg"
                action=""
                :show-file-list="false"
                :auto-upload="false"
                @change="uploadChange" 
              >
              <div style="width: 100px;height: 100px;position: relative;" v-if="info.photo || info.photo != ''">
                <img :src="info.photo" class="avatar" />
                <div style="position: absolute;top: 0px;left: 0px;z-index: 1;width: 100px;height: 100px;background: rgba(0,0,0,0.3);color: cornflowerblue;">
                  <el-icon style="position: absolute;top: 40px;left: 40px;z-index: 1;font-size: 20px;"
                  @click.stop="delPhoto"><Delete /></el-icon>
                </div>
              </div>
              <div  v-else style="text-align:center ;">
                <el-icon class="newavatar-uploader-icon"><Plus /></el-icon>
                <div class="newavatar-uploader-text">上传照片</div>
              </div>
              </el-upload>
          </div>
        </div>
       
        <el-form-item label="所属班级">
          <el-input v-model="info.class_name" style="width: 100%"  :disabled="true"></el-input>
        </el-form-item>
        <!-- <el-form-item label="学生代码" prop="code">
          <el-input v-model="info.code" style="width: 100%"  placeholder="请输入学生代码"></el-input>
        </el-form-item> -->
        <el-form-item label="学生姓名" prop="name">
          <el-input v-model="info.name" style="width: 100%" placeholder="请输入学生姓名"></el-input>
        </el-form-item>
        <el-form-item label="学籍号" prop="study_code">
          <el-input v-model="info.study_code" style="width: 100%" placeholder="请输入学籍号"></el-input>
        </el-form-item>
        <el-form-item label="身份证" prop="id_code">
          <el-input v-model="info.id_code" style="width: 100%" placeholder="请输入身份证"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="info.gender">
            <el-radio label="1" :disabled="true">男</el-radio>
            <el-radio label="2" :disabled="true">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker v-model="info.birth_date" type="date" placeholder="" style="width: 100%;" :disabled="true" />
        </el-form-item>
        <el-form-item label="民族" prop="nation">
          <el-input v-model="info.nation" style="width: 100%" placeholder="请输入民族"></el-input>
        </el-form-item>
        
       
      </el-form>
      <span class="dialog-footer">
        <el-button style="padding: 10px 15px" @click="handleClose">取 消</el-button>
        <el-button type="primary" style="padding: 10px 15px" @click="confirmClick(infoForm)">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog v-model="isShiftClass" :before-close="classClose" :title="title" draggable width="500px">
      <div style="padding: 10px 20px;">
        <div style="display:flex ;align-items: center;margin-bottom: 10px;">
          <div class="blueline"></div>
          <div class="texttitle">学生信息</div>
        </div>
        <div style="display: flex;align-items: center; ">
          <img v-if="(info.photo=='' ||info.photo==null) && info.gender == '1'" src="@/assets/student/man.png" alt="" style="width:100px;height:100px;">
          <img v-if="(info.photo=='' ||info.photo==null) && info.gender == '2'" src="@/assets/student/woman.png" alt="" style="width:100px;height:100px;">
          <img v-if="info.photo!='' && info.photo!=null" :src="info.photo" alt="" style="width:100px;height:100px;">
          <div style="margin-left: 20px;">
            <div class="basicname" style="padding-bottom: 0px;">
              <span style="padding-right:20px">{{ info.name }}</span>
              <span v-if="info.gender == '1'">男</span>
              <span v-if="info.gender == '2'">女</span>
            </div>
            <div class="basicinfo" style="padding-top: 3px;">
              <span>{{info.nation}}</span>
              <span style="padding: 0 15px;">|</span>
              <span>{{ info.birth_date }}</span>
              <span style="padding: 0 15px;">|</span>
              <span>{{ info.age }}岁</span>
            </div>
            <div class="basicinfo" style="padding-top: 5px;">
              <span>年级：{{info.grade_name}}</span>
            </div>
            <div class="basicinfo" style="padding-top: 5px;">
              <span>班级：{{info.class_name}}</span>
            </div>
          </div>
        </div>
        <div style="display:flex ;align-items: center;margin: 20px 0; ">
          <div class="blueline"></div>
          <div class="texttitle">调班信息</div>
        </div>
        <div style="display:flex;align-items:center;margin-bottom:15px">
          <div class="diaotext">调入年级</div>
          <el-select v-model="shiftClassInfo.grade_id" class="!w-full" placeholder="请选择年级类型" @change="gradeChange">
            <el-option v-for="(i, index) in gradeData" :key="index" :label="i.name"
              :value="i.id"></el-option>
          </el-select>
        </div>
        <div style="display:flex;align-items:center;margin-bottom:15px">
          <div class="diaotext">调入班级</div>
          <el-select v-model="shiftClassInfo.class_id" class="!w-full" placeholder="请选择班级类型" @change="classChange">
            <el-option v-for="(i, index) in classData" :key="index" :label="i.name" :value="i.id"></el-option>
          </el-select>
        </div>
        <div style="width:100%;display:flex;justify-content:flex-end">
          <el-button type="primary" style="margin-left: 10px;" @click="confirmShiftClass">确定调班</el-button>
        </div>
      </div>
       
    </el-dialog>
    <el-dialog v-model="isMuchShiftClass" :before-close="classClose" :title="title" draggable width="500px">
      <div style="padding: 10px 20px;">
        <div style="display:flex;align-items:center;margin-bottom:15px">
          <div class="diaotext">调入年级</div>
          <el-select v-model="shiftClassInfo.grade_id" class="!w-full" placeholder="请选择年级类型" @change="gradeChange">
            <el-option v-for="(i, index) in gradeData" :key="index" :label="i.name"
              :value="i.id"></el-option>
          </el-select>
        </div>
        <div style="display:flex;align-items:center;margin-bottom:15px">
          <div class="diaotext">调入班级</div>
          <el-select v-model="shiftClassInfo.class_id" class="!w-full" placeholder="请选择年级类型" @change="classChange">
            <el-option v-for="(i, index) in classData" :key="index" :label="i.name" :value="i.id"></el-option>
          </el-select>
        </div>
        <div style="width:100%;display:flex;justify-content:flex-end">
          <el-button type="primary" style="margin-left: 10px;" @click="confirmShiftClassMuch">确定调班</el-button>
        </div>
      </div>
       
    </el-dialog>
    <el-dialog v-model="isTransferOut" :before-close="classClose" :title="title" draggable width="410px">
      <div style="padding: 10px 20px;">
        <div style="display: flex;align-items: center; ">
          <img v-if="(info.photo=='' ||info.photo==null) && info.gender == '1'" src="@/assets/student/man.png" alt="" style="width:100px;height:100px;">
          <img v-if="(info.photo=='' ||info.photo==null) && info.gender == '2'" src="@/assets/student/woman.png" alt="" style="width:100px;height:100px;">
          <img v-if="info.photo!='' && info.photo!=null" :src="info.photo" alt="" style="width:100px;height:100px;">
          <div style="margin-left: 20px;">
            <div class="basicname" style="padding-bottom: 0px;">
              <span style="padding-right:20px">{{ info.name }}</span>
              <span v-if="info.gender == '1'">男</span>
              <span v-if="info.gender == '2'">女</span>
            </div>
            <div class="basicinfo" style="padding-top: 5px;">
              <span>{{info.nation}}</span>
              <span style="padding: 0 15px;">|</span>
              <span>{{ info.birth_date }}</span>
              <span style="padding: 0 15px;">|</span>
              <span>{{ info.age }}岁</span>
            </div>
          </div>
        </div>
        <div class="basicinfo" style="padding-top: 10px;">
          <span>年级：{{info.grade_name}}</span>
        </div>
        <div class="basicinfo" style="padding-top: 10px;">
          <span>班级：{{info.class_name}}</span>
        </div>
        <div class="basicinfo" style="padding-top: 10px;">
          <span>学籍号：{{info.study_code}}</span>
        </div>
        <div class="basicinfo" style="padding-top: 10px;">
          <span>身份证：{{info.id_code}}</span>
        </div>
        <div style="width:100%;display:flex;justify-content:flex-end">
          <el-button type="primary" queryShiftstyle="margin-left: 10px;" @click="confirmTransferOut">确定转出</el-button>
        </div>
      </div>
       
    </el-dialog>
    <el-dialog v-model="isShiftStudent" :before-close="classClose" :title="title" draggable width="1280px">
      <div style="padding: 10px 20px;">
        <el-row style="margin-bottom: 10px">
          <el-col :span="24" class="top-nav">
            <div>
              <el-input v-model="queryShift.schoolName" placeholder="请输入学校名称" clearable style="width: 200px;margin-right:10px"
                @keyup.enter="getShift" />
              <el-input v-model="queryShift.gradeName" placeholder="请输入年级名称" clearable style="width: 200px;margin-right:10px"
                @keyup.enter="getShift" />
              <el-input v-model="queryShift.name" placeholder="请输入学生姓名/学籍号/身份证号" clearable style="width: 200px;margin-right:10px"
                @keyup.enter="getShift" />
                
              <!-- <el-input v-model="queryShift.idCode" placeholder="请输入学籍号/身份证号" clearable style="width: 200px;"
                @keyup.enter="getShift" /> -->
              <el-button type="primary" style="margin-left: 10px;" @click="getShift">搜索</el-button>
            </div>
            <div class="left-nav">
              <el-button type="primary" @click="allshiftClick">确定</el-button>
            </div>
          </el-col>
        </el-row>
        <el-table v-loading="shiftloading" :data="shiftData" style="width: 100%; margin-bottom: 20px;height:calc(100vh - 250px)" row-key="id" border
          @selection-change="handleSelectionChange" default-expand-all :header-cell-style="{background:'rgb(250 250 250)',height:'50px'}" >
          <el-table-column type="selection" width="50" align="center" />
          <el-table-column prop="name" label="姓名" width="100"></el-table-column>
          <el-table-column prop="gender" label="性别" width="80" align="center">
            <template #default="scope">
            <span v-if="scope.row.gender == '1'">男</span>
            <span v-if="scope.row.gender == '2'">女</span>
            </template>
          </el-table-column>
          <el-table-column prop="school_name" label="所属学校" min-width="120"></el-table-column>
          <el-table-column prop="grade_name" label="所属年级" width="160"></el-table-column>
          <el-table-column prop="class_name" label="所属班级" min-width="100"></el-table-column>
          <el-table-column prop="study_code" label="学籍号" width="200"  align="center"></el-table-column>
          <el-table-column prop="id_code" label="身份证" width="200" align="center"></el-table-column>
        </el-table>
        <Page class="mt-[20px]" :total="queryShift.total" v-model:size="queryShift.size" v-model:current="queryShift.current"
          @pagination="getShift" />
      </div>
       
    </el-dialog>
  </div>
</template>

<style scoped  lang="scss">
.schoolStudent-box{
  width: 100%;
  height: calc(100vh - 130px);
  overflow: auto;
  background-color: rgb(255, 255, 255);
  border: none;
  border-radius: 3px;
  padding: 10px 15px 0px;
  padding-right: 0;
  box-sizing: border-box;
    .schoolStudent-title{
      display: flex;
      justify-content: space-between;
      font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
      font-weight: 700;
      font-style: normal;
      font-size: 18px;
      color: #282828;
      .class_order{
        padding-bottom: 5px;
        border-bottom:3px solid #409eff;
      }
      .return{
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Arial Normal', 'Arial';
        font-weight: 400;
        font-style: normal;
        font-size: 12px;
        color: #409EFF;
        width: 50px;
        height: 26px;
        border: 1px solid #C6E2FF;
        background: rgb(236, 245, 255);
        border-radius:4px;
        cursor: pointer;
      }
    }
    .schoolStudent-line{
      width: 100%;
      height: 1px;
      background: rgb(220, 223, 230);
      margin-top: -1px;
    }
}
.top-nav {
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}
.schoolClassUi{
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  height: calc(100vh - 240px);
  overflow: auto;
  padding-top: 5px;
  padding-left: 5px;
  .schoolClassLis{
    position: relative;

    width: 312px;
    height: 254px;
    padding: 15px 20px;
    margin-right: 15px;
    margin-bottom: 15px;
    font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    color: #333333;
    text-align: center;
    line-height: normal;
    border: 1px solid #C6E2FF;
    border-radius: 8px;
    .imgclass{
      display: none;
      position: absolute;
      top: 15px;
      right: 0;
      z-index:10;
      cursor: pointer;
    }
    .classicon{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      background: inherit;
      background-color: rgba(255, 153, 0, 0.0980392156862745);
      border: none;
      border-radius: 5px;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
      font-weight: 700;
      font-style: normal;
      font-size: 16px;
      color: #FF9900;
      margin-right: 15px;
    }
    .classtitle{
      font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
      font-weight: 700;
      font-style: normal;
      font-size: 16px;
      color: #333333;
    }
    .classtext{
      font-family: 'Arial Normal', 'Arial';
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
      color: #787878;
      margin-left: 15px;
    }
    .classbutton{
      display: flex;
      align-items:center ;
      justify-content: center;
      border: 1px solid #C6E2FF;
      background: rgb(236, 245, 255);
      border-radius:4px;
      width: 128px;
      height: 34px;
      font-family: 微软雅黑;
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
      color: rgb(64, 158, 255);
      cursor: pointer;
    }
    .classbutton:hover{
      background: rgb(64, 158, 255);
      color: #fff;
    }
  }
  .schoolClassLis:hover{
    border: 1px solid transparent;
    box-shadow: 0 0 0 2px rgb(64, 158, 255);
    .imgclass{
      display: block;
    }
    .zhaunchu{
      display: none;
    }
  }
  
}
.basicname{
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  color: #333333;
  text-align: left;
  padding-bottom: 10px;
}
.basicinfo{
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #787878;
  text-align: left;
}

.blueline{
  width: 5px;
  height: 16px;
  background: inherit;
  background-color: rgba(64, 158, 255, 1);
  margin-right: 4px;
}
.texttitle{
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  color: #363636;
}
.diaotext{
  font-family: 微软雅黑;
  font-weight: 400;
  font-style: normal;
  color: rgb(148, 148, 148);
  font-size: 14px;
  text-align: left;
  width: 80px;
}
.zhaunchu{
  position:absolute;
  z-index:1;
  top:20px;
  right:20px;
  font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    color: #FF9900;
    text-align: center;
}
</style>
