<template>
  <div class="page_search">

    <div class="content_container">
      <div class="container_left">
        <el-input size="medium" v-model="teacherName" @input="TeacherNameChange"
          placeholder="教师姓名，编号"><el-button slot="append" icon="el-icon-search" @click="TeacherNameChange()"></el-button></el-input>
        <div class="right_table" style="width: 100%;">
          <el-table style="margin-top: 16px;" :data="teacherTableData" border  :highlight-current-row="true"
            @row-click="ChooseTeacher" :row-class-name="TableRowClassName" stripe :height="leftTableHeight">
                  <el-table-column prop="userAccount" label="账号" align="center"></el-table-column>
                  <el-table-column prop="teacherName" label="教师" align="center">
            </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="container_right">
        <div class="search_content" style="height: 36px;">
          <div class="content_left">
            <el-select   v-model="schoolYearId" @change="ChangeSchoolYear"   placeholder="请选择" class="select_year" v-if="hasRealSchoolYear">
              <el-option v-for="item in schoolYearIdList" :key="item.id" :label="item.schoolYearName" :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="page_jg"></div>
        <div class="page_search content_table">
          <el-switch
          style="position: absolute; top: 12px; right: 0; z-index: 1;"
          v-model="checkedTeacherToSet"
          active-text="选中教师配置权限关系"
          inactive-text=""
          >
          </el-switch>
          <div class="page_tab">
            <el-tabs v-model="activeName" @tab-click="HandleClick">
              <el-tab-pane :label="role.roleName" :name="role.roleCode" v-for="(role,index) in roleList" :key="index">
              </el-tab-pane>
            </el-tabs>
          </div>
          
          <div class="page_table" v-if="fixDisplayValue">
            <el-table :data="tableData" border :height="tableHeight" :key="tableKey">
              <el-table-column :label="fixDisplayValue" prop="rowValue" align="center" width="160" fixed="left">
               
              </el-table-column>
              <el-table-column :label="column.colName" :align="activeName=='PREPARE_COURSE_LEADER'?'center':'left'" v-for="(column,columnIndex) in tableColumn" min-width="140">
                <template slot-scope="scope">
                    
                    <div v-if="checkedTeacherToSet" class="row_content"  @click="DebouncedSetHeadTeacherItem(scope.row,column,columnIndex)">
                      <div v-if="scope.row.rowData[columnIndex].canFull==1" class="tag_content" :class="activeName=='PREPARE_COURSE_LEADER'?'':'tag_content_left'">
                        <div class="content_teacher" v-for="(teacher, idx) in scope.row.rowData[columnIndex].cellData"  :key="idx" >
                          <el-tooltip class="item" effect="dark" :content="`${teacher.displayName} ${teacher.userAccount}`" placement="top" :disabled="!teacher.displayName">
                            <span class="content_teacher_item">
                              <span>{{ teacher.displayName }}</span>
                              <img src="@/assets/icon/close_teacher.webp" @click.stop="DeleteTeacherPermission(teacher,column)">
                            </span>
                          </el-tooltip>
                        </div>
                        <div class="content_item" v-if="scope.row.rowData[columnIndex].cellData.length==0 " >请选择教师</div>
                      </div>
                      <template v-else>
                        <!-- 没有当前科目 不可点击-->
                        <span >-</span>
                      </template>
                      
                    </div>
                    <div v-else class="tag_content " :class="activeName=='PREPARE_COURSE_LEADER'?'':'tag_content_left'">
                      <span  class="content_text" v-for="(teacher, idx) in scope.row.rowData[columnIndex].cellData"  :key="idx" >
                        <el-tooltip class="item" effect="dark" :content="`${teacher.displayName} ${teacher.userAccount}`" placement="top" :disabled="!teacher.displayName">
                          <span>{{ teacher.displayName }}</span>
                        </el-tooltip>
                      </span>
                      <span  v-if="scope.row.rowData[columnIndex].cellData.length==0">-</span>
                    </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { throttle,debounce } from "lodash";

export default {
  data() {
    return {
      activeName:"",
      teacherName: "",
      teacherList: [],
      selGradeYear: {
        value: "",
        arr: [
          {
            id: 101,
            schoolYearName: "2023-2024学年"
          },
        ]
      },
      schoolYearId:'',
      schoolYearIdList:[],//学年list
      roleCode:"",//角色code
      roleId:'',//角色ID
      roleList:[],//角色列表
      teacherTableData:[],
      tableData:[],//表格数据
      fixDisplayValue:'',//固定的表头数据
      tableColumn:[],//table动态列数据
      checkedTeacherToSet:false,//是否选中教师并设置权限关系

      courseData: [],
      rolePersonList: [
        // {
        //   "roleId":"",
        //   "roleName":"",
        //   "111":[
        //     {
        //       teacherId:"",
        //       teacherName:"",
        //     }
        //   ]
        // }
      ],
      roleTopSetData: [],
      selectedTeacher: {},//选择的教师信息
      checkedRenKeChange:false,
      loading:true,
      mainHeight:0,
      leftTableHeight:0,//左侧表格高度
      tableHeight: 0,//主表格高度
      hasRealSchoolYear: true,//是否显示学年筛选条件
      tableKey:0,
    }
  },
  mounted() {
    this.GetUserPermissionInfo();//获取人员权限设置数据
    this.GetTeacherTableData();//获取教师列表数据
    this.SetTableHeight(); //设置表格高度
    window.addEventListener("resize", this.HandleResize); //监听窗口大小变化
  },
  beforeDestroy() {
      // 组件销毁移除监听 防止内存泄漏
      window.removeEventListener("resize", this.HandleResize);
  },
  computed: {
    filteredRoleTopSetData() {
      // 过滤出角色名称包含"校长"的角色
      let filteredData = this.roleTopSetData.filter(role => role.roleName.includes('校长'));
      // 使用 Map 对象进行去重
      const uniqueData = new Map(filteredData.map(item => [item.roleName, item]));
      
      // 返回去重后的数据
      return Array.from(uniqueData.values());
    },
    filteredSubjectTopSetData() {
      // 过滤出角色名称包含"科目组长"的角色
      return this.rolePersonList.filter(role => role.roleName.includes('科目组长'));
    },
    filteredSubjectClassTopSetData() {
      // 过滤出角色名称包含"备课组长"的角色
      return this.rolePersonList.filter(role => role.roleName.includes('备课组长'));
    },
    filteredGradeTopSetData() {
      // 过滤出角色名称包含"年级组长"的角色
      let filteredData = this.roleTopSetData.filter(role => role.roleName.includes('年级组长'));
       // 使用 Map 对象进行去重
       const uniqueData = new Map(filteredData.map(item => [item.roleName, item]));
      
      // 返回去重后的数据
      return Array.from(uniqueData.values());
    },
    filteredRoleSchoolTopSetData() {
      // 过滤出角色名称包含"学校管理员"的角色
      let filteredData = this.roleTopSetData.filter(role => role.roleName.includes('学校管理员'));
       // 使用 Map 对象进行去重
       const uniqueData = new Map(filteredData.map(item => [item.roleName, item]));
      
      // 返回去重后的数据
      return Array.from(uniqueData.values());
    }
  },
  methods: {
    // 监听窗口大小变化，重新计算表格高度 使用节流防止频繁改变窗口大小导致计算量过大而页面卡顿
    HandleResize: throttle(function () {
        this.SetTableHeight();
    }, 500), // 节流 500 毫秒内最多执行一次
    //设置表格高度
    SetTableHeight() 
    {
        let windowViewHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        
        this.$nextTick(() => {
            this.leftTableHeight = windowViewHeight - 265;
            this.tableHeight=windowViewHeight - 320;
        });
    },

    //获取人员权限设置数据
    GetUserPermissionInfo(isUpdateTable=true)
    {
      let param={
        roleCode:this.roleCode,
        roleId:this.roleId,//角色ID
        schoolYearId:this.schoolYearId
      };
      console.log("打印人员权限设置管理数据参数",param)
      this.$api.user.getUserPermissionInfo(param).then((res) => {
        console.log("打印人员权限设置管理数据",res)
        if(res.code == 200 && res.data!=null)
        {
          if(res.data.pcRoleBOS)
          {
            this.roleList=res.data.pcRoleBOS || [];//角色列表
            this.roleCode=this.roleList[0].roleCode;//默认选中第一个
            this.roleId=this.roleList[0].roleId;//
            this.activeName=this.roleList[0].roleCode;//默认选中第一个
            console.log("打印角色 列表",this.roleList);
          }
          if(res.data.pcSchoolYearVOS)
          {
            this.schoolYearIdList=res.data.pcSchoolYearVOS || [];
            this.schoolYearId=res.data.schoolYearId || '';//默认选中的学年
          }
          if(res.data.tableData)
          {
            this.tableData=res.data.tableData.rowData || [];//表格数据
            this.tableColumn=res.data.tableData.headData || [];//表头数据
            this.fixDisplayValue=res.data.tableData.fixDisplayValue || [];//固定的表头数据
          }
          else
          {
            this.tableData= [];//表格数据
          }
          // 其他数据更新
          // this.tableKey += 1; // 更新 key 以强制重新渲染表格
          //恢复滚动条位置
          if(isUpdateTable)
          {
            
            this.tableKey+=1;//解决串行问题
          }
          else
          {
            //不更新表格
          }
          
        }
      })
    },

    //获取任课教师 所有教师账号表格列表数据
    GetTeacherTableData()
    {
      let param={
        accountName:this.teacherName,//查询教师姓名
      };
      this.$api.user.getTeacherTableData(param).then(res=>{
        console.log("打印任课教师列表",res);
        if(res.code==200)
        {
          this.teacherTableData=res.data || [];
        }

      })
    },

    // 使用 debounce 包装 SetHeadTeacherItem 方法
    DebouncedSetHeadTeacherItem: debounce(function(item, header, headerIndex) {
      this.SetHeadTeacherItem(item, header, headerIndex);
    }, 500), // 500 毫秒内只允许执行一次
    //设置备课组长或者科目组长或者年级组长
    SetHeadTeacherItem(item,header,headerIndex)
    {
      console.log("打印item",item);
      console.log("打印header",header);
      console.log("打印headerIndex",headerIndex);
      console.log("打印选中的教师",this.selectedTeacher);

      if(item.rowData[headerIndex].canFull==1)
      {

      }
      else
      {
        //没有科目的不可点击
        return;
      }

     
      if(!this.selectedTeacher.teacherId)
      {
        this.$message.error("请选择一个教师");
        return
      }
      else
      {
        //判断教师是否重复
        let list=item.rowData[headerIndex].cellData || [];
        console.log("打印list",item);
        if(list.some(item => item.teacherId === this.selectedTeacher.teacherId))
        {
          this.$message.error("该教师已经添加了!");
          return 
        }
      }

      let param={
        "roleCode": this.roleCode,//角色code
        "colId": header.colId,//列ID
        "colName":header.colName,//列名称
        "rowId": item.rowId,//行id
        "rowValue": item.rowValue,//行值
        "schoolYearId": this.schoolYearId,//学年ID 来自下拉列表
        "teacherId": this.selectedTeacher.teacherId//教师ID
      };
      this.$api.user.saveUserPermissionInfo(param).then(res=>{
        console.log("打印保存的结果",res);
        if(res.code==200)
        {
          this.$message.success("保存成功!");
          this.GetUserPermissionInfo(false);
        }
      })
    },

    //删除教师权限
    DeleteTeacherPermission(item)
    {
      console.log("item",item);
      this.$confirm(`确定要删除   ${item.displayName}吗?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          customClass:'page_dialog',
      }).then(() => {
          let param={
            roleCode:this.roleCode,//角色code
            tchCourseId:item.tchCourseId,
          };
          this.$api.user.deleteTeacherPermissionInfo(param).then(res=>{
            console.log("打印删除教师权限结果",res);
            if(res.code==200)
            {
              this.$message.success("删除成功!");
              this.GetUserPermissionInfo(false);//获取人员权限设置数据
            }
            else
            {
              this.$message.error("删除失败!"+res.msg);
            }
          })
          
      })
      
      
    },

    //切换学年
    ChangeSchoolYear()
    {
      this.GetUserPermissionInfo();//获取权设置列表数据
    },

    //切换
    HandleClick() 
    {
      
      this.roleCode=this.activeName;
      const roleItem=this.roleList.find(item=>item.roleCode==this.roleCode);
      
      console.log("切换角色",this.roleList);
      this.roleId=roleItem.id;
      this.hasRealSchoolYear=roleItem.hasRealSchoolYear==1?true:false;
      //获取对应的角色ID
      console.log("打印hasRealSchoolYear",this.hasRealSchoolYear);
      this.GetUserPermissionInfo();//获取权设置列表数据
    },

    //获取学年学期
    getGradeTerm() 
    {
      let param = { validStatus: false }
      this.$api.school.getGradeYearTearm(param).then((res) => {
        // console.log(res)
        if (res.code == 200) {
          let selItem = res.data.find(item=>item.currentStatus==true)
          this.selGradeYear.arr = res.data;
          this.selGradeYear.value = selItem.id;
          this.getRolePersonList();
          this.getTeacherList();
          this.getSchoolQueryPersonRole();
        } else {
          this.$message.error(res.msg);
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    getTeacherList() {
      let params = {
        userName: this.teacherName,
      };
      this.$api.school.getTeacherList(params).then((res) => {
        if (res.code == 200) {
          this.teacherList = res.data;
          this.loading=false;
        }
      }).catch((err) => { console.log(err) })
    },
    getRolePersonList() {
      let param={
        "schoolYearId":this.selGradeYear.value
      }
      this.$api.school.getRolePersonList(param).then((res) => {
        if (res.code == 200) {
          this.rolePersonList = res.data.dataList;
          this.courseData = res.data.courseTitleData;
        }
      })
    },
    cellClassName({ row, column, rowIndex, columnIndex }) {
      row.index = rowIndex;
      column.index = columnIndex;
    },

    //选中教师事件
    ChooseTeacher(item) 
    {
      this.selectedTeacher = item;
    },

    // 定义行类名方法
    TableRowClassName({ row }) {
      console.log("row",row);
      if (this.selectedTeacher.teacherId === row.teacherId) {
        return 'selected_row';
      }
      return '';
    },

    //教师姓名搜索
    TeacherNameChange() 
    {
      this.GetTeacherTableData();
      // this.teacherList = 
    },
    //头部设置角色
    setRole(item, index) {
      if(!this.checkedRenKeChange)return;
      let checkedTeacher = this.chooseTeacherData;
      //是否已包含
      let isHas = item.teacherData.some((item) => {
        return item.teacherUserId == checkedTeacher.id
      })
      if(isHas){
        this.$message.warning('该教师已设置为该角色');
        return;
      }
      
      if (checkedTeacher.id) {
        this.$confirm('确定将该教师设置为该角色吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          customClass:'page_dialog',
        }
        ).then(() => {
          let items = {
            "teacherUserId": this.chooseTeacherData.id,
            "teacherUserName": this.chooseTeacherData.username,
          }
          let params = {
            "schoolTeacherIdentityType": 1,
            "teacherUserInfoId": this.chooseTeacherData.id,
            "identityCode": item.code,
            "schoolYearId": this.selGradeYear.value,
            "schoolGradeId": item.gradeId,
          }
          // let aFind = this.roleTopSetData[index].teacherData.find(a=>a.teacherUserId==this.chooseTeacherData.id&&a.teacherUserName==this.chooseTeacherData.username)
          // if(aFind){
          //   this.$message.warning('该老师角色当前已设置')
          // }else{
            this.$api.school.teacherBindRole(params).then((res) => {
              if (res.code == 200) {
                this.roleTopSetData[index].teacherData.push(items);
                // this.rolePersonList[rowIndex][cellKey].push(item);
                // this.$message.success("添加成功");
              }
            })
        }).catch(
          () => {
            this.$message({
              type: 'info',
              message: '已取消设置'
            }
            );
          }
        );
      }

    },
    //备课组长设置
    setPreparationLeader(row, column) {
      if(!this.checkedRenKeChange)return;
      if (!this.chooseTeacherData || !this.chooseTeacherData.id) return;
      if (column.property == 'roleName') return;
      let rowIndex = row.index;
      let item = {
        teacherId: this.chooseTeacherData.id,
        teacherName: this.chooseTeacherData.username
      };
      let cellKey = column.property;
      if (this.filteredSubjectClassTopSetData[rowIndex][cellKey]) {
        let identityCode = 2;
        let params = {
          "schoolTeacherIdentityType": 1,
          "teacherUserInfoId": this.chooseTeacherData.id,
          "schoolCourseId": column.property,
          "identityCode": identityCode,
          "schoolYearId": this.selGradeYear.value,
          "schoolGradeId": row.gradeId,
        }
        let aFind = this.filteredSubjectClassTopSetData[rowIndex][cellKey].findIndex(a=>a.teacherId==this.chooseTeacherData.id&&a.teacherName==this.chooseTeacherData.username)
        if(aFind==-1){
          this.$api.school.teacherBindRole(params).then((res) => {
            if (res.code == 200) {
              this.getRolePersonList()
              // this.filteredSubjectClassTopSetData[rowIndex][cellKey].push(item);
              // this.$message.success("添加成功");
            }
          })
        }else{
          this.$message.warning('该老师角色当前已设置')
          return;
        }
      } else {
        this.$message.warning('当前年级没有这个科目！');
      }
    },
    setPreparationLeader1(row, column) {
      if(!this.checkedRenKeChange)return;
      if (!this.chooseTeacherData || !this.chooseTeacherData.id) return;
      if (column.property == 'roleName') return;
      let rowIndex = row.index;
      let item = {
        teacherId: this.chooseTeacherData.id,
        teacherName: this.chooseTeacherData.username
      };
      let cellKey = column.property;
      if (this.filteredSubjectTopSetData[rowIndex][cellKey]) {
        let identityCode = 3;
        let params = {
          "schoolTeacherIdentityType": 1,
          "teacherUserInfoId": this.chooseTeacherData.id,
          "schoolCourseId": column.property,
          "identityCode": identityCode,
          "schoolYearId": this.selGradeYear.value,
          "schoolGradeId": row.gradeId,
        }
        let aFind = this.filteredSubjectTopSetData[rowIndex][cellKey].findIndex(a=>a.teacherId==this.chooseTeacherData.id&&a.teacherName==this.chooseTeacherData.username)
        if(aFind==-1){
          this.$api.school.teacherBindRole(params).then((res) => {
            if (res.code == 200) {
              this.selGradeYearChange()
              // this.filteredSubjectTopSetData[rowIndex][cellKey].push(item);
              // this.$message.success("添加成功");
            }
          })
        }else{
          this.$message.warning('该老师角色当前已设置')
          return;
        }
      } else {
        this.$message.warning('当前年级没有这个科目！');
      }
    },
    setPreparationLeader2(row, column) {
      if(!this.checkedRenKeChange)return;
      if (!this.chooseTeacherData || !this.chooseTeacherData.id) return;
      if (column.property == 'roleName') return;
      let rowIndex = row.index;
      let item = {
        teacherUserId: this.chooseTeacherData.id,
        teacherUserName: this.chooseTeacherData.username
      };
        let params = {
          "schoolTeacherIdentityType": 1,
          "teacherUserInfoId": this.chooseTeacherData.id,
          "identityCode": 4,
          "schoolYearId": this.selGradeYear.value,
          "schoolGradeId": row.gradeId,
        }
        let aFind = this.filteredGradeTopSetData[rowIndex]['teacherData'].findIndex(a=>a.teacherUserId==this.chooseTeacherData.id&&a.teacherUserName==this.chooseTeacherData.username)
        if(aFind==-1){
          this.$api.school.teacherBindRole(params).then((res) => {
            if (res.code == 200) {
              this.getSchoolQueryPersonRole()
              // this.filteredGradeTopSetData[rowIndex]['teacherData'].push(item);
              // this.$message.success("添加成功");
            }
          })
        }else{
          this.$message.warning('该老师角色当前已设置')
          return;
        }
       
    },
    setPreparationLeader3(row, column) {
      if(!this.checkedRenKeChange)return;
      if (!this.chooseTeacherData || !this.chooseTeacherData.id) return;
      if (column.property == 'roleName') return;
      let rowIndex = row.index;
      let item = {
        teacherUserId: this.chooseTeacherData.id,
        teacherUserName: this.chooseTeacherData.username
      };
        let params = {
          "schoolTeacherIdentityType": 1,
          "teacherUserInfoId": this.chooseTeacherData.id,
          "identityCode": 5,
          "schoolYearId": this.selGradeYear.value,
          "schoolGradeId": row.gradeId,
        }
        let aFind = this.filteredRoleTopSetData[rowIndex]['teacherData'].findIndex(a=>a.teacherUserId==this.chooseTeacherData.id&&a.teacherUserName==this.chooseTeacherData.username)
        if(aFind==-1){
          this.$api.school.teacherBindRole(params).then((res) => {
            if (res.code == 200) {
              // this.filteredRoleTopSetData[rowIndex]['teacherData'].push(item);
              this.getSchoolQueryPersonRole()
              // this.$message.success("添加成功");
            }
          })
        }else{
          this.$message.warning('该老师角色当前已设置')
          return;
        }
        
      
    },
    setPreparationLeader4(row, column) {
      if(!this.checkedRenKeChange)return;
      if (!this.chooseTeacherData || !this.chooseTeacherData.id) return;
      if (column.property == 'roleName') return;
      let rowIndex = row.index;
      let item = {
        teacherUserId: this.chooseTeacherData.id,
        teacherUserName: this.chooseTeacherData.username
      };
        let params = {
          "schoolTeacherIdentityType": 1,
          "teacherUserInfoId": this.chooseTeacherData.id,
          "identityCode": 6,
          "schoolYearId": this.selGradeYear.value,
          "schoolGradeId": row.gradeId,
        }
        let aFind = this.filteredRoleSchoolTopSetData[rowIndex]['teacherData'].findIndex(a=>a.teacherUserId==this.chooseTeacherData.id&&a.teacherUserName==this.chooseTeacherData.username)
        if(aFind==-1){
          this.$api.school.teacherBindRole(params).then((res) => {
            if (res.code == 200) {
              this.getSchoolQueryPersonRole()
              // this.filteredRoleSchoolTopSetData[rowIndex]['teacherData'].push(item);
              // this.$message.success("添加成功");
            }
          })
        }else{
          this.$message.warning('该老师角色当前已设置')
          return;
        }
        
      
    },
    //删除备课组长
    deletePreparationLeader(index, prop, idx) {
      let id = this.filteredSubjectClassTopSetData[index][prop][idx].id;
      let params = {
        ids: [id]
      }
      this.$api.school.deleteTeacherBindRole(params).then((res) => {
        if (res.code == 200) {

          if (this.filteredSubjectClassTopSetData[index][prop].length > 0) {
            this.filteredSubjectClassTopSetData[index][prop].splice(idx, 1);
          }
          // this.$message.success("删除成功");
        }
      })

    },
    deletePreparationLeader1(index, prop, idx) {
      let id = this.filteredSubjectTopSetData[index][prop][idx].id;
      let params = {
        ids: [id]
      }
      this.$api.school.deleteTeacherBindRole(params).then((res) => {
        if (res.code == 200) {

          if (this.filteredSubjectTopSetData[index][prop].length > 0) {
            this.filteredSubjectTopSetData[index][prop].splice(idx, 1);
          }
          // this.$message.success("删除成功");
        }
      })

    },
    //删除年级组长
    deleteGradePreparationLeader(item, index, idx) {
      let id = item.id;
      let params = {
        ids: [id]
      }
      this.$api.school.deleteTeacherBindRole(params).then((res) => {
        if (res.code == 200) {
          this.filteredGradeTopSetData[index].teacherData.splice(idx, 1);
          // this.$message.success("删除成功");
        }
      }).then((err) => {
        console.log(err)
      })
    },
    deleteGradePreparationLeader1(item, index, idx) {
      let id = item.id;
      let params = {
        ids: [id]
      }
      this.$api.school.deleteTeacherBindRole(params).then((res) => {
        if (res.code == 200) {
          this.filteredRoleTopSetData[index].teacherData.splice(idx, 1);
          // this.$message.success("删除成功");
        }
      }).then((err) => {
        console.log(err)
      })
    },
    deleteGradePreparationLeader2(item, index, idx) {
      let id = item.id;
      let params = {
        ids: [id]
      }
      this.$api.school.deleteTeacherBindRole(params).then((res) => {
        if (res.code == 200) {
          this.filteredRoleSchoolTopSetData[index].teacherData.splice(idx, 1);
          // this.$message.success("删除成功");
        }
      }).then((err) => {
        console.log(err)
      })
    },
    getSchoolQueryPersonRole() {
      let param = {
        schoolYearId: this.selGradeYear.value
      }
      this.$api.school.getSchoolQueryPersonRole(param).then((res) => {
        if (res.code == 200) {
          this.roleTopSetData = res.data;
        }
      })
    },
    selGradeYearChange(){
      this.getRolePersonList();
      this.getSchoolQueryPersonRole();
    },
  }
}
</script>
<style lang="scss" scoped>
.content_container
{
  width: 100%;
  height: calc(100% - 56px);
  display: flex;
  justify-content: space-between;
  align-items: start;
  .container_left
  {
    width: 200px;
    height: auto;
  }

  .container_right
  {
    width: calc(100% - 220px);
    height: auto;
  }
}
.content_table
{
  position: relative;
}
.table_switch
{
  position: absolute;
  right: 0;
  top:10px;
}

.page_tab
{
  width: 100%;
  height: 60px;
}
.tag_content {
  width: 100%;
  // justify-content: flex-start!important;
  .content_text {
    padding: 0 5px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}
.tag_content_left
{
  justify-content: flex-start !important;
  padding-left: 10px;

}
</style>