
<script lang="ts">
export default {
  name: 'school'
};
</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 { querySchoolPage,addSchool,updateSchool,delSchool,exportExcel,downloadStudent,downloadSchoolTemplate } from "@/api/regionmodule/school";
import { downloadFile } from '@/utils/index';
import { publicTree } from '@/utils/validate';
import { getDict } from '@/api/dict'
import { getToken } from '@/utils/auth'
import Page from '@/components/Pagination/page.vue'
import * as XLSX from 'xlsx';
import { useUserStore } from '@/store/modules/user';
const userStore = useUserStore();
const url = userStore.webApiBaseUrl;
//树形控件类型定义
interface Tree {
  [x: string]: any;
  label: string;
  children?: Tree[];
}
//搜索内容
const querystr = ref("");
// 左侧树
const treedata: any = ref([]);
const defaultProps = { label: "name" };
const handleNodeClick = (data: Tree) => {
  checkedtreeid.value = data.id;
  regionName.value = data.name;
  orgtype.value= data.type
  getData();
};
const infoForm = ref();
const treeRef = ref();
// 表格数组类型定义
const tableData = ref([]);
const checkedtreeid = ref("");
const orgtype = ref("");

const loading = ref(false);
const treeloading = ref(false);
//新建学校数组
const info:any = ref({
  id: "",
  region_id: "", //区域ID （学校所在城市
  code: "", // 学校代码
  name: "", // 学校名称
  education_code: "", // 教育机构编码
  org_type: "5", // 5- 学校
  teach_type:"",  // 学校类型
  teacher_id: "", // 校长ID
  teacher_name: "", // 校长名称
  organization_id:"", // 筛查服务机构ID
  status:"01" // 01-初始创建   00-标志删除
});
const tempData:any = ref("")
const title = ref("");
const dialogVisible = ref(false);
const regionName =ref(""); //行政区域名称
const searchName =ref(""); //行政区域名称
function searchInit(){
  treedata.value = publicTree(tempData.value,searchName.value)
}
//获取行政区域
function getTree() {
  const params = {
    // name: searchName.value,
    status:'01'
  };
  treeloading.value = true
  queryRegion(params).then((res: any) => {
    tempData.value =  JSON.parse(JSON.stringify(res.data)) 
    treedata.value = publicTree(res.data,"")
    treeloading.value = false
    checkedtreeid.value = ""
    if (checkedtreeid.value == "" &&treedata.value.length != 0) {
      checkedtreeid.value = res.data[0].id;
      orgtype.value= res.data[0].type
      regionName.value = res.data[0].name;
    }
    nextTick(() => {
      treeRef.value?.setCurrentKey(checkedtreeid.value);
    });
    getData();
  })
  .catch((error:any)=>{
    treeloading.value = false
  })
}
const queryInfo :any = ref({
  current:1,
  size:10,
  total:0
})
//获取表格类型
function getData() {
  querystr.value = querystr.value.replace(/\s+/g, "");
  let params = {
    name: querystr.value,
    regionId: checkedtreeid.value,
    teachType:schoolType.value,
    type:orgtype.value,
    current: queryInfo.value.current,
    size:queryInfo.value.size
  };
  loading.value = true
  querySchoolPage(params).then((res) => {
    tableData.value = res.data.records;
    queryInfo.value.total = res.data.total
    loading.value = false
  });
}
const multipleSelection = ref([]);
//定义学校填写规则
const moderules = reactive<FormRules>({
  code: [{ required: true, message: "请输入学校代码", trigger: "blur" }],
  name: [{ required: true, message: "请输入学校名称", trigger: "blur" }],
  teach_type: [{ required: true, message: "请选择办学类型", trigger: "change" }],
  custom1: [{ required: true, message: "请选择学校类型", trigger: "change" }]
  

});
function handleSelectionChange(val: any) {
  multipleSelection.value = val;
}
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,
          regionId: info.value.region_id, //区域ID （学校所在城市
          code: info.value.code, // 学校代码
          name: info.value.name, // 学校名称
          educationCode: info.value.education_code, // 教育机构编码
          orgType: "5", // 5- 学校
          teachType:info.value.teach_type,
          address:info.value.address,
          teacherId: info.value.teacher_id, // 校长ID
          teacherName: info.value.teacher_name, // 校长名称
          logo: info.value.logo,
          qrcode:info.value.qrcode,
          custom1:info.value.custom1
        };
        updateSchool(data).then((item) => {
          dialogVisible.value = false;
          ElMessage({
            message: "修改成功",
            type: "success",
          });
          getData();
        }).catch(()=>{
          isSwitch.value = false
        })
      } else {
        const data:any = {
          regionId: info.value.region_id, //区域ID （学校所在城市
          code: info.value.code, // 学校代码
          name: info.value.name, // 学校名称
          educationCode: info.value.education_code, // 教育机构编码
          orgType: "5", // 5- 学校
          teachType:info.value.teach_type,
          teacherId: info.value.teacher_id, // 校长ID
          teacherName: info.value.teacher_name, // 校长名称
          status:"01", // 01-初始创建   00-标志删除
          address:info.value.address,
          logo: info.value.logo,
          qrcode:info.value.qrcode,
          custom1:info.value.custom1
        };
        addSchool(data).then((item) => {
          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,
    region_id: checkedtreeid.value, //区域ID （学校所在城市
    code: "", // 学校代码
    name: "", // 学校名称
    education_code: "", // 教育机构编码
    org_type: "5", // 5- 学校
    teacher_id: "", // 校长ID
    teacher_name: "", // 校长名称
    teach_type:"", // 办学类型
    organization_id:"", // 筛查服务机构ID
    logo:"",
    qrcode:"",
    status:"01", // 01-初始创建   00-标志删除
    custom1:""
  });
  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,
    };
    delSchool(params).then((res:any) => {
      if(res.code=="0"){
        getData();
        ElMessage({
          message: "删除成功",
          type: "success",
        });
      }else{
        ElMessage({
          message: res.msg,
          type: "error",
        });
      }
      
    });
  });
}


onMounted(() => {
  getTree();
  getDict({ dictcode: 'schoolType' }).then((res) => {
    schoolTypeList.value = res.data
  })
});
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;
      };
    };
  }
}

function exportOut(){
  querystr.value = querystr.value.replace(/\s+/g, "");
  let params = {
    name:querystr.value,
    regionId:checkedtreeid.value,
    type:orgtype.value,
    regionName:regionName.value
  };
  exportExcel(params).then((response: any) => {
    downloadFile(response,regionName.value+  '-学校', 'xlsx')
  });
}
function downloadSchoolStudent(){
  downloadStudent({}).then((response: any) => {
    downloadFile(response, '学生基本信息导入模板', 'xlsx')
  });
}
function downloadSchool(){
  downloadSchoolTemplate({}).then((response: any) => {
    downloadFile(response, '学校基本信息导入模板', 'xlsx')
  });
}



function uploadChange(file:any){
  var reader = new FileReader();
  reader.readAsDataURL(file.raw);
  reader.onload = () => {
    info.value.logo =reader.result
  };
  reader.onerror = function(error) {
    console.log("Error: ", error);
  };
}

function uploadQecodeChange(file:any){
  var reader = new FileReader();
  reader.readAsDataURL(file.raw);
  reader.onload = () => {
    info.value.qrcode =reader.result
  };
  reader.onerror = function(error) {
    console.log("Error: ", error);
  };
}

function delLogo(){
  info.value.logo = ""
}
function delQrcode(){
  info.value.qrcode = ""
}
const upload:any = ref(null)
function handleSuccess(file: any) {
  if(file.code =="0"){
    ElMessage({
      message: "导入成功！",
      type: "success",
    });
    getData()
    upload.value.clearFiles()
  }else{
    ElMessage({
      message: "导入失败！",
      type: "error",
    });
    upload.value.clearFiles()
  }
 
}


const uploads:any = ref(null)

function handlePreview(){
  loading.value = true
}

function handlesSuccess(file: any) {
  loading.value = false
  if(file.code == "0"){
    ElMessage({
      message: "导入成功！",
      type: "success",
    });
    getData()
  }else{
    errorData.value = []
    let msg =  file.msg.split("！！<br>")
    msg.forEach(element => {
      errorData.value.push({name:element})
    });
    dialogTableVisible.value = true
    // ElMessage({
    //   message: file.msg,
    //   type: "error",
    // });
  }

  upload.value.clearFiles()
}
function handleError(file: any){
  loading.value = false
  ElMessage({
    message: "导入失败！",
    type: "error",
  });
  upload.value.clearFiles()
}

const dialogTableVisible = ref(false)
const errorData:any = ref([])
const schoolTypeList:any = ref([])
const schoolType:any = ref("")
function currency(list: any, itemcode: any) {
  let dictname = ''
  list.forEach((element: any) => {
    if (element.itemcode == itemcode) {
      dictname = element.dictname
    }
  })
  return dictname
}
function exportToExcel() {
  // 获取表格的 DOM 元素
  const table = document.querySelector('.school_table_error');

  // 使用 html-to-xlsx 工具将表格转换为工作表
  const ws = XLSX.utils.table_to_sheet(table);
  // 设置列的宽度
  const colWidths = [
    { wch: 5 }, 
    { wch: 70 },
  ];
  ws['!cols'] = colWidths;
  // 创建一个工作簿
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

  // 导出 Excel 文件
  XLSX.writeFile(wb, '导入错误信息.xlsx');
};
</script>

<template>
  <div class="faulttemplate-box">
    <aside id="silderLeft">
      <div class="lefttitle">
        <div class="line"></div>
        <div class="treetitle">行政区域</div>
      </div>
      <div style="padding:0 10px ;">
        <el-input v-model="searchName" placeholder="请输入行政区域" clearable style="width: 100%;margin-bottom: 10px;" 
          @input="searchInit" />
        <el-tree v-loading="treeloading" default-expand-all 
          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">
        </el-tree>
      </div>
      <div class="moveBtn" v-move>
        <div class="moveBtn-line" v-move></div>
      </div>
    </aside>
    <main class="silderRight">
      <el-row style="margin-bottom: 10px">
        <el-col :span="24" class="top-nav">
          <div style="display: flex;">
            <el-input v-model="querystr" placeholder="请输入学校名称" clearable style="width: 200px;"
              @keyup.enter="getData" />
            <el-select style="width: 200px;margin-left: 10px;" clearable v-model="schoolType" placeholder="请选中办学类型"
              @change="getData">
            <el-option v-for="item in schoolTypeList" :key="item.itemcode" :label="item.dictname" :value="item.itemcode"/>
          </el-select>
            <el-button type="primary" style="margin-left: 10px;" @click="getData">搜索</el-button>
          </div>
          <div class="right-nav">
            <el-button type="primary" @click="addClick"><img style="margin-right:5px;" src="@/assets/MenuIcon/jscz_xz.png" alt=""> 新增</el-button>
            <el-upload
              ref="upload"
              class="upload-demo"
              accept=".xlsx"
              :action=" url +  '/base/school/importExcel/?regionId=' + checkedtreeid"
              :headers="{ token: getToken() }" 
              :show-file-list="false"
              :on-success="handleSuccess">
              <el-button type="primary" style="margin: 0 10px;">
                <img src="@/assets/MenuIcon/u455.png" alt=""  style="margin-right: 5px;">
                导入学校</el-button>
            </el-upload>
            <!-- <el-button type="primary" @click="downloadSchoolStudent"><img src="@/assets/MenuIcon/u458.png" alt=""  style="margin-right: 5px;">下载学生模版</el-button> -->
            <el-button type="primary" @click="downloadSchool"><img src="@/assets/MenuIcon/u458.png" alt=""  style="margin-right: 5px;">下载学校模版</el-button>
            <el-button type="primary" @click="exportOut"><img src="@/assets/MenuIcon/u458.png" alt=""  style="margin-right: 5px;">导出</el-button>
           
            
           
            <!-- <el-button :disabled="multipleSelection.length <= 0" :type="multipleSelection.length > 0 ? 'primary' : ''"
              @click="delClick"><el-icon>
                <Delete />
              </el-icon> 删除</el-button> -->
          </div>
        </el-col>
      </el-row>
      <el-table v-loading="loading" :data="tableData" style="width: 100%;height:calc(100vh - 260px); margin-bottom: 20px" row-key="id" border
        default-expand-all :header-cell-style="{background:'rgb(250 250 250)',height:'50px'}" >
        <el-table-column prop="logo" label="学校logo" width="100" align="center">
          <template #default="scope">
            <div style="display: flex;align-items: center;justify-content: center;">
              <img  v-if="scope.row.logo != null&&scope.row.logo != ''" :src="scope.row.logo" style="width: 40px;height: 40px;"  alt="">
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="学校代码" width="140"></el-table-column>
        <el-table-column prop="name" label="学校名称" min-width="120"></el-table-column>
        <el-table-column prop="education_code" label="教育机构编码" width="120"></el-table-column>
        <el-table-column prop="teacher_name" label="校长名称" width="90"></el-table-column>
        <el-table-column prop="teach_type" label="办学类型" width="170">
          <template #default="scope">{{ currency(schoolTypeList, scope.row.teach_type) }}</template>
        </el-table-column>
        <el-table-column prop="custom1" label="学校类型" width="120">
          <template #default="scope">
            <span v-if="scope.row.custom1 !=null && scope.row.custom1 !=''">
            {{ scope.row.custom1.split("-")[1] }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="学校地址" min-width="160"></el-table-column>
        <el-table-column prop="qrcode" label="公众号二维码" width="120" align="center">
          <template #default="scope">
            <div style="display: flex;align-items: center;justify-content: center;">
              <img  v-if="scope.row.qrcode != null&&scope.row.qrcode != ''" :src="scope.row.qrcode" style="width: 40px;height: 40px;"  alt="">
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="80" align="center">
          <template #default="scope">
            <span style="display: flex;display: -webkit-flex;justify-content: space-around; -webkit-justify-content: space-around;align-items: center; ">
              <img src="@/assets/MenuIcon/lbcz_xg.png" title="修改" style="cursor: pointer;"
              @click="editHandle(scope.row)" >
            <img  src="@/assets/MenuIcon/lbcz_sc.png" title="删除" style="cursor: pointer;"
              @click="delHandle(scope.row)" >
              <!-- <el-upload
                ref="upload"
                accept=".xlsx"
                style="width: 16px; height: 16px;"
                :action=" url +  '/base/school-student/importSchoolStudent/?schoolId=' + scope.row.id +'&schoolName=' + scope.row.name "
                :headers="{ token: getToken() }" 
                :show-file-list="false"
                :before-upload="handlePreview"
                :on-success="handlesSuccess"
                :on-error="handleError">
                  <img src="@/assets/tableicon/daochu.png" alt="" title="导入学生">
              </el-upload>  -->
            </span>
          </template>
        </el-table-column>
      </el-table>
      <Page class="mt-[20px]" :total="queryInfo.total" v-model:size="queryInfo.size" v-model:current="queryInfo.current"
          @pagination="getData" />
    </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="学校代码">
          <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="education_code">
          <el-input v-model="info.education_code" style="width: 100%"></el-input>
        </el-form-item>
        <!-- <el-form-item label="校长id" prop="teacher_id">
          <el-input v-model="info.teacher_id" style="width: 100%"></el-input>
        </el-form-item> -->
        <el-form-item label="校长名称" prop="teacher_name">
          <el-input v-model="info.teacher_name" style="width: 100%"></el-input>
        </el-form-item>
        <el-form-item label="办学类型" prop="teach_type">
          <el-select
            style="width: 100%"
            v-model="info.teach_type"
            placeholder=""
            clearable 
            filterable
          >
            <el-option
              v-for="item in schoolTypeList"
              :key="item.itemcode" :label="item.dictname" :value="item.itemcode"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="学校地址" prop="organization_id">
          <el-input v-model="info.address" style="width: 100%"></el-input>
        </el-form-item>
        <el-form-item label="学校类型" prop="custom1">
          <el-select
            style="width: 100%"
            v-model="info.custom1"
            placeholder=""
            clearable 
            filterable
          >
            <el-option :key="'1-幼儿园'" :label="'1-幼儿园'" :value="'1-幼儿园'"/>
            <el-option :key="'2-小学'" :label="'2-小学'" :value="'2-小学'"/>
            <el-option :key="'3-小学/初中'" :label="'3-小学/初中'" :value="'3-小学/初中'"/>
            <el-option :key="'4-初中'" :label="'4-初中'" :value="'4-初中'"/>
            <el-option :key="'5-初中/高中'" :label="'5-初中/高中'" :value="'5-初中/高中'"/>
            <el-option :key="'6-高中'" :label="'6-高中'" :value="'6-高中'"/>
            <el-option :key="'7-大学'" :label="'7-大学'" :value="'7-大学'"/>
          
          </el-select>
        </el-form-item>


        
        
        <el-form-item label="上传图片" prop="organization_id">
          <div style="display: flex;">
            <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.logo">
              <img :src="info.logo" 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="delLogo"><Delete /></el-icon>
              </div>
            </div>
            <div  v-else>
              <el-icon class="newavatar-uploader-icon"><Plus /></el-icon>
              <div class="newavatar-uploader-text">学校logo</div>
            </div>
              
            </el-upload>
            <el-upload
              style="margin-left: 10px;"
              class="avatar-uploader"
              accept=".png, .jpg, .jpeg"
              action=""
              :show-file-list="false"
              :auto-upload="false"
              @change="uploadQecodeChange"
            >
              <div style="width: 100px;height: 100px;position: relative;" v-if="info.qrcode">
                <img :src="info.qrcode" 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="delQrcode"><Delete /></el-icon>
                </div>
              </div>
              <div  v-else>
                <el-icon class="newavatar-uploader-icon"><Plus /></el-icon>
                <div class="newavatar-uploader-text">学校二维码</div>
              </div>
            </el-upload>
          </div>
          
        </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="dialogTableVisible" title="导入错误信息列表" width="800">
      <el-button style="margin-bottom: 10px" type="primary" @click="exportToExcel">导出错误信息</el-button>
      <el-table class="school_table_error" :data="errorData" style="height: calc(100vh - 200px);" border>
        <el-table-column type="index"  label="序号" width="90" />
        <el-table-column prop="name" label="内容" />
      </el-table>
    </el-dialog>
  </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: 15px;
  padding-bottom: 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;
}
.right-nav{
  display: -webkit-flex;
  display: flex;
}
.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;
}
</style>
