
<script lang="ts">
export default {
  name: 'visionInstitution' // 视力筛查服务机构
};
</script>
<script setup lang="ts">
import clipboard3 from "vue-clipboard3";
import { onMounted, reactive, ref, nextTick } from "vue";
import { ElMessage, ElMessageBox, FormRules } from "element-plus";
import { queryRegion } from "@/api/regionmodule/region";
import VisionInstitutionDoctor from "./VisionInstitutionDoctor.vue";
import InstitutionSchools from "./institutionSchools.vue";
import { publicTree } from '@/utils/validate';
import { queryVisionInstitutionList,addVisionInstitution,updateVisionInstitution,delVisionInstitution } from "@/api/regionmodule/visionInstitution";
import { useUserStore } from '@/store/modules/user';
//树形控件类型定义
const userStore = useUserStore();
interface Tree {
  [x: string]: any;
  label: string;
  children?: Tree[];
}
//搜索内容
const querystr = ref("");
// 左侧树
const treedata: any = ref([]);
const copyurl= ref("")
const defaultProps = { label: "name" };
const handleNodeClick = (data: Tree) => {
  checkedtreeid.value = data.id;
  regionType.value = data.type;
  regionName.value = data.name;
  getData();
};
const infoForm = ref();
const treeRef = ref();
// 表格数组类型定义
const tableData:any = ref([]);
const checkedtreeid = ref("");
const loading = ref(false);
const treeloading = ref(false);
//新建机构数组
const info:any = ref({
  id: "",
  region_id: "", //区域ID （机构所在城市
  name: "", // 机构名称
  code: "", // 机构代码
  manager: "", // 负责人
  profile: "", // 机构介绍
  address: "", // 机构地址
  contact: "", // 联系人
  telephone:"", // 联系电话
});
const title = ref("");
const dialogVisible = ref(false);
const regionName =ref(""); //行政区域名称
const inputName =ref(""); //行政区域名称
const tempData = ref([])
//获取行政区域
function getTree() {
  const params = {
    name: inputName.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;
      regionName.value = res.data[0].name,
      regionType.value = res.data[0].type;
    }
    nextTick(() => {
      treeRef.value?.setCurrentKey(checkedtreeid.value);
    });
    getData();
  })
  .catch((error:any)=>{
    treeloading.value = false
  })
}
const queryInfo :any = ref({
  current:1,
  size:10,
  total:0
})
const regionType = ref("")
//获取表格类型
function getData() {
  querystr.value = querystr.value.replace(/\s+/g, "");
  let params = {
    name: querystr.value,
    regionId: checkedtreeid.value,
    regionType:regionType.value,
    ParentId: "00"
  };
  loading.value = true
  queryVisionInstitutionList(params).then((res) => {
    tableData.value = res.data;
    loading.value = false
  }).catch(()=>{
    loading.value = false
  });
}
const multipleSelection = ref([]);
//定义机构填写规则
const moderules = reactive<FormRules>({
  code: [{ required: true, message: "请输入机构代码", trigger: "blur" }],
  name: [{ required: true, message: "请输入机构名称", trigger: "blur" }],
});
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, // 机构名称
          parentId:info.value.parent_id,
          type:info.value.type,
          manager: info.value.manager, // 负责人
          profile: info.value.profile, // 机构介绍
          address: info.value.address, // 机构地址
          contact: info.value.contact, // 联系人
          telephone:info.value.telephone, // 联系电话
          logo: info.value.logo,
          qrcode:info.value.qrcode
        };
        updateVisionInstitution(data).then((item) => {
          dialogVisible.value = false;
          ElMessage({
            message: "修改成功",
            type: "success",
          });
          if( title.value == '修改机构'){
            getData();
          }else{
            getInstitution()
          }

         
        }).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, // 教育机构编码
          parentId:info.value.parent_id,
          type:info.value.type,
          manager: info.value.manager, // 负责人
          profile: info.value.profile, // 机构介绍
          address: info.value.address, // 机构地址
          contact: info.value.contact, // 联系人
          telephone:info.value.telephone, // 联系电话
          logo: info.value.logo,
          qrcode:info.value.qrcode
        };
        addVisionInstitution(data).then((item) => {
          dialogVisible.value = false;
          if( title.value == '新增机构'){
            getData();
          }else{
            getInstitution()
          }
          ElMessage({
            message: "新增成功",
            type: "success",
          });
        }).catch(()=>{
          isSwitch.value = false
        })
      }
 
    }
  })
}
function updateHttp(){
  const data:any = {
    id:info.value.id,
    custom1:info.value.custom1
  };
  updateVisionInstitution(data).then((item) => {
    isViewHttp.value = false;
    ElMessage({
      message: "编辑成功",
      type: "success",
    });
    if( title.value == '修改机构'){
      getData();
    }else{
      getInstitution()
    }
  }).catch(()=>{
    isSwitch.value = false
  })
}
const { toClipboard } = clipboard3();
const copyDomText = async () => {
     try {
        await toClipboard(copyurl.value);
        ElMessage({
        message: "复制成功",
        type: "success",
      });
     } catch (error) {
      ElMessage({
        message: "复制失败",
        type: "error",
      });
     }
    };
//关闭弹窗
function handleClose() {
  if (infoForm.value != null) infoForm.value.resetFields();
  dialogVisible.value = false;
}
function qrcodeClick(row:any){
  title.value="查看二维码"
  info.value = row
  isQrcode.value = true;
}
const isQrcode = ref(false)
function qrcodeClose() {
  isQrcode.value = false;
  isViewHttp.value =false
}



//新建机构
function addClick(e:any) {
  isSwitch.value = false
  const infoagin = ref({
    id: null,
    parent_id:"00",
    type:"01",
    region_id: checkedtreeid.value, //区域ID （机构所在城市
    code: "", // 机构代码
    name: "", // 机构名称
    manager: "", // 负责人
    profile: "", // 机构介绍
    address: "", // 机构地址
    contact: "", // 联系人
    telephone:"", // 联系电话
    logo:"",
    qrcode:"",
    status:"01" // 01-初始创建   00-标志删除
  });
  title.value = "新增机构";
  if(e == '新增下属机构'){
    infoagin.value.parent_id = institutionSubInfo.value.id
    // infoagin.value.region_id = ''
    title.value = "新增下属机构";
  }
  info.value = infoagin.value;
  dialogVisible.value = true;
}
//修改机构
function editHandle(row: any,e:any) {
  isSwitch.value = false
  copyurl.value = userStore.webApiBaseApp +'/#/?institutionId=' + row.id
  title.value = "修改机构";
  if(e == '修改下属机构'){
    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,
    };
    delVisionInstitution(params).then(() => {
      getData();
      getInstitution()
      ElMessage({
        message: "删除成功",
        type: "success",
      });
    });
  });
}
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;
      };
    };
  }
}


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 = ""
}
function switchChange(row:any){
  let name = ""
  if(row.status == '01'){
    name ='确定开启此机构吗？'
  }else{
    name ='确定禁用此机构吗？'
  }
  ElMessageBox.confirm(name, "删除提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    let params = {
      id: row.id,
      status: row.status
    };
    updateVisionInstitution(params).then(() => {
      if(numHtml.value == '1'){
        getData();
      }else{
        getInstitution()
      }
      if(row.status == '02'){
        ElMessage({
        message: "禁用成功",
        type: "success",
      });
      }else{
        ElMessage({
        message: "启用成功",
        type: "success",
      });
      }
    }).catch(() => {
      if(row.status == '01'){
        row.status = '02'
      }else{
        row.status = '01'
      }
    });
  }).catch(() => {
    if(row.status == '01'){
      row.status = '02'
    }else{
      row.status = '01'
    }
  
  });
}
const numHtml = ref("1")
const institutionId = ref("")
const institutionInfo:any = ref({})
const institutionName = ref("")
const subStr = ref("")
function doctorClick(row:any,sub:any){
  subStr.value = sub
  institutionId.value = row.id
  institutionName.value = row.name
  numHtml.value = "2"
}
const isSchool = ref(false)
function schoolClick(row:any,sub:any){
  subStr.value = sub
  institutionInfo.value = JSON.parse(JSON.stringify(row))
  institutionInfo.value.regionName = regionName.value;
  // numHtml.value = "1"
  isSchool.value = true
}
const institutionSubInfo:any =ref({})
function subClick(row:any){
  institutionSubInfo.value = JSON.parse(JSON.stringify(row))
  institutionSubInfo.value.regionName = regionName.value;
  institutionId.value = row.id
  institutionName.value = row.name
  getInstitution()
  numHtml.value = "3"
}
const subData:any =ref([])
function getInstitution(){
  querystr.value = querystr.value.replace(/\s+/g, "");
  let params = {
    name: querystr.value,
    regionId: '',
    ParentId: institutionSubInfo.value.id,
  };
  loading.value = true
  queryVisionInstitutionList(params).then((res) => {
    subData.value = res.data;
    loading.value = false
  });
}

function returnClick(e:any){
  if(subStr.value !='sub' || e=='sub'){
    numHtml.value = "1"
  }else{
    numHtml.value = "3"
  }

  isSchool.value = false
}
const props1 = {
  checkStrictly: true,
  value:'id',
  label:'name'
}
const regionInfo:any =ref("")
function handleChange(value:any){
  isCascader.value = false
  setTimeout(()=>{
    isCascader.value = true
  },20)
  if(value != null && value.length != 0){
    info.value.region_id = value[value.length -1]
  }
}
function handleClick(data:any){
  if(data.children == null){
    isCascader.value = false
    setTimeout(()=>{
      isCascader.value = true
    },20)
  }
  info.value.region_id = data.id
}
function searchInit(){
  treedata.value = publicTree(tempData.value,inputName.value)
}
const isCascader=ref(true)
const isViewHttp = ref(false)
function httpClick(row:any){
  info.value = row
  copyurl.value =  userStore.webApiBaseApp +'/#/?institutionId=' + row.id
  copyDomText()
  // isViewHttp.value = true
}
</script>

<template>
  <div class="faulttemplate-box">
    <aside v-show="numHtml == '1'" id="silderLeft">
      <div class="lefttitle">
        <div class="line"></div>
        <div class="treetitle">行政区域</div>
      </div>
      <div  style="padding:0 10px ;">
        <el-input v-model="inputName" 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  v-show="numHtml == '1'" class="silderRight">
      <el-row style="margin-bottom: 10px;width: calc(100% - 15px);padding-left: 15px;">
        <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 type="primary" @click="addClick('')"><img style="margin-right:5px;" src="@/assets/MenuIcon/jscz_xz.png" alt=""> 新增</el-button>
            <!-- <el-button type="primary" @click=""><img style="margin-right:5px;" src="@/assets/MenuIcon/jscz_xz.png" alt=""> 导入</el-button>
            <el-button type="primary" @click=""><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">
          <div class="zhaunchu" v-if="item.type == '01'">独立机构</div>
          <div class="zhaunchu" v-if="item.type == '02'">集团机构</div>
          <el-switch @change="switchChange(item)"
          style="position: absolute;top: 40px;right: 20px;"
            v-model="item.status"
            active-value="01"
            inactive-value="02"
            >
          </el-switch>
          <img class="imgclass" src="@/assets/MenuIcon/lbcz_xg.png" title="修改" style="right: 50px;"
            @click="editHandle(item,'')" >
          <img class="imgclass" src="@/assets/MenuIcon/lbcz_sc.png" title="删除" style="right: 20px;"
            @click="delHandle(item)" >
          <div style="display: flex;align-items: center;">
            <img v-if="(item.logo=='' || item.logo==null)" src="@/assets/student/logo.png" alt="" style="width:60px;height:60px;">
            
            <img v-if="item.logo!='' && item.logo!=null" :src="item.logo" alt="" style="width:60px;height:60px;">
            <div style="margin-left: 15px;">
              <div class="basicname">{{ item.name }}</div>
              <div class="basicinfo">
                <span>负责人：</span>
                <span>{{ item.manager }}</span>
              </div>
            </div>
          </div>
          <div class="basicinfo" style="padding-top: 25px;">
            <img src="@/assets/student/u255.png" alt="">
            <span style="padding: 0 15px;">{{ item.address }}</span>
          </div>
          <div class="basicinfo" style="padding-top: 15px;">
            <img src="@/assets/student/u245.png" alt="">
            <span style="padding: 0 15px;">{{ item.contact }}</span>
            <img src="@/assets/student/u247.png" alt="">
            <span style="padding: 0 15px;">{{ item.telephone }}</span>
          </div>
          <div class="httpurl" title="复制网址" @click="httpClick(item)">
            <img src="@/assets/student/ie.png" alt="" srcset="">
          </div>
          <div v-if="item.type == '02'" style="display:flex ;align-items: center;justify-content: space-between;padding-top: 25px;">
            <div v-if="item.qrcode !='' && item.qrcode !=null" class="classbutton" @click="qrcodeClick(item)">查看二维码</div>
            <div  title="暂无二维码" v-else class="classbutton" style="cursor:not-allowed;" >查看二维码</div>
            <div class="classbutton" @click="doctorClick(item,'')">机构医生</div>
            <div class="classbutton" @click="schoolClick(item,'')">关联学校</div>
            <div class="classbutton" @click="subClick(item)">下属机构</div>
          </div>
          <div v-if="item.type == '01'" style="display:flex ;align-items: center;justify-content: space-between;padding-top: 25px;">
            <div v-if="item.qrcode !='' && item.qrcode !=null" class="classbutton classbutton1" @click="qrcodeClick(item)">查看二维码</div>
            <div title="暂无二维码" v-else class="classbutton classbutton1" style="cursor:not-allowed;" >查看二维码</div>
            <div class="classbutton classbutton1" @click="doctorClick(item,'')">机构医生</div>
            <div class="classbutton classbutton1" @click="schoolClick(item,'')">关联学校</div>
          </div>
        </div>
      </div>
    </main>

    <div class="schoolStudent-box" v-if="numHtml == '3'">
      <div class="schoolStudent-title">
      <div class="class_order">{{ institutionSubInfo.name }}</div>
      <div class="return" @click="returnClick('sub')">
        <img src="@/assets/tableicon/u549.png" alt="">
        <div style="padding-left: 2px;padding-top: 2px;">返回</div>
      </div>
    </div>
    <div class="schoolStudent-line" style="width:calc(100%);margin-bottom:10px ;"></div>
      <el-row style="margin-bottom: 10px;width: calc(100%);">
        <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 type="primary" @click="addClick('新增下属机构')"><img style="margin-right:5px;" src="@/assets/MenuIcon/jscz_xz.png" alt=""> 新增</el-button>
            <!-- <el-button type="primary" @click=""><img style="margin-right:5px;" src="@/assets/MenuIcon/jscz_xz.png" alt=""> 导入</el-button>
            <el-button type="primary" @click=""><img style="margin-right:5px;" src="@/assets/MenuIcon/jscz_xz.png" alt=""> 导出</el-button> -->
          </div>
        </el-col>
      </el-row>
      <el-table v-loading="loading" :data="subData" style="width: 100%; height:calc(100vh - 250px);" row-key="id" border
           default-expand-all :header-cell-style="{background:'rgb(250 250 250)',height:'50px'}"
        >
        <el-table-column prop="code" label="机构代码" width="140"></el-table-column>
        <el-table-column prop="name" label="机构名称" width="150"></el-table-column>
        <el-table-column prop="manager" label="负责人" width="150"></el-table-column>
        <el-table-column prop="contact" label="联系人" width="150"></el-table-column>
        <el-table-column prop="telephone" label="联系电话" width="150"></el-table-column>

        <!-- <el-table-column prop="region_id" label="所属城市" width="150">
          <template #default="scope">
            <span>{{ scope.row.region_id }}</span>
          </template>
        </el-table-column> -->
        <el-table-column prop="address" label="机构地址" min-width="150"></el-table-column>
        <el-table-column prop="name" label="状态" width="80">
          <template #default="scope">
            <span  class="temptable">
              <el-switch @change="switchChange(scope.row)"
                v-model="scope.row.status"
                active-value="01"
                inactive-value="02"
                >
              </el-switch>
            </span>

          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="160">
          <template #default="scope">
            <span style="display: flex;display: -webkit-flex;justify-content: space-around; -webkit-justify-content: space-around; ">
            <img src="@/assets/tableicon/u263.png" title="修改" style="cursor: pointer;"
              @click="editHandle(scope.row,'修改下属机构',)" >
              <img src="@/assets/tableicon/u832.png" title="机构医生" style="cursor: pointer;"
              @click="doctorClick(scope.row,'sub')" >
              <img src="@/assets/tableicon/u826.png" title="查看二维码" style="cursor: pointer;"
              @click="qrcodeClick(scope.row)" >
              <img src="@/assets/tableicon/u226.png" title="关联学校" style="cursor: pointer;"
              @click="schoolClick(scope.row,'sub')" >
            <img src="@/assets/tableicon/u186.png" title="删除" style="cursor: pointer;"
              @click="delHandle(scope.row)" >
            </span>
          </template>
        </el-table-column>
      </el-table> 
    </div>

    <!-- 机构 弹框-->
    <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="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="机构类型" v-if="title =='新增机构' || title == '修改机构'">
          <el-radio-group v-model="info.type">
            <el-radio label="01">独立机构</el-radio>
            <el-radio label="02">集团机构</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="负责人" prop="manager">
          <el-input v-model="info.manager" style="width: 100%"></el-input>
        </el-form-item>
        <el-form-item label="机构介绍" prop="profile">
          <el-input type="textarea" v-model="info.profile" style="width: 100%"></el-input>
        </el-form-item>
        <el-form-item label="机构地址" prop="address">
          <el-input v-model="info.address" style="width: 100%"></el-input>
        </el-form-item>
        <el-form-item label="联系人" prop="contact">
          <el-input v-model="info.contact" style="width: 100%"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" >
          <el-input v-model="info.telephone" style="width: 100%"></el-input>
        </el-form-item>
        <el-form-item label="上传图片">
          <div style="display: flex;">
            <el-upload
              v-if="title =='新增机构' || title == '修改机构'"
              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-item label="复制网址" >
          <div style="display: flex;width: 100%;">
            <el-input v-model="copyurl" style="width: 100%" disabled></el-input><el-button type="primary" @click="copyDomText">复制</el-button>
          </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="isQrcode" :before-close="qrcodeClose" :title="title" draggable width="600px">
      <div style="display: flex;align-items: center;justify-content: center;height: 450px;">
        <img :src="info.qrcode" alt="" style="max-width:450px ;max-height:450px ;">
      </div>
    </el-dialog>
    <el-dialog v-model="isViewHttp" :before-close="qrcodeClose" :title="'查看网址'" draggable width="500px">
      <div style="display: flex;align-items: center;justify-content: center;height: 40px;" id="custom1">
        <el-input v-model="info.custom1" style="width: 100%"></el-input>
        <el-button type="primary" @click="copyDomText">复制</el-button>
      </div>
      <div style="display: flex;justify-content: flex-end;margin-top:10px ;">
        <el-button type="primary" @click="updateHttp">确定</el-button>
      </div>
      
    </el-dialog>

    <VisionInstitutionDoctor  v-if="numHtml == '2'"  :institutionId="institutionId" :institutionName="institutionName"
      @returnClick="returnClick"/>
    <InstitutionSchools  v-if="isSchool == true"  :institutionInfo="institutionInfo"
      @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: 15px;
  padding-bottom: 0px;
  padding-right: 0px;
  padding-left: 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;
}
.zhaunchu{
  position:absolute;
  z-index:1;
  top:20px;
  right:20px;
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #FF9900;
  text-align: center;
}
.schoolClassUi{
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  height: calc(100vh - 240px);
  overflow: auto;
  padding-top: 5px;
  .schoolClassLis{
    position: relative;
    width: 445px;
    height: 240px;
    padding: 20px 20px;
    margin-left: 15px;
    margin-bottom: 15px;
    font-family: 'Arial Normal', 'Arial';
    font-weight: 400;
    font-style: normal;
    font-size: 13px;
    color: #333333;
    text-align: center;
    line-height: normal;
    border: 1px solid #C6E2FF;
    border-radius: 8px;
    :deep(.el-switch__core::before) {
      content: "停";
      position: absolute;
      top: -1px;
      right: 6px;
      color: #787878;
      font-size: 12px;
    }
    :deep(.is-checked .el-switch__core::before) {
      content: "启";
      position: absolute;
      top: -1px;
      left: -6px;
      color: #fff;
      font-size: 12px;
    }
    .imgclass{
      display: none;
      position: absolute;
      top: 15px;
      right: 0;
      z-index:10;
      cursor: pointer;
    }
    .classicon{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      background: inherit;
      background-color: rgba(255, 153, 0, 0.0980392156862745);
      border: none;
      border-radius: 5px;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
      font-weight: 700;
      font-style: normal;
      font-size: 16px;
      color: #FF9900;
      margin-right: 15px;
    }
    .classtitle{
      font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
      font-weight: 700;
      font-style: normal;
      font-size: 16px;
      color: #333333;
    }
    .classtext{
      font-family: 'Arial Normal', 'Arial';
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
      color: #787878;
      margin-left: 15px;
    }
    .classbutton{
      display: flex;
      align-items:center ;
      justify-content: center;
      border: 1px solid #C6E2FF;
      background: rgb(236, 245, 255);
      border-radius:4px;
      width: 91px;
      height: 40px;
      font-family: 微软雅黑;
      font-weight: 400;
      font-style: normal;
      font-size: 14px;
      color: rgb(64, 158, 255);
      cursor: pointer;
    }
    .classbutton1 {
      width: 126px;
    }
    .classbutton:hover{
      background: rgb(64, 158, 255);
      color: #fff;
    }
  }
  .schoolClassLis:hover{
    border: 1px solid transparent;
    box-shadow: 0 0 0 2px rgb(64, 158, 255);
    .imgclass{
      display: block;
    }
    .zhaunchu{
      display: none;
    }
  }
  
}
.basicname{
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  color: #333333;
  text-align: left;
  padding-bottom: 10px;
}
.basicinfo{
  display: flex;
  align-items: center;
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #787878;
  text-align: left;
}
.schoolStudent-box{
  width: 100%;
  height: calc(100vh - 130px);
  overflow: auto;
  background-color: rgb(255, 255, 255);
  border: none;
  border-radius: 3px;
  padding: 15px 15px;
  box-sizing: border-box;
}
.schoolStudent-title{
    display: flex;
    justify-content: space-between;
    font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
    font-weight: 700;
    font-style: normal;
    font-size: 18px;
    color: #282828;
    .class_order{
      padding-bottom: 5px;
      border-bottom:3px solid #409eff;
    }
    .return{
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: 'Arial Normal', 'Arial';
      font-weight: 400;
      font-style: normal;
      font-size: 12px;
      color: #409EFF;
      width: 50px;
      height: 26px;
      border: 1px solid #C6E2FF;
      background: rgb(236, 245, 255);
      border-radius:4px;
      cursor: pointer;
    }
  }
  .schoolStudent-line{
    width: 100%;
    height: 1px;
    background: rgb(220, 223, 230);
    margin-top: -1px;
  }

  .temptable {
    :deep(.el-switch__core::before) {
      content: "停";
      position: absolute;
      top: -1px;
      right: 6px;
      color: #787878;
      font-size: 12px;
    }
    :deep(.is-checked .el-switch__core::before) {
      content: "启";
      position: absolute;
      top: -1px;
      left: 5px;
      color: #fff;
      font-size: 12px;
    }
  }
  .httpurl{
    position: absolute;
    bottom: 75px;
    right: 30px;
    cursor: pointer;
  }
</style>
