
<script lang="ts">
// 班级管理
export default {
  name: 'schoolClass' // 班级
};
</script>
<script setup lang="ts">
import { onMounted, reactive, ref, nextTick } from "vue";
import { ElMessage, ElMessageBox, FormRules } from "element-plus";
import { queryRegion } from "@/api/regionmodule/region";
import { querySchoolList } from "@/api/regionmodule/school";
import { querySchoolClassList, addSchoolClass,updateSchoolClass,delSchoolClass } from "@/api/regionmodule/schoolClass";
import { querySchoolGradeList } from "@/api/regionmodule/schoolGrade"
import { querySchoolTeacherList } from "@/api/regionmodule/schoolTeacher";
import SchoolClass from "./schoolStudent.vue"
import { publicTree } from '@/utils/validate';
import { getToken } from '@/utils/auth'
import { useUserStore } from '@/store/modules/user';
const userStore = useUserStore();
const url = userStore.webApiBaseUrl;
const upload:any = ref(null)

function handlePreview(){
  loading.value = true
}
function handleSuccess(file: any) {
  loading.value = false
  ElMessage({
    message: "导入成功！",
    type: "success",
  });
  getData()
  upload.value.clearFiles()
}
function handleError(file: any){
  loading.value = false
  ElMessage({
    message: "导入失败！",
    type: "error",
  });
  upload.value.clearFiles()
}
const isHide =ref(false)
function hideClick(item:any){
  // info.value = JSON.parse(JSON.stringify(item))
  classInfo.value= {
    school_id:schoolId.value,
    school_name:schoolName.value,
    grade_id: gradeId.value, //年级ID
    grade_code: gradeCode.value,//年级名称
    grade_name: gradeName.value,//年级名称
    class_id:item.id,
    class_code:item.code,
    class_name:item.name,
    class_order:item.class_order
  }
  isHide.value = true
}
const gradeData:any = ref([])
const gradeName:any = ref("")
const gradeCode:any = ref("")

function getGradeList(){
  let params = {
    schoolId: schoolId.value,
  };
  loading.value = true
  querySchoolGradeList(params).then((res:any) => {
    gradeId.value = ""
    gradeName.value = ""
    gradeCode.value = ""
    gradeData.value = res.data;
    if(res.data.length >0){
      gradeId.value = res.data[0].id 
      gradeName.value = res.data[0].name 
      gradeCode.value = res.data[0].code 
    }
    getData()
  });
}

const props1 = {
  checkStrictly: true,
  value:'id',
  label:'name'
}
//树形控件类型定义
interface Tree {
  [x: string]: any;
  label: string;
  children?: Tree[];
}
//搜索内容
const querystr = ref("");
// 左侧树
const cascaderdata: any = ref([]);
const cascaderList:any = ref([]);
const defaultProps = { label: "name" };
const handleNodeClick = (data: Tree) => {
  schoolId.value = data.id;
  schoolName.value = data.name;
  getSchoolTeacher(data.id)
  getGradeList();
};
const infoForm = ref();
const treeRef = ref();
// 表格数组类型定义
const tableData:any = ref([]);
const loading = ref(false);
const treeloading = ref(false);
//新建班级数组
const info:any = ref({
  grade_id: "", //学校id
  code: "", // 班级代码
  name: "", // 班级名称
  grade_type:"",
  org_type:"",
  teacher_id:"",
  teacher_name:""
});
const title = ref("");
const dialogVisible = ref(false);
const regionId =ref(""); //行政区域名称
const regionType =ref("");
//获取行政区域
function getTree() {
  const params = {
    name: "",
    status:'01'
  };
  queryRegion(params).then((res: any) => {
    cascaderList.value = JSON.parse(JSON.stringify(res.data))
    cascaderdata.value = publicTree(res.data,"");
  })
  .catch((error:any)=>{
    treeloading.value = false
  })
}
const treeData:any = ref([])
function getData(){
  querystr.value = querystr.value.replace(/\s+/g, "");
  if(gradeId.value == ''){
    tableData.value = []
    loading.value = false
    return
  }
  let params = {
    name: querystr.value,
    gradeId: gradeId.value,
  };
  loading.value = true
  querySchoolClassList(params).then((res) => {
    tableData.value = res.data;
    loading.value = false
  }).catch(()=>{
    loading.value = false
  });
}
const schoolId:any = ref("")
const schoolName:any = ref("")
//获取班级列表
function getTreeData() {
  if(regionId.value == ''){
    treeData.value = []
    return
  }
  querystr.value = querystr.value.replace(/\s+/g, "");
  let params = {
    name: "",
    regionId: regionId.value,
    type:regionType.value
  };
  treeloading.value = true
  querySchoolList(params).then((res) => {
    treeData.value = res.data;
    treeloading.value = false
    schoolId.value = ""
    schoolName.value = ""
    if (schoolId.value == "" &&cascaderdata.value.length != 0) {
      schoolId.value = res.data[0].id;
      schoolName.value = res.data[0].name;
      getSchoolTeacher(schoolId.value)
    }
    nextTick(() => {
      treeRef.value?.setCurrentKey(schoolId.value);
    });
    getGradeList();
  }).catch(()=>{
    treeloading.value = false
  });
}
// 选中区域获取班级列表
function handleChange(value:any){
  isCascader.value = false
  setTimeout(()=>{
    isCascader.value = true
  },20)
  if(value.length != 0){
    regionId.value = value[value.length -1]
    for(let i=0;i<cascaderList.value.length;i++){
      if(regionId.value == cascaderList.value[i].id){
        regionType.value = cascaderList.value[i].type
        break
      }
    } 
  }
  getTreeData()
}
function cascaderClick(data:any){
  if(data.children == null){
    isCascader.value = false
    setTimeout(()=>{
      isCascader.value = true
    },20)
  }
  regionId.value = data.id
  regionType.value = data.type
  getTreeData()
}
const multipleSelection = ref([]);
//定义班级填写规则
const moderules = reactive<FormRules>({
  code: [{ required: true, message: "请输入班级代码", trigger: "blur" }],
  name: [{ required: true, message: "请输入班级名称", trigger: "blur" }],
  class_order: [{ required: true, message: "请输入班级序号", trigger: "blur" }],
  class_type: [{ required: true, message: "请输入班级类型", trigger: "change" }],
  teacher_id: [{ required: true, message: "请选择班主任", trigger: "change" }],
});
const isSwitch = ref(false) // 提交开关
//新建班级-保存/修改
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,
          gradeId: info.value.grade_id, //所在年级
          code: info.value.code, // 班级代码
          name: info.value.name, // 班级名称
          classOrder:info.value.class_order,
          classType:info.value.class_type,
          orgType:'7',
          teacherId:info.value.teacher_id,
          teacherName:info.value.teacher_name
        };
        if(info.value.gender == '' || info.value.gende==null){
          data.gender = '0'
        }
        updateSchoolClass(data).then((item) => {
          if (infoForm.value != null) infoForm.value.resetFields();
          dialogVisible.value = false;
          ElMessage({
            message: "修改成功",
            type: "success",
          });
          getData();
        }).catch(()=>{
          isSwitch.value = false
        })
      } else {
        const data:any = {
          gradeId: info.value.grade_id, //学校ID
          code: info.value.code, // 班级代码
          name: info.value.name, // 班级名称
          classOrder:info.value.class_order,
          classType:info.value.class_type,
          orgType:'7',
          teacherId:info.value.teacher_id,
          teacherName:info.value.teacher_name
        };
        if(info.value.gender == '' || info.value.gende==null){
          data.gender = '0'
        }
        addSchoolClass(data).then((item) => {
          if (infoForm.value != null) infoForm.value.resetFields();
          dialogVisible.value = false;
          getData();
          ElMessage({
            message: "新增成功",
            type: "success",
          });
        }).catch(()=>{
          isSwitch.value = false
        })
      }
     
    }
  })
}
//关闭弹窗
function handleClose() {
  if (infoForm.value != null) infoForm.value.resetFields();
  dialogVisible.value = false;
}


//新建班级
function addClick() {
  isSwitch.value = false
  const infoagin = ref({
    id: null,
    grade_id: gradeId.value, //区域ID （班级所在城市
    code: "", // 班级代码
    name: "", // 班级名称
    class_order:"",
    class_type:"",
    org_type:"7",
    teacher_id:"",
    teacher_name:""

  });
  info.value = infoagin.value;
  title.value = "新增班级";
  dialogVisible.value = true;
}
//修改班级
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,
    };
    delSchoolClass(params).then((res:any) => {
      if(res.code=="0"){
        getData();
        ElMessage({
          message: "删除成功",
          type: "success",
        });
      }else{
        ElMessage({
          message: res.msg,
          type: "error",
        });
      }
    });
  });
}
onMounted(() => {
  getTree();
});
const vMove = {
  mounted(el: any) {
    el.onmousedown = function (e: any) {
      var init = e.clientX;
      var parent: any = document.getElementById("silderLeft");
      const initWidth: any = parent.offsetWidth;
      document.onmousemove = function (e) {
        var end = e.clientX;
        var newWidth = end - init + initWidth;
        parent.style.width = newWidth + "px";
      };
      document.onmouseup = function () {
        document.onmousemove = document.onmouseup = null;
      };
    };
  }
}
const gradeId = ref("")
function handleClick(e:any){
  
  gradeId.value = e.props.name
  for( let i=0;i<gradeData.value.length; i++){
    if(e.props.name == gradeData.value[i].id){
      gradeName.value = gradeData.value[i].name
      gradeCode.value =  gradeData.value[i].code
    }
  }
  getData()
}
function publicDict(list: any, itemcode: any) {
    let dictname = ''
    list.forEach((element: any) => {
        if (element.itemcode == itemcode) {
            dictname = element.dictname
        }
    })
    return dictname
}

const classTypeList:any = ref([{
  itemcode:"1",
  dictname:"普通小学班"
},{
  itemcode:"2",
  dictname:"少数民族小学班"
},{
  itemcode:"3",
  dictname:"小学复式班"
},{
  itemcode:"4",
  dictname:"小学教学点班"
},{
  itemcode:"5",
  dictname:"小学特长班（文体艺智）"
},{
  itemcode:"6",
  dictname:"小学视力残疾班"
},{
  itemcode:"7",
  dictname:"小学听力残疾班"
},{
  itemcode:"8",
  dictname:"小学智力残疾班"
},{
  itemcode:"9",
  dictname:"普通初中班"
},{
  itemcode:"10",
  dictname:"少数民族初中班"
},{
  itemcode:"11",
  dictname:"初中复式班"
},{
  itemcode:"12",
  dictname:"初中教学点班"
},{
  itemcode:"13",
  dictname:"初中特长班（文体艺智）"
},{
  itemcode:"14",
  dictname:"初中视力残疾班"
},{
  itemcode:"15",
  dictname:"初中听力残疾班"
},{
  itemcode:"16",
  dictname:"初中智力残疾班"
},{
  itemcode:"17",
  dictname:"普通高中班"
},{
  itemcode:"18",
  dictname:"少数名族高中班"
},{
  itemcode:"19",
  dictname:"高中复式班"
},{
  itemcode:"20",
  dictname:"高中教学点班"
},{
  itemcode:"21",
  dictname:"高中特长班（文体艺智）"
},{
  itemcode:"22",
  dictname:"高中残疾班"
}])

const schoolTeacherData:any = ref([])
function getSchoolTeacher(schoolId:any){
  let params ={
    name:'',
    schoolId:schoolId
  }
  querySchoolTeacherList(params).then((res) => {
    schoolTeacherData.value = res.data;
  
  });
}

function teacherChange(e:any){
  for(let i=0;i<schoolTeacherData.value.length;i++){
    if(schoolTeacherData.value[i].id == e){
      info.value.teacher_name = schoolTeacherData.value[i].name
    }
  }
}
function returnClick(e:any){
  isHide.value = false
}
const classInfo:any= ref({
  school_id: "",
  school_name: "",
  grade_id: "", //年级ID
  grade_name: "",//年级名称
  class_id: "",
  class_name: "",
  class_order: ""
})
const isCascader=ref(true)
</script>

<template>
  <div class="faulttemplate-box">
    <aside id="silderLeft" v-show="isHide == false">
      <div class="lefttitle">
        <div class="line"></div>
        <div class="treetitle">学校列表</div>
      </div>
      <div style="width:100% ;display: flex;">
        <el-cascader v-if="isCascader" style="width: 90%; margin: auto;" placeholder="请输入行政区域" v-model="regionId" @change="handleChange" :options="cascaderdata" :props="props1" :show-all-levels="false" filterable>
          <template #default="{ node, data }">
            <div @click.stop="cascaderClick(data)">{{ data.name }}</div>
          </template>
        </el-cascader>
      </div>
      <el-tree v-loading="treeloading"
        ref="treeRef" node-key="id" :data="treeData" :highlight-current="true" :props="defaultProps"
        :expand-on-click-node="false"
        @node-click="handleNodeClick" style="height: calc(100vh - 245px); overflow: auto;margin-top: 10px;">
      </el-tree>
      
      <div class="moveBtn" v-move>
        <div class="moveBtn-line" v-move></div>
      </div>
    </aside>
    <main class="silderRight" v-show="isHide == false">
      <el-tabs v-model="gradeId" class="demo-tabs tstab" @tab-click="handleClick" style="width:calc(100% - 20px);margin-left: 5px;">
        <el-tab-pane v-for="item in gradeData" :label="item.name" :name="item.id"></el-tab-pane>
      </el-tabs>
      <el-row style="margin-bottom: 10px;width:calc(100% - 20px);margin-left: 5px;">
        <el-col :span="24" class="top-nav">
          <div>
            <el-input v-model="querystr" placeholder="请输入班级名称" clearable style="width: 200px;"
              @keyup.enter="getData" />
            <el-button type="primary" style="margin-left: 10px;" @click="getData">搜索</el-button>
          </div>
          <div class="left-nav">
            <el-button :disabled="regionId==''" type="primary" @click="addClick"><img style="margin-right:5px;" src="@/assets/MenuIcon/jscz_xz.png" alt=""> 新增</el-button>
          </div>
        </el-col>
      </el-row>
      <div class="schoolClassUi" v-loading="loading">
        <div class="schoolClassLis" v-for="item in tableData" :key="item.id">
          <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;margin-bottom: 20px;">
            <div class="classicon"><svg t="1710840701610" class="icon" viewBox="0 0 1199 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4876" width="32" height="32"><path d="M721.808902 217.684596v-0.239565a38.51005 38.51005 0 0 0 38.549977-38.809506v-139.746164A38.490086 38.490086 0 0 0 721.868793 0.279492 38.929289 38.929289 0 0 0 682.759831 39.088998v139.746165a38.969216 38.969216 0 0 0 11.459185 27.470103 38.490086 38.490086 0 0 0 27.549958 11.359367z m-481.325717 0a38.929289 38.929289 0 0 0 39.108962-38.809506v-139.746164a39.108962 39.108962 0 0 0-78.217924 0v139.746164a38.929289 38.929289 0 0 0 39.108962 38.809506z" p-id="4877" fill="#ff9900"></path><path d="M962.531651 155.577408a62.027333 62.027333 0 0 0-61.887587-62.167079h-77.698867v69.873082a101.086386 101.086386 0 1 1-202.172772 0v-69.873082H341.559589v69.873082a101.086386 101.086386 0 1 1-202.172772 0v-69.873082H61.787768A61.887587 61.887587 0 0 0 0 151.005712v200.994912h962.531651V155.577408z" p-id="4878" fill="#ff9900"></path><path d="M962.531651 352.000624h0.918332v14.713275h-0.918332z" fill="#ff9900" p-id="4879"></path><path d="M0 366.713899v538.721463a61.887587 61.887587 0 0 0 61.787768 57.515528H707.714503a307.022323 307.022323 0 0 1 241.561227-496.398339c4.392022 0 8.764081 0.119782 13.096212 0.299456v-100.138108z m289.59398 200.735383q-1.577135 23.357573-4.691479 70.13261-3.154271 62.366717-4.691478 91.933013a310.296376 310.296376 0 0 0-31.203322-1.537208q6.208722-71.649855 9.323065-162.125514l31.263214 1.597099zM121.259743 796.553136a356.831848 356.831848 0 0 0 46.775038-6.24865V682.759831H129.005673v-37.392081h38.98918v-85.704326H125.931258v-38.98918h124.693506v38.98918h-43.640731v85.704326h34.297701v37.372117h-34.297701v102.933032c5.190572-1.058078 12.477336-2.096192 21.820365-3.09438a127.987523 127.987523 0 0 1 21.820366-3.094379q0 20.303121 1.537207 38.98918-48.292282 3.154271-124.693506 17.108923L121.259743 796.553136z m126.270641 46.73511q35.934728-38.929289 46.775038-79.515567 12.417445-38.929289 12.477336-112.196207v-151.165422h38.98918v152.742558q3.154271 143.379564-63.883961 215.08931a383.643148 383.643148 0 0 0-34.357593-24.954672z m252.521319 3.154271h-154.339657v-34.237811h59.252374v-116.907648h-45.23783v-37.392081h45.23783v-99.818688h-45.23783v-37.352154h130.862301v37.372117h-46.715146v99.818689h43.620767v37.372117h-43.620767v116.907648h56.098103v34.277738z" p-id="4880" fill="#ff9900"></path><path d="M1159.573743 825.04139h-26.511844a190.194529 190.194529 0 0 1-18.406566 44.199715l24.475543 24.535434a40.127113 40.127113 0 0 1 0 56.77687l-14.214182 14.214181a40.127113 40.127113 0 0 1-56.77687 0l-24.655216-24.655216a190.653695 190.653695 0 0 1-43.920223 18.10711v25.613476a40.16704 40.16704 0 0 1-40.16704 40.16704H939.293861a40.16704 40.16704 0 0 1-40.167041-40.16704v-25.753222a187.978555 187.978555 0 0 1-43.920223-18.10711l-24.655216 24.655216a40.127113 40.127113 0 0 1-56.77687 0l-14.214181-14.214181a40.127113 40.127113 0 0 1 0-56.77687l24.495506-24.535434a189.07656 189.07656 0 0 1-18.406566-44.119861h-26.551771a40.16704 40.16704 0 0 1-40.167041-40.16704v-20.063556a40.16704 40.16704 0 0 1 40.167041-40.167041h26.192424a188.437721 188.437721 0 0 1 17.78769-43.740549l-23.517283-23.617102a40.127113 40.127113 0 0 1 0-56.77687l14.15429-14.214181a40.127113 40.127113 0 0 1 56.77687 0l23.118008 23.118008a188.278011 188.278011 0 0 1 45.477395-19.025442v-26.951046a40.16704 40.16704 0 0 1 40.16704-40.16704h20.08352a40.16704 40.16704 0 0 1 40.167041 40.16704v26.931082a188.278011 188.278011 0 0 1 45.477394 19.025442l23.118009-23.118008a40.127113 40.127113 0 0 1 56.77687 0l14.214181 14.214181a40.127113 40.127113 0 0 1 0 56.77687L1115.453883 680.763457a193.468582 193.468582 0 0 1 17.78769 43.740549h26.192424a40.16704 40.16704 0 0 1 40.16704 40.167041v20.08352a40.127113 40.127113 0 0 1-40.107149 40.286823z m-209.459536-167.695397a118.1454 118.1454 0 0 0-0.618876 236.270836c65.301386 0 118.824167-52.883941 118.824167-118.1454s-53.562708-118.1454-118.884058-118.1454z m-0.738659 167.076521a50.2088 50.2088 0 1 1 50.168873-50.228764 50.228764 50.228764 0 0 1-50.168873 50.168873z" p-id="4881" fill="#ff9900"></path></svg></div>
            <div class="classtitle">{{ item.name }}</div>
          </div>
          <div style="display:flex ;align-items: center;margin-bottom: 15px;">
            <img src="@/assets/tableicon/u203.png" alt="">
            <div class="classtext">班级类型：{{ publicDict(classTypeList,item.class_type) }}</div>
          </div>
          <div style="display:flex ;align-items: center;">
            <img src="@/assets/tableicon/u197.png" alt="">
            <div class="classtext">班主任：{{ item.teacher_name }}</div>
          </div>
          <div class="classbutton" @click="hideClick(item)">查看学生</div>
        </div>
      </div>
    </main>
    <!-- 班级 弹框-->
    <el-dialog v-model="dialogVisible" :before-close="handleClose" :title="title" draggable width="620px">
      <el-form ref="infoForm" :model="info" label-width="100px" :rules="moderules">
        <el-form-item label="所在年级" prop="code">
          <el-input v-model="gradeName" 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="class_order">
          <el-input v-model.number="info.class_order" style="width: 100%" placeholder="请输入班级序号"></el-input>
        </el-form-item>
        <el-form-item label="班级类型" prop="class_type">
          <el-select v-model="info.class_type" class="!w-full" placeholder="请选择班级类型">
            <el-option v-for="(i, index) in classTypeList" :key="index" :label="i.dictname"
              :value="i.itemcode"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班级老师">
          <el-select v-model="info.teacher_id" class="!w-full" placeholder="请选择年级主任" @change="teacherChange"
            filterable>
            <el-option v-for="(i, index) in schoolTeacherData" :key="index"  :label="i.code + ' - ' +  i.name +
            ' - ' + (i.gender == '0'?'不详':'') + (i.gender == '1'?'男':'') + (i.gender == '2'?'女':'')
            "
              :value="i.id">
              <span>{{ i.code }}</span>
              <span> - </span>
              <span>{{ i.name }}</span>
              <span> - </span>
              <span v-if="i.gender == '0'">不详</span>
              <span v-if="i.gender == '1'">男</span>
              <span v-if="i.gender == '2'">女</span>
            </el-option>
          </el-select>
        </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>
    <SchoolClass v-if="isHide == true" :classInfo="classInfo" @returnClick="returnClick"/>
  </div>
</template>
<style scoped  lang="scss">
.silderLeft-default {
  :deep(.custom-tree-node, .treedelicon, .treeediticon) {
    font-size: 16px !important;
  }

  :deep(.custom-tree-large, .treedelicon, .treeediticon) {
    font-size: 14px !important;
  }
} 

.faulttemplate-box {
  height: 100%;
  display: -webkit-flex;
  display: flex;
  background-color: #f2f4f9;
}

#silderLeft {
  width: 255px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 3px;
  position: relative;
  &:hover {
    .moveBtn {
      opacity: 1;
    }
  }
}

/* 拖动条 */
.moveBtn {
  height: 100%;
  width: 15px;
  padding: 0 6px;
  opacity: 0;
  position: absolute;
  right: -15px;
  top: 0;
}

.moveBtn-line {
  width: 100%;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  background-color: #60bfff;
}

.dialog-footer {
  display: flex;
  display: -webkit-flex;
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
}

.silderRight {
  flex: 1;
  position: relative;
  width: 100%;
  height: calc(100vh - 130px);
  overflow: auto;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 3px;
  padding: 10px;
  padding-bottom: 0px;
  padding-right: 0px;
  margin-left: 15px;
  box-sizing: border-box;
}

:deep(.el-tree-node.is-current > .el-tree-node__content) {
  width: 100%;
  height: 40px;
  background-color: #409eff !important;
  color: #fff !important;
}

:deep(.el-tree-node__content) {
  width: 100%;
  height: 40px;
  line-height: 40px;
}

:deep(.el-tree-node__content:hover) {
  background-color: #409eff19;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: space-between;
  -webkit-justify-content: space-between; 
  padding-right: 8px;

}

.faulttemplate-box {
  .is-current .treeediticon {
    color: #ffffff !important;
  }

  .is-current .treedelicon {
    color: #ffffff !important;
  }

  .el-tree-node__content:hover .treeediticon {
    color: #00cccc;
  }

  .el-tree-node__content:hover .treedelicon {
    color: #f56c6c;
  }
}

.treeediticon,
.treedelicon {
  color: #fff;
  margin: 0 5px;
}
:deep(.el-table__cell){
  color: #383838;
}
.top-nav {
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}

.lefttitle {
  min-width: 130px;
  display: flex;
  align-items: center;
  padding: 10px 15px;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  color: #1B1B1B;
  border-bottom: 1px var(--el-border-color) var(--el-border-style);
  margin-bottom: 10px;
  .line{
    border-width: 0px;
    width: 5px;
    height: 14px;
    margin-right: 7px;
    background: inherit;
    background-color: rgba(64, 158, 255, 1);
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}
:deep(.el-upload--picture-card){
  --el-upload-picture-card-size: 148px;
    background-color: var(--el-fill-color-lighter);
    border: 1px dashed var(--el-border-color-darker);
    border-radius: 6px;
    box-sizing: border-box;
    width: var(--el-upload-picture-card-size);
    height: var(--el-upload-picture-card-size);
    cursor: pointer;
    vertical-align: top;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.newavatar-uploader-icon{
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  text-align: center;
}
.newavatar-uploader-text{
  width: 100%;text-align: center;line-height: 20px;
  font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    font-size: 12px;
    color: #949494;
}
.schoolClassUi{
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  height: calc(100vh - 260px);
  overflow: auto;
  padding-top: 5px;
  padding-left: 5px;
  .schoolClassLis{
    position: relative;
    width: 331px;
    height: 150px;
    padding: 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;
    margin-bottom:12px;
    margin-right:12px;
    .imgclass{
      display: none;
      position: absolute;
      top: 15px;
      right: 0;
      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{
      position: absolute;
      bottom: 20px;
      right: 20px;
      display: flex;
      align-items:center ;
      justify-content: center;
      border: 1px solid #C6E2FF;
      background: rgb(236, 245, 255);
      border-radius:4px;
      width: 80px;
      height: 32px;
      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;
    }
  }
}
:deep(.el-tabs__item){
  font-size:18px;
  font-weight: 700;
}
:deep(.el-tabs__active-bar){
  height: 3px;
}
</style>
