
<script lang="ts">
export default {
  name: 'dept'
};
</script>

<script setup lang="ts">
import { onMounted, reactive, ref, nextTick } from "vue";
import { ElMessage, ElMessageBox, FormRules } from "element-plus";
import {
  getTreelist,
  addTreelist,
  updataTreelist,
  delTreelist,
  gettableData,
  deptIsVaild,
  getAreaInfo,
} from "@/api/dept";
import { getDeviceByType } from "@/api/device";
import { uploadIcon } from "@/api/substation";
import { useAppStore } from '@/store/modules/app';
import { useUserStore } from '@/store/modules/user';
import Eldialog from '@/components/seccmsdialog/eldialog.vue';
import {organization} from "@/api/user";
import { encrypt, decrypt } from '@/utils/sm4';
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: "orgname" };
const handleNodeClick = (data: Tree) => {
  checkedtreeid.value = data.id;
  getData();
};
const infoForm = ref();
const treeRef = ref();
// 表格数组类型定义
const tableData = ref([]);
const checkedtreeid = ref("");
const loading = ref(false);
const treeloading = ref(false);
//新建区域/变电站对象
const info: any = ref({
  orgtype: '',
  orgcode: '',
  orgname: '',
  parentid: '',
  manager: '',
  isvaild: '1',
  description: '',
  nodeIp: '',
  nodeId: '',
  cityName: '',
  provinceName: '',
  companyName: '',
  address: '',
  contactPhone: '',
  contactPerson: '',
  stationType: '',
  isStationFlag: '0',
  voltLevel: '',
  coordinate: '',
});

const title = ref("");
const dialogVisible = ref(false);
//删除企业
const choosetreeid = ref("");
//获取企业树形信息
function getTree() {
  const params = {
    parentid: "0",
  };
  treeloading.value = true
  getTreelist(params).then((res: any) => {
    treedata.value = res;
    treeloading.value = false
    if (checkedtreeid.value == "") {
      checkedtreeid.value = res[0].id;
    }
    nextTick(() => {
      treeRef.value?.setCurrentKey(checkedtreeid.value);
    });
    getData();
  })
    .catch((error: any) => {
      treeloading.value = false
    })
}
//获取表格类型
function getData() {
  const params = {
    id: checkedtreeid.value,
  };
  loading.value = true
  gettableData(params).then((res) => {
    tableData.value = res.data;
    loading.value = false
  });
}
const multipleSelection: any = ref([]);
//定义企业填写规则
// 手机号验证
const checkPhone = (rule: any, value: any, callback: any) => {
  if (value) {   // 判断当输入的有值时，才校验
    if (!(/^1[3456789]\d{9}$/.test(value))) {
      callback(new Error('手机号格式不正确'))
    } else {
      callback()    // 注意这里要回调一下，不然提交不了
    }
  } else {
    callback()
  }
}
const rules = reactive<FormRules>({
  orgname: [{ required: true, message: info.value.orgtype == 1 ? '请填写区域名称' : "请填写变电站名称", trigger: "blur" }, { validator: stringlength, trigger: 'blur' }],
  orgcode: [{ required: true, message: info.value.orgtype == 1 ? '请填写区域编号' : "请填写变电站编号", trigger: "blur" }, { validator: stringlength1, trigger: 'blur' }],
  nodeIp: [{ pattern: /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/, message: "ip地格式错误", trigger: "blur" }],
  provinceName: [{ required: true, message: '请填写所属省份', trigger: "blur" }],
  cityName: [{ required: true, message: '请填写所属地市', trigger: "blur" }],
  stationType: [{ required: true, message: '请选择变电站类别', trigger: "blur" }],
  // contactPhone: [{ required: false, validator: checkPhone, trigger: 'blur' }],
});
//区域名称长度
function stringlength(rule: any, value: any, callback: any) {
  if (value.length > 200) {
    return callback(new Error('字符最大长度不超过200'))
  }
  callback()
}
function stringlength1(rule: any, value: any, callback: any) {
  if (value.length > 40) {
    return callback(new Error('字符最大长度不超过40'))
  }
  callback()
}
function handleSelectionChange(val: any) {
  multipleSelection.value = val;
}
const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: any
  rowIndex: number
}) => {
  if (rowIndex % 2 === 0) {
    return 'warning-row'
  } else if (rowIndex % 2 === 1) {
    return 'success-row'
  }
  return ''
}
//部门是否有效
function switchChange(row: any) {
  const elMessage = ref('')
  if (row.isvaild == '0') {
    elMessage.value = "确定停用该变电站吗？"
  } else if (row.isvaild == '1') {
    elMessage.value = "确定启用该变电站吗？"
  }
  ElMessageBox.confirm(elMessage.value, "提示信息", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      let params = {
        isvaild: row.isvaild,
        id: row.id,
      };

      deptIsVaild(params).then((res: any) => {
        if (res.code == 0) {
          getData();
          ElMessage({
            type: "success",
            message: "改变成功",
          });
        }

      });

    })
    .catch(() => {
      getData();
    });
}
//新建企业
function causeAdd() {
  title.value = "新增区域";
  info.value = {
    orgcode: '',
    orgname: '',
    parentid: '',
    voltLevel: '',
    manager: '',
    isvaild: '1',
    description: '',
    nodeIp: '',
    nodeId: '',
    cityName: '',
    provinceName: '',
    companyName: '',
    address: '',
    contactPhone: '',
    contactPerson: '',
    stationType: '',
    isStationFlag: '0',
  };
  dialogVisible.value = true;
  info.value.orgtype = '1';

}
//新键企业-保存
function editisrepetition(formEl: any) {
  info.value.custom1 = iconall.value
  formEl.validate((valid: any) => {
    if (valid) {
      if (info.value.id) {
        if (info.value.contactPhone.indexOf('****') != -1) {
          delete info.value.contactPhone;
        }
        updataTreelist(info.value).then((res: any) => {
          if (res.code == 0) {
            getTree();
            ElMessage({
              message: "修改成功",
              type: "success",
            });
          }

        });
      } else {
        addTreelist(info.value).then((res: any) => {
          if (res.code == 0) {
            getTree();
            ElMessage({
              message: "新建成功",
              type: "success",
            });
          }

        });
      }
      dialogVisible.value = false;
    }
  });
}
//关闭弹窗
function handleClose() {
  if (infoForm.value != null) infoForm.value.resetFields();
  dialogVisible.value = false;
}

//修改企业
function edittree(data: any) {
  title.value = "修改区域 ";
  info.value.orgtype = '1'
  info.value = JSON.parse(JSON.stringify(data));
  dialogVisible.value = true;
}
function remove(data: any) {
  choosetreeid.value = "";
  choosetreeid.value = data.id;
  ElMessageBox.confirm("确定删除该区域及该区域下的所有变电站吗？", "删除提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    let params = {
      id: data.id,
    };
    delTreelist(params).then((res: any) => {
      if (res.code == '0') {
        getTree();
        ElMessage({
          message: "删除成功",
          type: "success",
        });
      }

    });

  });
}

//点击搜索
function searchOrganizations() {
  if (querystr.value == "") {
    getData();
  } else {
    querystr.value = querystr.value.replace(/\s+/g, "");
    let params = {
      orgName: querystr.value,
      id: checkedtreeid.value,
    };
    gettableData(params).then((res) => {
      tableData.value = res.data;
    });
  }
}
//获取区域信息进行变电站信息回显
function getareainfo() {
  const params = {
    id: checkedtreeid.value
  }
  getAreaInfo(params).then((res: any) => {
    res.data.description = ''
    res.data.id = ''
    res.data.isvaild = '1'
    res.data.lastmodifier = ''
    res.data.lastmodifydate = ''
    res.data.orgcode = ''
    res.data.orgname = ''
    res.data.orgtype = '2'
    res.data.parentid = checkedtreeid.value
    res.data.nodeIp = ''
    res.data.nodeId = ''
    res.data.manager = ''
    res.data.contactPerson = ''
    res.data.address = ''
    res.data.contactPhone = ''
    res.data.coordinate = ''
    res.data.isStationFlag = '0'
    info.value = res.data
    info.value.id = undefined
  })
}
//获取变电站type
const stationType: any = ref([])
function getStationType() {
  const params = {
    dictcode: 'stationType'
  }
  getDeviceByType(params).then((res: any) => {
    stationType.value = res.data
  })
}
//新建部门
function addClick() {
  iconall.value = ''
  title.value = "新增变电站";
  getStationType()
  dialogVisible.value = true;
  getareainfo()

}
//修改部门
function editdepartment(row: any) {
  iconall.value = row.images
  getStationType()
  title.value = "修改变电站";
  info.value.orgtype = '2'
  const elrow = JSON.parse(JSON.stringify(row));
  info.value = elrow
  dialogVisible.value = true;
}
//删除部门
function deldepartment(row: any) {
  ElMessageBox.confirm("确定删除此变电站吗?", "删除提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    let params = {
      id: row.id,
    };
    delTreelist(params).then((res: any) => {
      if (res.code == '0') {
        getTree();
        ElMessage({
          message: "删除成功",
          type: "success",
        });
      }

    });
  });
}
// 多选删除部门
function delClick() {
  ElMessageBox.confirm("确定删除已选择的变电站吗?", "删除提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    let id = [] as any[];
    multipleSelection.value.forEach((item: any) => {
      id.push(item.id)
    })
    let params = {
      id: id.join(','),
    };
    delTreelist(params).then((res: any) => {
      if (res.code == '0') {
        getTree();
        ElMessage({
          message: "删除成功",
          type: "success",
        });
      }

    });
  });
}
function dateFormat(row: any) {
  const daterc = row;
  if (daterc != null) {
    var date = new Date(daterc);
    var year = date.getFullYear();
    var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
    date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
    var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
    var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
    // 拼接
    return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
  }
}
function fileClick() {
  const avatar = document.getElementById('avatar');
  avatar?.click();
}
const iconall = ref('')
function changeFile(e: any) {
  const files = new FormData()
  files.append('image', e.target.files[0])
  uploadIcon(files).then((res: any) => {
    if (res.code == 0) {
      iconall.value = res.data
      ElMessage({
        type: 'success',
        message: '上传成功',
      })
    }
    var file: any = document.getElementById('avatar');
    file.value = '';
  })
}
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 control = ref(false)
const inputTrue = ref(false)
const password = ref()
function inImg() {
  control.value = true
  password.value = ''
}
function secondPass() {
  organization({ type: 2, id: info.value.id, password: encrypt(password.value) }).then((res: any) => {
    if (res.code == '0') {
      info.value.contactPhone = res.data
      inputTrue.value = false
      control.value = false
    }
    if (res.msg == '密码输入错误') {
      inputTrue.value = true
    } else {
      inputTrue.value = false
    }
  })
}
function inputCLOse() {
  control.value = false
  inputTrue.value = false
}
</script>

<template>
  <div style="padding: 15px 15px 0px; ">
    <div class="faulttemplate-box">
      <aside id="silderLeft">
        <!-- <div v-hasPerm="['add:org']" class="p-[15px]"><el-button  class="w-full searchButton buttonhover"
            :disabled="treedata.length > 1 || treedata.length == 1"
            style="color: #009bff; border: 1px solid #0a64a0;background-color: #123958;" @click="causeAdd">
            新增区域</el-button></div> -->
        <el-tree :class="useAppStore().size === 'default' ? 'silderLeft-large' : 'silderLeft-default'"
          v-loading="treeloading" ref="treeRef" node-key="id" :data="treedata" :highlight-current="true"
          :props="defaultProps" @node-click="handleNodeClick"
          style="height: calc(88vh); overflow: auto;margin-top: 15px;">
          <template #default="{ node, data }">
            <span class="custom-tree-node">
              <span>{{ node.label }}</span>
              <span style="font-size: 16px;color: #009bff;">
                <el-icon v-hasPerm="['update:org']" class="treeediticon" title="修改" @click.stop="edittree(data)">
                  <EditPen />
                </el-icon>
                <!-- <el-icon v-hasPerm="['del:org']" class="treedelicon" title="删除" @click="() => remove(data)">
                  <Delete />
                </el-icon> -->
              </span>
            </span>
          </template>
        </el-tree>
        <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>
              <el-input v-model="querystr" placeholder="请输入变电站名称" clearable style="width: 200px;"
                @clear="searchOrganizations" @keyup.enter="searchOrganizations" />
              <el-button class="searchButton" type="primary" style="margin-left: 10px;" @click="searchOrganizations"
                v-preventReClick>搜索</el-button>
            </div>
            <div class="left-nav">
              <el-button class="searchButton" v-hasPerm="['add:org']" type="primary" @click="addClick"> 新增</el-button>
              <el-button class="searchButton" v-hasPerm="['del:org']" :disabled="multipleSelection.length <= 0"
                :type="multipleSelection.length > 0 ? 'primary' : ''" @click="delClick"> 删除</el-button>
            </div>
          </el-col>
        </el-row>
        <el-table v-loading="loading" :data="tableData" style="width: 100%; margin-bottom: 20px" row-key="id"
          @selection-change="handleSelectionChange" default-expand-all :row-class-name="tableRowClassName"
          :header-cell-style="{ background: '#002b6a', color: '#B5D7FF', height: '50px'}">
          <el-table-column type="selection" width="30" align="center" />
          <el-table-column prop="orgcode" label="变电站编号"></el-table-column>
          <el-table-column prop="orgname" label="变电站名称" ></el-table-column>
          <el-table-column prop="nodeIp" label="节点Ip" width="160"></el-table-column>
          <el-table-column prop="contactPhone" label="电话" width="160"></el-table-column>
          <el-table-column prop="address" label="地址"></el-table-column>
          <el-table-column prop="stationType" label="类别" min-width="100"></el-table-column>
          <el-table-column prop="isvaild" label="状态" align="center" width="120">
            <template #default="scope">
              <el-switch v-model="scope.row.isvaild" active-value="1" inactive-value="0" @change="switchChange(scope.row)"
                style="margin-right: 4px"></el-switch>
              <span v-if="scope.row.isvaild == 1" style="color: #009bff">启用</span>
              <span v-else style="color: #d7d7d7">停用</span>
            </template>
          </el-table-column>

          <el-table-column fixed="right" label="操作" width="80">
            <template #default="scope">
              <span
                style="display: flex;display: -webkit-flex;justify-content: space-around; -webkit-justify-content: space-around; ">
                <img v-hasPerm="['update:org']" src="@/assets/newimg/ht_xg.png" title="修改" style="cursor: pointer;"
                  @click="editdepartment(scope.row)">
                <!-- <img v-hasPerm="['del:org']" src="@/assets/MenuIcon/lbcz_sc.png" title="删除" style="cursor: pointer;"
                @click="deldepartment(scope.row)"> -->
                <img v-hasPerm="['del:substation']" src="@/assets/newimg/ht_sc.png" alt="" v-if="scope.row.isvaild == 0"
                  title="删除" @click="deldepartment(scope.row)" style="cursor: pointer; ">
                <img v-hasPerm="['del:substation']" src="@/assets/newimg/ht_sc1.png" alt=""
                  v-else-if="scope.row.isvaild != 0" title="删除" style="cursor: pointer; ">
              </span>
            </template>
          </el-table-column>
        </el-table>
      </main>

      <!-- 区域/变电站 弹框-->
      <Eldialog v-if="dialogVisible" :title="title" :zIndex="2000" :width="'1175px'" :height="'600px'"
        @before-close="handleClose">
        <template v-slot:PopFrameContent>
          <el-form :model="info" label-width="90px" style="display: flex; flex-wrap: wrap; margin: 15px 5px 5px -12px;"
            :rules="rules" ref="infoForm">
            <el-form-item :label="info.orgtype == 1 ? '区域名称' : '变电站名称'" style="width:50%" prop="orgname">
              <el-input v-model="info.orgname" style="width: 95%;margin-left: 8px;" :disabled="info.id != undefined"
                :placeholder="info.orgtype == 1 ? '请输入区域名称' : '请输入变电站名称'"></el-input>
            </el-form-item>
            <el-form-item :label="info.orgtype == 1 ? '区域编号' : '变电站编号'" style="width:50%" prop="orgcode">
              <el-input v-model="info.orgcode" style="width: 95%;margin-left: 8px; " :disabled="info.id != undefined"
                :placeholder="info.orgtype == 1 ? '请输入区域编号' : '请输入变电站编号'"></el-input>
            </el-form-item>
            <el-form-item label="负责人" style="width:50%">
              <el-input v-model="info.manager" style="width: 95%;margin-left: 8px;" placeholder="请输入负责人"></el-input>
            </el-form-item>
            <!-- <el-form-item label="是否显示" style="width:50%">
            <el-radio-group v-model="info.isvaild" style="margin-left: 10px;">
              <el-radio :label="'1'">是</el-radio>
              <el-radio :label="'0'">否</el-radio>
            </el-radio-group>
            </el-form-item> -->

            <el-form-item :label="info.orgtype == 1 ? '区域节点IP' : '变电站节点IP'" prop="nodeIp" style="width:50%">
              <el-input v-model="info.nodeIp" style="width: 95%;margin-left: 8px;"
                :placeholder="info.orgtype == 1 ? '请输入区域节点IP' : '请输入变电站节点IP'"></el-input>
            </el-form-item>
            <el-form-item :label="info.orgtype == 1 ? '区域节点ID' : '变电站节点ID'" style="width:50%">
              <el-input v-model="info.nodeId" style="width: 95%;margin-left: 8px;"
                :placeholder="info.orgtype == 1 ? '请输入区域节点ID' : '请输入变电站节点ID'"></el-input>
            </el-form-item>
            <el-form-item v-if="info.orgtype == 2" label="电压等级" style="width:50%">
              <el-input v-model="info.voltLevel" style="width: 95%;margin-left: 8px;" placeholder="请输入电压等级"></el-input>
            </el-form-item>
            <el-form-item label="所属省份" style="width:50%" prop="provinceName">
              <el-input v-model="info.provinceName" style="width: 95%;margin-left: 8px;" placeholder="请输入所属省份"></el-input>
            </el-form-item>
            <el-form-item label="所属地市" style="width:50%" prop="cityName">
              <el-input v-model="info.cityName" style="width: 95%;margin-left: 8px;" placeholder="请输入所属地市"></el-input>
            </el-form-item>
            <el-form-item label="公司名称" style="width:50%">
              <el-input v-model="info.companyName" style="width: 95%;margin-left: 8px;" placeholder="请输入公司名称"></el-input>
            </el-form-item>
            <el-form-item label="联系人" style="width:50%">
              <el-input v-model="info.contactPerson" style="width: 95%;margin-left: 8px;" placeholder="请输入联系人"></el-input>
            </el-form-item>
            <el-form-item label="地址" style="width:50%">
              <el-input v-model="info.address" style="width: 95%;margin-left: 8px;" placeholder="请输入地址"></el-input>
            </el-form-item>
            <el-form-item label="经纬度" v-if="info.orgtype == 2" style="width:50%">
              <el-input v-model="info.coordinate" style="width: 95%;margin-left: 8px;" placeholder="请输入经纬度"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" style="width:50%" prop="contactPhone">
              <el-input v-model="info.contactPhone" style="width: 95%;margin-left: 8px;" placeholder="请输入联系电话"  clearable>
                <template #append v-if="info.id && info.contactPhone"><img src="@/assets/newimg/xsjk_ckxq.png" alt=""
                    title="查看电话" class="looknum" @click="inImg()"></template>
              </el-input>
            </el-form-item>
            <el-form-item label="变电站类别" v-if="info.orgtype == 2" style="width:50%" prop="stationType">
              <!-- <el-input v-model="info.stationType" style="width: 100%;margin-left: 8px;" placeholder="请输入变电站类别"></el-input> -->
              <el-select v-model="info.stationType" clearable placeholder="请选择变电站类别" style="width:95%;margin-left: 10px;">
                <el-option v-for="item in stationType" :key="item.id" :label="item.dictname" :value="item.itemcode" />
              </el-select>
            </el-form-item>
            <el-form-item v-if="info.orgtype == 2" label="是否边缘节点" style="width:50%">
              <el-radio-group v-model="info.isStationFlag" style="margin-left: 10px;">
                <el-radio :label="'1'">是</el-radio>
                <el-radio :label="'0'">否</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item :label="info.orgtype == 1 ? '区域介绍' : '变电站介绍'" style="width:100%">
              <el-input v-model="info.description" style="width: 98%;margin-left: 8px;" :rows="2" type="textarea"
                :placeholder="info.orgtype == 1 ? '请输入区域介绍' : '请输入变电站介绍'"></el-input>
            </el-form-item>
            <el-form-item v-if="info.orgtype != 1" label="变电站图片" style="width:100%">
              <div v-if="iconall" style="position: relative;">
                <img :src="url + '/station/' + iconall" @click="fileClick()" alt=""
                  style="width: 100px;height: 100px;cursor: pointer;  border-radius: 5px;  margin-left: 8px; overflow: hidden;">
                <div
                  style="position: absolute;background: rgba(8, 8, 8, 0.116);width: 20px;height: 20px;top: 0px;right: 0px;overflow: hidden;display: flex;align-items: center;justify-content: center;cursor: pointer;">
                  <img src="@/assets/MenuIcon/u1151.png" alt="">
                  <el-image style="position: absolute;width:100%;height:100%; opacity: 0;"
                    :src="url + '/station/' + iconall" :zoom-rate="1.2" :preview-src-list="[url + '/station/' + iconall]"
                    :preview-teleported="true" fit="cover" />
                </div>
              </div>
              <div v-else class="imgshow avatar" @click="fileClick()">
                <img src="@/assets/newimg/ba6072092fa8d816aa2fa936d44c858.png" alt="">
              </div>
              <input type="file" id="avatar" style="display:none" @change="changeFile">
            </el-form-item>
          </el-form>
          <span class="dialog-footer">
            <div class="details-button" @click="handleClose">取消</div>
            <div class="details-button" @click="editisrepetition(infoForm)">确定</div>
          </span>
        </template>
      </Eldialog>
      <Eldialog v-if="control" :title="'二次密码验证'" :zIndex="2000" :width="'400px'" @before-close="inputCLOse">
        <template v-slot:PopFrameContent>
          <div style="width: 100%;display: flex;justify-content: center;">
            <el-input v-model="password" placeholder="请输入账号密码" style="margin-top:20px;width: 350px;"
            type="password" show-password />
          </div>
          
          <div style="height:19px">
            <div v-if="inputTrue" style="color:red;">密码错误，请重新输入</div>
          </div>
          <span class="dialog-footer"
            style="display: flex;display: -webkit-flex; justify-content: center;-webkit-justify-content: center;margin-top: 1px;">
            <div class="details-button" @click="inputCLOse">取消</div>
            <div class="details-button" @click="secondPass">确定</div>
          </span>
        </template>
      </Eldialog>
      <!-- <el-dialog v-model="dialogVisible" :close-on-click-modal="false" :before-close="handleClose" :title="title"
        append-to-body width="1175px" draggable>
        <div>
         

        </div>
      </el-dialog> -->
    </div>
  </div>
</template>
<style scoped  lang="scss">
.imgshow {
  border: 1px dashed #225b7e;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  margin-left: 8px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.imgshow:hover {
  border: 1px dashed #009BFF;
  width: 100px;
  height: 100px;
  border-radius: 5px;
  margin-left: 8px;
  cursor: pointer;
}

.looknum {
  cursor: pointer;
}

.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: #f2f4f900;
}

#silderLeft {
  width: 300px;
  box-sizing: border-box;
  border-radius: 3px;
  position: relative;
  background: url(@/assets/navigation/ty_260x988.png);
  background-size: 100% 100%;
  height: calc(90vh);

  &:hover {
    .moveBtn {
      opacity: 1;
    }
  }
}

.buttonhover:hover {
  background-color: #e4f3f000 !important;
}

/* 拖动条 */
.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;
}

.dialog-footer {
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  -webkit-justify-content: center;
  margin-bottom: 10px;
}

.silderRight {
  flex: 1;
  position: relative;
  width: 100%;
  overflow: auto;
  border-radius: 3px;
  padding: 15px;
  padding-bottom: 0px;
  margin-left: 15px;
  box-sizing: border-box;
}
:deep(.el-table:not(.el-table--border) .el-table__cell) {
  border: none;
  color: #fff;
}


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

:deep(.el-tree) {
  background-color: #ffffff00 !important;
  --el-tree-node-hover-bg-color: #0099ff09;
}

:deep(.el-input) {
  --el-input-bg-color: #ffffff00 !important;
}

.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: #009bff !important;
  }

  .is-current .treedelicon {
    color: #009bff !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;
}

:deep(.el-form-item__error) {
  margin-left: 15px;
}

:deep(.el-form-item--default .el-form-item__label) {
  width: 100px !important;
}

:deep(.el-input-group__append) {
  background: #ffffff00 !important;
}

:deep(.el-button:focus) {
  background-color: #ffffff00;
}
</style>
