<!-- 活动解析 -->
<template>
  <div>
    <!-- table 表格 -->
    <el-row :gutter="20" class="main-header">
      <el-col :span="8" :offset="1">
        <div
          @click="handApor()"
          :class="{Apporvalactive:Activeindex == false,ApporStyles:true}"
        >批改老师</div>
        <div
          @click="AutoApor()"
          :class="{Apporvalactive:Activeindex == true,ApporStyles:true}"
        >匹配知识点老师</div>
        <!-- <span class="bank-active" @click="isShow(2)">查看</span>
        <span class="bank-active" @click="groupPicture()">作业原图</span> -->
      </el-col>
      <el-col :span="14" :offset="0">
        <div class="teach-block">
          <div class="miniorteach-Allot">
            <input
              type="text"
              placeholder="请输入学生姓名"
              v-model="filters.inputValue"
              class="miniorinput-with-Allot"
            />
            <span   
              @click="UnallotHomework()"
              class="miinorSeachIcon el-icon-search"
            ></span>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-table
      :data="StudentHomeworkNoFeedbackList.list"
      :header-cell-class-name="tableheaderClassName"
      :header-cell-style="{
          'background-color': '#F6F7FB',
          'color': '#393939',
          'font-size': '16px'
           }"
      size="medium"
      border
    >
      <el-table-column label="学生姓名" header-align="center">
        <template slot-scope="scope">
          <div class="scope-list">
            <!-- <img :src="BASE_URL+scope.row.imgUrl" alt class="table-img" v-if="scope.row.imgUrl" />
            <img src="../assets/img/user.jpg" alt v-if="!scope.row.imgUrl" class="table-img" />-->
            <span class="scope-name">{{scope.row.name}}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="subject" label="科目" header-align="center"></el-table-column>
      <el-table-column prop="picNums" label="张数" header-align="center"></el-table-column>
      <el-table-column prop="status" label="状态" header-align="center" v-if="Activeindex == false">
        <template slot-scope="scope">
          <span v-if="scope.row.status ==1 " >未分配</span>
          <span v-if="scope.row.status ==2 " >已分配未批改</span>
          <span v-if="scope.row.status ==3 " >批改中</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" header-align="center" v-if="Activeindex == true">
         <template slot-scope="scope">
          <span v-if="scope.row.status ==1 " >未分配</span>
          <span v-if="scope.row.status ==2 " >已分配未匹配</span>
          <span v-if="scope.row.status ==3 " >匹配中</span>
        </template>
      </el-table-column>
      <el-table-column prop="waitTime" label="等待时长" header-align="center"></el-table-column>
      <el-table-column prop label="批改老师" header-align="center" width="200">
        <template slot-scope="scope">
          <span class="bank-active" >{{scope.row.teacherName}}</span>
          <!-- @click="isShow(3,scope.row)" -->
        </template>
      </el-table-column>
      <el-table-column prop="statusTime" label="状态时间" header-align="center"></el-table-column>
      <el-table-column prop label="作业图片" header-align="center" width="200">
        <template slot-scope="scope">
          <span style="color:#67c23a" class="bank-active" @click="GetStudentHomeworkDetail(scope.row)">查看</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label header-align="left" width="200">
        <template slot-scope="scope">
          <div class="UpTeacherIDiNfo" @click="isShow(1,scope.row)">
            <span>分配</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页显示 -->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="pageChange"
      :page-sizes="[10, 20, 30, 40]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="parseInt(StudentHomeworkNoFeedbackList.pages)"
    ></el-pagination>
    <!--可分配老师-->
    <!--可分配老师-->
    <div class="showModel" @click="allShowModel(1)" v-if="hiddenModel"></div>
    <div class="model" style="width:50%; top:5%;" v-if="hiddenModel">
      <div class="model-text">
        <div class="model-text-head">
          <div>可分配老师</div>
          <div class="teach-Allot">
            <input
              type="text"
              placeholder="请输入老师名字"
              v-model="inputValueAllot"
              class="input-with-Allot"
            />
            <span @click="SearchvalueTeacherAllot()" class="SeachIcon el-icon-search"></span>
          </div>
          <div>{{allotList.Allotgarde}}{{allotList.Allotsubjct}}</div>
        </div>
        <div v-show="this.inputValueAllot =='' &&TeacherAllotList.list.length ==0">
          <img src="../assets/img/NoTeacherAllot (1).png" alt />
          <div style="display:block; margin-top:20px;">暂无可分配老师!</div>
        </div>
        <div v-show="this.inputValueAllot !=='' && TeacherAllotList.list.length ==0">
          <img src="../assets/img/SEARCH (1).png" alt />
          <div style="display:block; margin-top:20px;">搜索不到老师!</div>
        </div>
        <div
          class="model-itemss"
          style="margin:10px;"
          v-for="(v, k) in TeacherAllotList.list"
          :key="k"
        >
          <div class="model-items-left">
            <div class="model-items-left-top">
              <div>
                <img
                  :src="BASE_URL + v.imgUrl"
                  v-if="v.imgUrl"
                  alt
                  class="model-items-left-top-img"
                />
                <img
                  src="../assets/img/attt.png"
                  v-if="!v.imgUrl"
                  alt
                  class="model-items-left-top-img"
                />
                <div class="teach-style">
                  <div class="teach-style-name">{{v.name}}</div>
                  <div class="model-items-left-top-number">等待张数：{{v.waitCount}}</div>
                </div>
              </div>
              <div>
                <el-button v-show="v.type && v.type === 1" disabled type="info">已分配</el-button>
                <el-button
                  v-show="!v.type || v.type !== 1"
                  @click="GOtoTeacherAllot(v,k)"
                  type="success"
                >分配</el-button>
              </div>
            </div>
          </div>
        </div>
        <el-pagination
          background
          @size-change="handleSizeChange4"
          @current-change="pageChange4"
          :page-sizes="[10]"
          layout="total, prev, pager, next"
          :total="parseInt(TeacherAllotList.pages)"
          :hide-on-single-page="true"
        ></el-pagination>
      </div>
    </div>
    <!-- 老师详情弹框 -->
    <div class="showModel" @click="allShowModel(2)" v-if="ModelAppor"></div>
    <div class="model" style="width:40%;left: 32.5%" v-if="ModelAppor">
      <div class="model-text">
        <div class="model-manager">
          <div v-if="this.Activeindex == false">批改老师</div>
          <div v-if="this.Activeindex == true">匹配知识点老师</div>
          <div v-if="this.teacherRoles ==11">(学习管理员)</div>
          <div>
            <img src="../assets/img/del@2x.png" alt @click="allShowModel(2)" />
          </div>
        </div>
        <div class="model-items">
          <div class="model-items-first">
            <div>
              <img
                :src="BASE_URL + GetTeacherDetail.imgUrl"
                v-if="GetTeacherDetail.imgUrl"
                alt
                class="model-items-first-img"
              />
              <img
                src="../assets/img/attt.png"
                v-if="!GetTeacherDetail.imgUrl"
                alt
                class="model-items-first-img"
              />
              <div class="model-items-first-left" style="display:inline-block">
                <!-- <div class="Onlinename">李小花</div>
                <div class="Online">（在线）</div>
                <div class="model-items-first-left-down">南方科技大学</div>-->
                <div class="Onlinename">{{GetTeacherDetail.name}}</div>
                <div v-if="GetTeacherDetail.status ===1" class="Online">（在线）</div>
                <div v-if="GetTeacherDetail.status ===0" class="Online">（离线）</div>
                <div class="model-items-first-left-down">{{GetTeacherDetail.school}}</div>
              </div>
              <div
                class="closeAnOpenId"
                style="display:inline-block"
                v-if="this.TeacherIdStatus ==1 || 2 && this.TeacherIdStatus !==3"
              >
                <div class="closeTeacherID" @click="isShow(GetTeacherDetail,6)">
                  <span class="el-icon-close">封号</span>
                </div>
                <div
                  v-if="this.Activeindex == false && this.teacherRoles ==8"
                  class="UpTeacherID"
                  @click="isShow(GetTeacherDetail,5)"
                >
                  <span class="el-icon-upload2">升级</span>
                </div>
              </div>
              <div style="display:inline-block" v-if="this.TeacherIdStatus ==3">
                <div class="UpTeacherID" @click="isShow(GetTeacherDetail,7)">
                  <span class="el-icon-unlock">解封</span>
                </div>
              </div>
            </div>
          </div>
          <div
            class="model-items-other"
            v-if="this.Activeindex == false"
          >批改科目 : {{GetTeacherDetail.subject}}</div>
          <div
            class="model-items-other model-active"
            v-if="this.Activeindex == true"
          >批改科目 : {{GetTeacherDetail.subject}}</div>
          <div class="model-items-other model-active" v-if="this.Activeindex == false">
            批改年级 :
            <span v-for="(v, k) of arrGrade" :key="k">{{v}},</span>
          </div>
          <!-- <div class="model-items-other model-active">
            可批改时间：
            <div class="buttonAppoval">
              <div class="TeacherApporTime" v-for="(v, k) of arrPeriod" v-show="v" :key="k">
                <span>{{v}}</span>
              </div>
            </div>
          </div>-->
          <div class="model-items-other">手机号 : {{GetTeacherDetail.phone}}</div>
          <div class="model-items-other model-active">上次登录时间 : {{GetTeacherDetail.lastOnlineTime}}</div>
          <div
            class="model-items-other"
            v-if="this.Activeindex == false"
          >批改正确率 : {{GetTeacherDetail.accuracyRate}}</div>
          <div
            class="model-items-other"
            v-if="this.Activeindex == true"
          >匹配正确率 : {{GetTeacherDetail.accuracyRate}}</div>
          <div class="model-items-other model-active">
            被报错总次数 :
            <span style="color:red;">{{GetTeacherDetail.wrongCount}}次</span>
          </div>
          <div
            class="model-items-other model-active"
            v-if="this.Activeindex == false"
          >家长满意度 : {{GetTeacherDetail.satisfactionDegree}}</div>
          <div style="display:inline-block">
            <div
              v-if="this.TeacherIdStatus ==1  && this.teacherRoles ==8"
              class="OutOnlineTeacherID"
              @click="isShow(GetTeacherDetail,11)"
            >
              <span class="el-icon-close">强制下线</span>
            </div>
            <div
              class="UpTeacherID"
              style="width:120px;margin-top:30px;"
              @click="isShow(GetTeacherDetail,8)"
            >
              <span class="el-icon-user-solid">重新分配组</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 升级校区管理员弹框 -->
    <div class="showModel" @click="allShowModel(5)" v-if="rePush"></div>
    <div class="modelspec" v-if="rePush">
      <div class="model-text">
        <div class="model-text-items">
          <div>
            <img
              src="../assets/img/del@2x.png"
              alt
              @click="allShowModel(5)"
              class="model-text-items-close"
            />
          </div>
          <div>是否要将{{TeacherName}}老师升级为学习管理员？</div>
        </div>
        <div class="model-btn">
          <div class="model-btn-items main-gay" @click="RepushTeacherAcess()">是</div>
          <div class="model-btn-items model-grdeen" @click="allShowModel(5)">否</div>
        </div>
      </div>
    </div>
    <!-- 强制下线校区管理员弹框 -->
    <div class="showModel" @click="allShowModel(10)" v-if="outOnline"></div>
    <div class="modelspec" v-if="outOnline">
      <div class="model-text">
        <div class="model-text-items">
          <div>
            <img
              src="../assets/img/del@2x.png"
              alt
              @click="allShowModel(10)"
              class="model-text-items-close"
            />
          </div>
          <div>是否要将{{TeacherName}}老师强制下线？</div>
        </div>
        <div class="model-btn">
          <div class="model-btn-items main-gay" @click="OutLineTeacherAcess()">是</div>
          <div class="model-btn-items model-grdeen" @click="allShowModel(10)">否</div>
        </div>
      </div>
    </div>
    <!-- 封号校区管理员弹框 -->
    <div class="showModel" @click="allShowModel(6)" v-if="closeID"></div>
    <div class="modelspec" v-if="closeID">
      <div class="model-text">
        <div class="model-text-items">
          <div>
            <img
              src="../assets/img/del@2x.png"
              alt
              @click="allShowModel(6)"
              class="model-text-items-close"
            />
          </div>
          <div>是否要对{{TeacherName}}老师进行封号？</div>
        </div>
        <div class="model-btn">
          <div class="model-btn-items main-gay" @click="CloseTeacherId()">是</div>
          <div class="model-btn-items model-grdeen" @click="allShowModel(6)">否</div>
        </div>
      </div>
    </div>
    <!-- 解封校区管理员弹框 -->
    <div class="showModel" @click="allShowModel(7)" v-if="OpenID"></div>
    <div class="modelspec" v-if="OpenID">
      <div class="model-text">
        <div class="model-text-items">
          <div>
            <img
              src="../assets/img/del@2x.png"
              alt
              @click="allShowModel(7)"
              class="model-text-items-close"
            />
          </div>
          <div>是否要对{{TeacherName}}老师进行解封？</div>
        </div>
        <div class="model-btn">
          <div class="model-btn-items main-gay" @click="OPenTeacherId()">是</div>
          <div class="model-btn-items model-grdeen" @click="allShowModel(7)">否</div>
        </div>
      </div>
    </div>
    <!--可分配小组管理员列表弹框-->
    <div class="showModel" @click="allShowModel(8)" v-if="AllotManagerModel"></div>
    <div class="model" style="width:45%;top:5%;" v-if="AllotManagerModel">
      <div class="model-text">
        <div class="model-manager">
          <div>可分配小组</div>
          <div>
            <img src="../assets/img/del@2x.png" alt @click="allShowModel(8)" />
          </div>
        </div>
        <div class="allocation-items" v-for="(v, k) in getAllotManagerList.list" :key="k">
          <div class="model-items-left">
            <div class="model-items-left-top">
              <div>
                <img
                  :src="BASE_URL + v.imgUrl"
                  v-if="v.imgUrl"
                  alt
                  class="model-items-left-top-img"
                />
                <img
                  src="../assets/img/attt.png"
                  v-if="!v.imgUrl"
                  alt
                  class="model-items-left-top-img"
                />
                <div style="display: inline-block;text-align: left;">
                  <div class="teach-style-name">{{v.name}}</div>
                  <div class="model-items-left-top-number">老师数量：{{v.teacherCount}}</div>
                </div>
              </div>
              <div>
                <el-button v-show="v.type && v.type === 1" disabled type="info">已分配</el-button>
                <el-button
                  v-show="!v.type || v.type !== 1"
                  @click="GOAllotTeacherToManager(v,k)"
                  type="success"
                >分配</el-button>
              </div>
            </div>
          </div>
        </div>
        <el-pagination
          background
          @size-change="handleSizeChange5"
          @current-change="pageChange5"
          :page-sizes="[10]"
          layout="total, prev, pager, next"
          :total="parseInt(getAllotManagerList.pages)"
          :hide-on-single-page="true"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";
import { IMG_BASE_URL } from "@/config";
export default {
  components: {},
  name: "actvResolveLabel",
  props: {},
  data() {
    return {
      BASE_URL: IMG_BASE_URL,
      hiddenModel: false,
      OpenID: false, //解封校区管理员弹框
      closeID: false, //封号校区管理员弹框
      rePush: false, //升级校区管理员弹框
      ModelAppor: false, //批改老师详情信息弹框
      AllotManagerModel: false, //可分配小组管理员列表弹框
      outOnline: false, //强制下线校区管理员弹框
      TeacherIdStatus: "",
      teacherRoles: "",
      arrGrade: [],
      inputValueAllot: "",
      Activeindex: "",
      TeacherType: 8,
      managerId: "",
      filters: {
        inputValue: "",
        pageNo: 1,
        pageSize: 10
      },
      homeworkLIst: {
        pageNo: 1,
        pageSize: 10,
        teacherId: ""
      },
      allotList: {
        pageNo: 1,
        pageSize: 10,
        homeworkId: "",
        Allotgarde: "",
        Allotsubjct: ""
      }
    };
  },
  created() {},
  watch: {
    BeforetoTeacherstatues(val, oldVal) {
      //普通的watch监听
      // 查看老师批改作业列表
      //   this.$store.dispatch("TeacherHomeworkList", {
      //     teacherId: this.homeworkLIst.teacherId,
      //     maxCreateTime: this.filters.MaxtimeValue,
      //     pageNo: this.homeworkLIst.pageNo,
      //     pageSize: this.homeworkLIst.pageSize
      //   });
     this.UnallotHomework();
    },
        InfoTeacherstatues(val, oldVal) {
      //普通的watch监听
      this.pesiorFun();
    },
  },
  computed: {
    ...mapGetters([
      "BeforetoTeacherstatues",
      "TeacherAllotList",
      "GetTeacherDetail",
      "getAllotManagerList",
      "StudentHomeworkNoFeedbackList",
       "InfoTeacherstatues",
    ])
  },
  methods: {
    ...mapActions(["setUser"]),
    isShow(str, res) {
      let _this = this;
      if (str == 1) {
        _this.hiddenModel = true;
        _this.SearchTeacherAllot(res);
      } else if (str == 2) {
        _this.ModelAppor = true;
        this.GetTeacherInfo();
      } else if (str == 2) {
        _this.isPigai = true;
        this.homeworkLIst.pageNo = 1;
        this.UnallotHomework();
      } else if (str == 3) {
        this.TeacherIds = res.teacherId;
        _this.ModelAppor = true;
        this.GetTeacherInfo();
      } else if (str == 4) {
        _this.ModelStudet = true;
        this.GetStudentInfo();
      } else if (str == 5) {
        _this.rePush = true;
        _this.ModelAppor = false;
      } else if (str == 6) {
        _this.closeID = true;
        _this.ModelAppor = false;
      } else if (str == 7) {
        _this.OpenID = true;
        _this.ModelAppor = false;
      } else if (str == 8) {
        _this.AllotManagerModel = true;
        _this.ModelAppor = false;
        this.GetAllotManagerInfo();
      } else if (str == 9) {
        // this.allNoapprovalList.Allotgarde = v.grade;
        // this.allNoapprovalList.Allotsubjct = v.subject;
        // this.allNoapprovalList.homeworkId = v.homeworkId;
        // this.allNoapprovalList.teacherId = v.teacherId;
        _this.NoAllotManagerModel = true;
        _this.isPigai = false;
        this.AllinputValueAllot = "";
        this.NoapporvalTeacherAllot();
        // this.GetAllotManagerInfo()
      } else if (str == 10) {
        _this.isPigai = true;
        this.homeworkLIst.pageNo = 1;
        this.unmatchHomework();
      } else if (str == 11) {
        _this.outOnline = true;
        _this.ModelAppor = false;
      }
    },
    //关闭弹框
    allShowModel(str) {
      let _this = this;
      if (str == 1) {
        _this.hiddenModel = false;
      } else if (str == 2) {
        _this.ModelAppor = false;
      }
    },
      async pesiorFun() {
      var arr = this.GetTeacherDetail.grade.split(",");
      this.arrPeriod = this.GetTeacherDetail.period.split(",");
      var arrList = [];
      for (var i in arr) {
        if (arr[i] == "一年级" || arr[i] == "二年级") {
          arrList.push("1-2年级");
        } else if (arr[i] == "三年级" || arr[i] == "四年级") {
          arrList.push("3-4年级");
        } else if (arr[i] == "五年级" || arr[i] == "六年级") {
          arrList.push("5-6年级");
        }
      }
      this.arrGrade = this.uniq(arrList) || [];
    },
    // 查看学生作业原图详情
    GetStudentHomeworkDetail(v) {
      // debugger
      this.$store.dispatch("GetStudentHomeworkDetail", {
        teacherId: v.teacherId,
        homeworkId:v.homeworkId,
         type: this.TeacherType
      });
        this.$router.push({
        path: "/Super/HomeWorkPictrue"
      });
    },
    // 查看老师详情信息
    async GetTeacherInfo() {
      this.$store.dispatch("GetTeacherDetail", {
        teacherId:this.TeacherIds
      });
    },
    // 封号
    async CloseTeacherId() {
      this.closeID = false;
      this.$store.dispatch("CloseIdTeacher", {
        teacherId: this.TeacherIds,
        operate: 2,
        type: this.TeacherIdType
      });
    },
    //强制下线
    async OutLineTeacherAcess() {
      this.outOnline = false;
      this.$store.dispatch("RepushTeacher", {
        teacherId: this.TeacherIds,
        operate: 4,
        type: this.TeacherIdType
      });
    },
    // 升级
    async RepushTeacherAcess() {
      this.rePush = false;
      this.$store.dispatch("RepushTeacher", {
        teacherId: this.TeacherIds,
        operate: 1,
        type: this.TeacherIdType
      });
    },
    // 解封
    async OPenTeacherId() {
      this.OpenID = false;
      this.$store.dispatch("OpenIdTeacher", {
        teacherId: this.TeacherIds,
        operate: 3,
        type: this.TeacherIdType
      });
    },
    // 手动批改
    handApor() {
      this.Activeindex = false;
      this.TeacherType = 8;
      this.filters.inputValue = "";
      this.UnallotHomework();
    },
    // 匹配知识点老师
    AutoApor() {
      this.Activeindex = true;
      this.TeacherType = 13;
      this.filters.inputValue = "";
      this.UnallotHomework();
    },
    // 未匹配/未批改作业列表列表
    async UnallotHomework() {
      this.$store.dispatch("GetStudentHomeworkNoFeedbackList", {
        maxCreateTime: this.formatDate(),
        pageNo: this.filters.pageNo,
        pageSize: this.filters.pageSize,
        managerId: this.managerId,
        value: this.filters.inputValue,
        type: this.TeacherType
      });
    },
    // 搜索可分配老师列表
    async SearchvalueTeacherAllot() {
      this.$store.dispatch("TeacherAllotList", {
        grade: this.allotList.Allotgarde,
        subject: this.allotList.Allotsubjct,
        homeworkId: this.allotList.homeworkId,
        originTeacherId: this.homeworkLIst.teacherId,
        maxCreateTime: this.formatDate(),
        pageNo: this.allotList.pageNo,
        pageSize: this.allotList.pageSize,
        name: this.inputValueAllot,
        type: this.TeacherType
      });
    },
    // 可分配老师列表
    async SearchTeacherAllot(v) {
      this.homeworkLIst.teacherId = v.teacherId;
      this.allotList.homeworkId = v.homeworkId;
      this.allotList.Allotgarde = v.grade;
      this.allotList.Allotsubjct = v.subject;
      this.$store.dispatch("TeacherAllotList", {
        grade: v.grade,
        subject: v.subject,
        homeworkId: v.homeworkId,
        originTeacherId: v.teacherId,
        maxCreateTime: this.formatDate(),
        pageNo: this.allotList.pageNo,
        pageSize: this.allotList.pageSize,
        name: this.inputValueAllot,
        type: this.TeacherType
      });
    },
    // 分配老师
    async GOtoTeacherAllot(v, k) {
      this.$store.dispatch("toTeacherAllot", {
        teacherId: v.teacherId,
        homeworkId: this.allotList.homeworkId,
        originTeacherId: this.homeworkLIst.teacherId,
        type: this.TeacherType
      });
      v.type = 1;
      this.$set(this.TeacherAllotList.list, k, v);
      this.hiddenModel = false;
    },
    //时间封装
    formatDate: function() {
      let date = new Date();
      let y = date.getFullYear();
      let MM = date.getMonth() + 1;
      MM = MM < 10 ? "0" + MM : MM;
      let d = date.getDate();
      d = d < 10 ? "0" + d : d;
      let h = date.getHours();
      h = h < 10 ? "0" + h : h;
      let m = date.getMinutes();
      m = m < 10 ? "0" + m : m;
      let s = date.getSeconds();
      s = s < 10 ? "0" + s : s;
      return y + "-" + MM + "-" + d + " " + h + ":" + m + ":" + s;
    },
    // 表格头部样式
    tableheaderClassName({ row, rowIndex }) {
      return "table-head-th";
    },
    cellStyle: function(row, column, rowIndex, columnIndex) {
      console.log(row);
      if (row.column.label === "小组管理员") {
        return "font-size:30px";
      } else {
        return "";
      }
    },
    // 分页
    pageChange(val) {
      this.filters.pageNo = val;
      this.UnallotHomework();
    },
    handleSizeChange(val) {
      this.filters.pageSize = val;
      this.UnallotHomework();
    },
    handleSizeChange4(val) {
      this.allotList.pageSize = val;
      this.SearchvalueTeacherAllot();
    },
    pageChange4(val) {
      this.allotList.pageNo = val;
      this.SearchvalueTeacherAllot();
    }
  },
  mounted() {
    this.UnallotHomework();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main {
  background-color: #fff;
  margin-top: 16px;
  padding: 0 !important;
  border: 1px solid #e1e1e1;
  min-height: 980px;
}
el-table {
  color: #999999;
  font-size: 18px;
}
.aside {
  background-color: #fff;
  margin-top: 16px;
  margin-right: 16px;
  padding: 0;
  min-height: 880px;
}
.main-items {
  color: #393939;
  /*text-align: center;*/
  line-height: 80px;
}
.main-header {
  position: relative;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #52cc60 !important;
  color: #fff;
}
.table-img {
  width: 36px;
  height: 36px;
  border-radius: 6px;
}
.active {
  background-color: #52cc60;
  color: #fff !important;
}
.ApporStyles {
  display: inline-block;
  width: 200px;
  height: 40px;
  line-height: 40px;
  background-color: #fff;
  border-radius: 20px;
  font-size: 16px;
  color: #7c819d;
  cursor: pointer;
  text-align: center;
}
.Apporvalactive {
  background-color: #52cc60 !important;
  color: #fff !important;
}
.scope-name {
  margin-left: 5%;
  color: #393939;
  font-size: 13px;
}
.grade-name {
  color: #393939;
  font-size: 16px;
  margin: 0 10px;
}

.scope-list {
  margin-left: 5%;
  text-align: left;
}
.miniorinput-with-Allot {
  border: #b6b6b6;
  border-radius: 5px;
  height: 40px;
  width: 280px;
  font-size: 8px;
  color: #b6b6b6;
  text-align: left;
  line-height: 40px;
  background: #f1f2f4;
  padding: 0 10px;
  float: left;
  outline: none !important;
  box-shadow: none;
}
.miniorteach-Allot {
  float: right;
  width: 280px;
  position: relative;
  height: 40px;
  top: 15px;
}
.miinorSeachIcon {
  position: absolute;
  font-size: 20px;
  color: #b6b6b6;
  right: 5%;
  margin-top: 12px;
  cursor: pointer;
}
.noBorderBottom {
  border-bottom: none;
}
.el-table .table-head-th {
  background-color: #f6f7fb;
  font-size: 16px !important;
  color: #393939;
}
.closeTeacherID {
  margin-right: 50px;
  display: inline-block;
  height: 40px;
  width: 100px;
  color: #f56c6c;
  background: #fef0f0;
  border-color: #fbc4c4;
  border-radius: 20px;
  font-size: 14px;
  line-height: 40px;
  cursor: pointer;
  border: 1px solid;
}
.model-items-first {
  padding: 0 34px;
  display: flex;
  justify-content: space-between;
}
.closeTeacherID:hover {
  color: #fff;
  background-color: #f56c6c;
  border-color: #f56c6c;
}
.UpTeacherTeam {
  margin-right: 10px;
  display: inline-block;
  height: 40px;
  width: 120px;
  color: #67c23a;
  background: #f0f9eb;
  border-color: #c2e7b0;
  float: left !important;
  /* border-radius: 20px; */
  font-size: 14px;
  line-height: 40px;
  cursor: pointer;
  border: 1px solid;
  text-align: center;
}
.UpTeacherTeam:hover {
  color: #fff;
  background-color: #67c23a;
  border-color: #67c23a;
}
.UpTeacherID {
  display: inline-block;
  height: 40px;
  width: 100px;
  color: #67c23a;
  background: #f0f9eb;
  border-color: #c2e7b0;
  border-radius: 20px;
  font-size: 14px;
  line-height: 40px;
  cursor: pointer;
  border: 1px solid;
}
.UpTeacherID:hover {
  color: #fff;
  background-color: #67c23a;
  border-color: #67c23a;
}
.el-pagination {
  margin-top: 30px;
  white-space: nowrap;
  padding: 2px 5px;
  color: #303133;
  font-weight: 700;
  text-align: center;
}
.UpTeacherIDiNfo {
  float: left !important;
  display: inline-block;
  height: 40px;
  width: 150px;
  color: #fff;
  background-color: #67c23a;
  border-color: #67c23a;
  /* border-radius: 20px; */
  font-size: 14px;
  line-height: 40px;
  cursor: pointer;
  border: 1px solid;
  text-align: center;
}
.UpTeacherIDiNfo:hover {
  color: #67c23a;
  background: #f0f9eb;
  border-color: #c2e7b0;
}
.buttonAppoval {
  display: inline-block;
}
.TeacherApporTime {
  text-align: center;
  display: inline-block;
  height: 30px;
  width: 60px;
  color: #706f6f;
  background: #b6b6b6;
  border-color: #929492;
  border-radius: 20px;
  font-size: 14px;
  line-height: 30px;
  cursor: pointer;
  margin: 0 5px;
}
.bank-active {
  cursor: pointer;
}
.TeacherApporTime:hover {
  color: #fff;
  background-color: #909399;
  border-color: #909399;
}
.showModel {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #000000;
  opacity: 0.2;
  overflow: hidden;
  z-index: 1000;
  color: #fff;
}
.model {
  z-index: 10000;
  width: 60%;
  height: auto;
  position: fixed;
  top: 15%;
  left: 30%;
  margin: auto;
  background: #fff;
  border-radius: 10px;
  text-align: center;
  min-width: 450px !important;
  padding: 20px;
}
.model-text {
  background: rgba(255, 255, 255, 1);
  border-radius: 10px;
}
.model-text-head {
  padding: 0 !important;
  display: flex;
  color: #393939;
  font-size: 24px;
  justify-content: space-between;
}
.model-items-left-top-number {
  color: #7e7e7e;
  font-size: 18px;
  margin-left: 10px;
}
.model-items-left {
  width: 100%;
  color: #393939;
  font-size: 24px;
}
.model-items-left-top {
  display: flex;
  justify-content: space-between;
}
.model-itemss {
  padding: 10px 0;
  float: left;
  /*display: flex;*/
  /*justify-content: space-between;*/
  /*display: inline-block;*/
  width: 40%;
  display: inline-block;
}
.model-items-left-top-img {
  width: 68px;
  height: 68px;
  border-radius: 8px;
  position: relative;
  bottom: 25px;
}
.teach-style {
  display: inline-block;
  text-align: left;
}
.teach-style-name {
  font-size: 24px;
  margin-left: 10px;
  height: 50px;
}
.btnClass {
  height: 50px;
  margin: 20px;
}
.teach-Allot {
  width: 350px;
  position: relative;
}
.SeachIcon {
  position: absolute;
  font-size: 16px;
  color: #b6b6b6;
  right: 25%;
  top: 35%;
  cursor: pointer;
}
.model-items-first-img {
  width: 68px;
  height: 68px;
  border-radius: 8px;
  position: relative;
  bottom: 20px;
}
.input-with-Allot {
  margin-top: 20px;
  border: #b6b6b6;
  border-radius: 15px;
  height: 30px;
  width: 280px;
  font-size: 8px;
  color: #b6b6b6;
  text-align: left;
  line-height: 30px;
  background: #f1f2f4;
  padding: 0 10px;
  float: left;
  outline: none !important;
  box-shadow: none;
}
.model-manager {
  display: flex;
  justify-content: space-between;
  margin: 30px;
  color: #393939;
  font-size: 24px;
}
.Onlinename {
  display: inline-block;
}
.model-items-first-left-down {
  color: #7e7e7e;
  font-size: 18px;
}
.closeAnOpenId {
  width: 250px;
}
.model-items-other {
  height: 60px;
  line-height: 60px;
  color: #393939;
  font-size: 20px;
  text-align: left;
  padding: 0 34px;
}
.model-active {
  background-color: #f6f7fb;
}
.model-active-last {
  border-radius: 0 0 30px 30px;
  background-color: #f6f7fb;
}
</style>
