<template>
  <div class="pd10">
    <!-- 主页面 -->
    <div v-if="flag" v-loading="isLoading" element-loading-text="数据加载中">
      <el-form :inline="true" class="demo-form-inline" style="float: right">
        <el-form-item>
          <!-- <el-tag type="info" class="el-icon-edit">自检</el-tag> -->
          <el-button
            type="primary"
            icon="el-icon-setting"
            class="ml10"
            @click="detailFn"
            >变压器台账配置</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-circle-plus"
            @click="strategyAdd"
            >新增策略</el-button
          >
          <el-button type="primary" icon="el-icon-download" @click="exportEvent"
            >导出</el-button
          >
        </el-form-item>
      </el-form>
      <div style="clear: both"></div>
      <vxe-table
        stripe
        size="mini"
        ref="transformerStrategy"
        :row-config="{ isCurrent: true, isHover: true }"
        :data="strategyData"
        :height="vh"
        border
        style="width: 100%"
        header-cell-class-name="table_header"
        highlight-current-row
      >
        <vxe-table-column
          field="tpName"
          title="变压器策略名称"
          align="center"
        ></vxe-table-column>
        <vxe-table-column
          field="updateTime"
          title="更新时间"
          align="center"
        ></vxe-table-column>
        <vxe-table-column
          field="tfDescribe"
          title="变压器策略描述"
          align="center"
        ></vxe-table-column>
        <vxe-table-column title="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              class="el-icon-edit"
              @click="strategyModify(scope.row)"
              >修改</el-button
            >
            <el-button
              type="danger"
              size="mini"
              class="el-icon-delete"
              @click="deleteFlgPloy(scope.row)"
              >删除</el-button
            >
          </template>
        </vxe-table-column>
      </vxe-table>
      <el-pagination
        background
        align="right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formData.pageNum"
        :page-sizes="[20, 30, 50, 100]"
        :page-size="formData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="strategyTotal"
        class="mt10"
      >
      </el-pagination>
    </div>
    <!-- 变压器台账配置 -->
    <div v-if="detailFlag" v-loading="isLoading2" element-loading-text="数据加载中">
      <div class="BOX">
        变压器台账配置
        <el-button style="position: absolute;right: 10px" type="primary" @click="detailBack" icon="el-icon-refresh-left" 
          >返回</el-button
        >
      </div>
      <el-row>
        <el-col :span="4">
          <div style="margin: 10px; border-right: 1px solid">
            <el-form :inline="true" label-width="90px" class="">
              <el-form-item>
                <el-input style="width: 180px;"
                  placeholder="输入关键字检索"
                  v-model="filterText"
                  clearable
                >
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  @click="clickFn"
                  type="primary"
                  icon="el-icon-search"
                >搜索</el-button>
              </el-form-item>
            </el-form>
            <div style="overflow-y: auto" class="xiaoshou">
              <el-tree 
                class="filter-tree xiaoshou"
                v-loading="loading"
                element-loading-text="数据加载中"
                :style="'height:' + vh2 + 'px'"
                :data="treeMenuData"
                :props="{ children: 'children', label: 'name' }"
                :expand-on-click-node="false"
                :highlight-current="true"
                default-expand-all
                :filter-node-method="filterNode"
                @node-click="handleNodeClick1"
                ref="menuTree"
                node-key="id"
              >
                <span class="span-ellipsis" slot-scope="{ node, data }">
                  <i :class="data.icon"></i>
                  <span class="title" :title="node.label">{{
                    node.label
                  }}</span>
                </span>
              </el-tree>
            </div>
          </div>
        </el-col>
        <el-col :span="20">
          <div class="mt10">
            <el-form
              :inline="true"
              class="demo-form-inline"
              style="float: right"
            >
              <span style="font-size: 14px; line-height: 40px; color: red"
                >所选变电站:<span style="color: black">{{
                  subName
                }}</span></span
              >
              <el-form-item>
                <el-button
                  type="primary"
                  icon="el-icon-circle-plus"
                  @click="transformerAdd"
                  >新增变压器信息</el-button
                >
                <el-button
                  type="primary"
                  icon="el-icon-download"
                  @click="exportEvent1"
                  >导出</el-button
                >
              </el-form-item>
            </el-form>
            <div style="clear: both"></div>
            <vxe-table
              stripe
              size="mini"
              ref="transformer"
              :row-config="{ isCurrent: true, isHover: true }"
              :data="transformerData"
              :height="vh3"
              border
              style="width: 100%"
              header-cell-class-name="table_header"
              highlight-current-row
            >
              <vxe-table-column
                field="tfName"
                title="变压器名称"
                align="center"
              ></vxe-table-column>
              <vxe-table-column
                field="subIndexName"
                title="变电站"
                align="center"
              ></vxe-table-column>
              <vxe-table-column
                field="wiring"
                title="接线方式"
                align="center"
                :formatter="formFilter"
              ></vxe-table-column>
              <vxe-table-column
                field="updateBy"
                title="更新人"
                align="center"
              ></vxe-table-column>
              <vxe-table-column
                field="updateTime"
                title="更新时间"
                align="center"
              ></vxe-table-column>
              <vxe-table-column
                field="tfDescribe"
                title="描述"
                align="center"
              ></vxe-table-column>
              <vxe-table-column title="操作" align="center" width="280">
                <template slot-scope="scope">
                  <el-button
                    type="primary"
                    size="mini"
                    class="el-icon-share"
                    @click="maintenance(scope.row)"
                    >节点维护</el-button
                  >
                  <el-button
                    type="primary"
                    size="mini"
                    class="el-icon-edit"
                    @click="transformerModify(scope.row)"
                    >修改</el-button
                  >
                  <el-button
                    type="danger"
                    size="mini"
                    class="el-icon-delete"
                    @click="deleteTransformer(scope.row)"
                    >删除</el-button
                  >
                </template>
              </vxe-table-column>
            </vxe-table>
            <el-pagination
              background
              align="right"
              @size-change="handleSizeChange1"
              @current-change="handleCurrentChange1"
              :current-page="formData.pageNum"
              :page-sizes="[20, 30, 50, 100]"
              :page-size="formData.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              class="mt10"
            >
            </el-pagination>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 策略新增/修改 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="title"
      class="eldialot"
      :visible.sync="strategyInformation"
      width="35%"
      height="80%"
    >
      <el-row :gutter="20" v-loading="isLoading1" element-loading-text="数据加载中">
        <el-col :span="10">
          <div style="margin: 10px; overflow-y: auto; border-right: 1px solid" class="xiaoshou">
            <el-tree style="cursor: pointer;"
              :data="treeMenuData"
              v-loading="loading"
              element-loading-text="数据加载中"
              :style="'height:' + vh1 + 'px'"
              show-checkbox
              node-key="id"
              ref="menuTree"
              highlight-current
              :expand-on-click-node="true"
              default-expand-all
              :props="{ children: 'children', label: 'name' }"
              @check="check"
              @node-click="handleNodeClick"
            >
              <span class="span-ellipsis" slot-scope="{ node, data }">
                <i :class="data.icon"></i>
                <span class="title" :title="node.label">{{ node.label }}</span>
              </span>
            </el-tree>
          </div>
        </el-col>
        <el-col :span="14">
          <div class="box">
            <el-form ref="form" :model="form" label-width="100px">
              <el-form-item label="名称:">
                <el-input v-model="form.tpName" placeholder="请输入"></el-input>
              </el-form-item>
              <el-form-item label="描述:" class="mt20">
                <el-input
                  v-model="form.tfDescribe"
                  placeholder="请输入"
                ></el-input>
              </el-form-item>
              <el-form-item class="mt20 ml20">
                <el-button @click="strategyInformation = false">取消</el-button>
                <el-button
                  v-if="title == '新增策略信息' ? true : false"
                  type="primary"
                  @click="addSubmit"
                  >确 定</el-button
                >
               
              
                <el-button
                  v-if="title == '修改策略信息' ? true : false"
                  type="primary"
                  @click="modifySubmit"
                  >确 定</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 变压器信息新增/修改 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="transformerTitle"
      :visible.sync="transformerInformation"
      width="30%"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"

      >
        <el-form-item label="变压器名:" prop="tfName" >
          <el-input
            v-model="ruleForm.tfName"
            placeholder="请输入"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="接线方式:" prop="wiring" class="top">
          <el-select style="width:100%"
            v-model="ruleForm.wiring"
            clearable
            placeholder="请选择接线方式"
          >
            <el-option
              v-for="item in connectionType"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述:"  class="top">
          <el-input
            v-model="ruleForm.tfDescribe"
            placeholder="请输入"
            clearable
            type="textarea"
            :rows="2"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        
        <el-button  @click="transformerInformation = false"
          >取 消</el-button
        >
        <el-button
          v-if="transformerTitle == '新增变压器信息' ? true : false"
          type="primary"
          @click="addTransformer"
          >提交</el-button
        >
        <el-button
          v-if="transformerTitle == '修改变压器信息' ? true : false"
          type="primary"
          @click="modifytransformer"
          >提交</el-button
        >
      </span>
    </el-dialog>
    <!-- 节点维护 -->
    <el-dialog
      :close-on-click-modal="false"
      :title="maintenanceTitle"
      :visible.sync="nodemaintenanceInformation"
      width="60%"
     
    >
      <el-row :gutter="20" v-loading="isLoading3" element-loading-text="数据加载中">
        <el-col :span="8">
          <div style="border-right: 1px solid" class="xiaoshou">
            <div style="overflow-y: auto" class="tree mr10 xiaoshou" >
              <el-input
                  placeholder="输入关键字检索"
                  v-model="filterText1"
                  clearable
                >
                </el-input>
              <el-tree  style="cursor: pointer;"
                :data="treeMenuLeftData"
                v-loading="loading"
                element-loading-text="数据加载中"
                :style="'height:' + vh1 + 'px'"
                show-checkbox
                node-key="id"
                ref="menuTreeLeft"
                highlight-current
                :check-strictly="true"
                :expand-on-click-node="true"
                default-expand-all
                :filter-node-method="filterNode"
                :props="{ children: 'children', label: 'name' }"
                @check="checkLeft"
                @node-click="handleNodeClick"
              >
                <span class="span-ellipsis" slot-scope="{ node, data }">
                  <i :class="data.icon"></i>
                  <span class="title" :title="node.label">{{
                    node.label
                  }}</span>
                </span>
              </el-tree>
            </div>
          </div>
        </el-col>
        <el-col :span="8">
          <el-form :model="messageInfo" label-width="90px">
            <el-form-item label="变压器名称:" >
              <el-input
                disabled
                v-model="messageInfo.tfName"
                placeholder="变压器名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="变电站:" class="top">
              <el-input
                disabled
                v-model="messageInfo.subIndexName"
                placeholder="变电站"
              ></el-input>
            </el-form-item>
            <el-form-item label="接线方式:" class="top">
              <el-input
                disabled
                v-model="messageInfo.wiring"
                placeholder="接线方式"
              ></el-input>
            </el-form-item>
            <el-form-item label="更新人:" class="top">
              <el-input
                disabled
                v-model="messageInfo.updateBy"
                placeholder="更新人"
              ></el-input>
            </el-form-item>
            <el-form-item label="更新时间:" class="top">
              <el-input
                disabled
                v-model="messageInfo.updateTime"
                placeholder="更新时间"
              ></el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="8">
          <div style="border-left: 1px solid" class="xiaoshou">
            <div style="overflow-y: auto" class="ml10 tree xiaoshou">
              <el-input
                  placeholder="输入关键字检索"
                  v-model="filterText2"
                  clearable
                >
                </el-input>
              <el-tree style="cursor: pointer;"
                :data="treeMenuRightData"
                v-loading="loading"
                element-loading-text="数据加载中"
                :style="'height:' + vh1 + 'px'"
                show-checkbox
                node-key="id"
                ref="menuTreeRight"
                :check-strictly="true"
                highlight-current
                :expand-on-click-node="true"
                default-expand-all
                :filter-node-method="filterNode"
                :props="{ children: 'children', label: 'name' }"
                @check="checkRight"
                @node-click="handleNodeClick"
              >
                <span class="span-ellipsis" slot-scope="{ node, data }">
                  <i :class="data.icon"></i>
                  <span class="title" :title="node.label">{{
                    node.label
                  }}</span>
                </span>
              </el-tree>
            </div>
          </div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
       
        <el-button  @click="nodemaintenanceInformation = false"
          >取 消</el-button
        >
        <el-button type="primary" @click="maintenanceOnsubmit">提交</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import api from "@/api/transformerStrategy/transformerStrategy";
import { dicData } from "@/assets/commjs/dictypeData";
export default {
  data() {
    return {
      flag: true,
      detailFlag: false,
      strategyInformation: false,
      transformerInformation: false,
      nodemaintenanceInformation: false,
      isLoading: false,
      isLoading1: false,
      isLoading2: false,
      isLoading3: false,
      ExpandedNum: 2,
      loading: false,
      zoom: "", //图表焦点校验
      title: "",
      transformerTitle: "",
      maintenanceTitle: "",
      vh: undefined,
      vh1: undefined,
      vh2: undefined,
      vh3: undefined,
      messageInfo: {},
      formData: {
        pageNum: 1,
        pageSize: 20,
      },
      formData1: {
        pageNum: 1,
        pageSize: 20,
        searchValue: "",
      },
      parentId: "",
      form: {
        tpName: "",
        tfDescribe: "",
        tpIndex: "",
        tfIndexs: [],
      },
      ruleForm: {
        tfName: "",
        wiring: "",
        subIndex: "",
        tfDescribe: "",
      },
      formLine: {
        upNode: "",
        downNode: "",
      },
      maintenanceData: {
        downNode: "",
        upNode: "",
        tfIndex: "",
      },
      bind: "",
      bindLevel: "",
      total: null,
      strategyTotal: null,
      strategyData: [],
      transformerData: [],
      treeMenuData: [],
      treeMenuLeftData: [],
      treeMenuRightData: [],
      filterText: "",
      filterText1: "",
      filterText2: "",
      subName: "",
      connectionType: [], //接线方式
      options: [],
      rules: {
        tfName: [
          { required: true, message: "请输入变压器名", trigger: "blur" },
        ],
        wiring: [
          { required: true, message: "请选择接线方式", trigger: "change" },
        ],
      },
    };
  },
  created() {
    this.getclassificationData();
  },
  mounted() {
    this.setHeight()
        window.addEventListener('resize', this.setHeight)
    this.onSubmit();
  },
  beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
          this.vh = window.sessionStorage.getItem("appheight") - 95;
    this.vh1 = window.sessionStorage.getItem("appheight") / 2 - 115;
    this.vh2 = window.sessionStorage.getItem("appheight") - 110;
    this.vh3 = window.sessionStorage.getItem("appheight") - 148;
          
        },
    //获取类型
    getclassificationData() {
      //接线方式
      this.connectionType = dicData("Dev_Connect", []);
    },
    getTree() {
      this.isLoading1 = true
      api.getTransformerTree().then((res) => {
        this.treeMenuData = res.data;
        this.isLoading1 = false;
      });
    },
    //查询
    onSubmit() {
      this.isLoading = true
      api.flgployPage(this.formData).then((res) => {
        this.strategyData = res.data.records;
        this.strategyTotal = res.data.total;
        this.isLoading = false;
      });
    },
    //导出
    exportEvent() {
      api.flgployPage(this.formData).then((res) => {
        this.$refs.transformerStrategy.exportData({
          filename: "export", // 文件名字
          sheetName: "Sheet1",
          type: "xlsx", //导出文件类型 xlsx 和 csv
          useStyle: true,
          data: res.data.records, // 数据源 // 过滤那个字段导出
          // columnFilterMethod: function (column, $columnIndex) {
          //   return !(column.$columnIndex === 0);
          // },
        });
      });
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      this.formData.pageSize = val;
      this.onSubmit();
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      this.formData.pageNum = val;
      this.onSubmit();
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange1(val) {
      this.formData1.pageSize = val;
      this.transformerQuery();
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange1(val) {
      this.formData1.pageNum = val;
      this.transformerQuery();
    },
    //策略新增
    strategyAdd() {
      this.title = "新增策略信息";
      // this.$refs.menuTree.setCheckedKeys([]);
      this.form = {
        tpName: "",
        tfDescribe: "",
        tfIndexs: [],
      };
      this.strategyInformation = true;
      this.getTree();
    },
    //新增确定
    addSubmit() {
      this.$confirm("是否确认新增?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          api.insertFlgPloy(this.form).then((res) => {
            if (res.code == "A0000") {
              this.$message({
                type: "success",
                message: res.message,
              });
            }
            this.onSubmit();
            this.strategyInformation = false;
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消新增",
          });
        });
    },
    //修改策略
    strategyModify(val) {
      this.title = "修改策略信息";
      this.strategyInformation = true;
      this.form.tpName = val.tpName;
      this.form.tfDescribe = val.tfDescribe;
      this.form.tpIndex = val.tpIndex;
      this.getTree();
      let form = {
        id: val.tpIndex,
      };
      api.getFlgPloyInfo(form).then((res) => {
        this.$refs.menuTree.setCheckedKeys(res.data.tfIndexs);
        this.form.tfIndexs = res.data.tfIndexs;
      });
      // console.log(this.form);
    },
    //修改确定
    modifySubmit() {
      this.$confirm("是否确认修改?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          api.updateFlgPloy(this.form).then((res) => {
            if (res.code == "A0000") {
              this.$message({
                type: "success",
                message: res.message,
              });
            }
            this.onSubmit();
            this.strategyInformation = false;
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消修改",
          });
        });
    },
    //删除
    deleteFlgPloy(val) {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let form = {
            ids: val.tpIndex,
          };
          api.delFlgPloy(form).then((res) => {
            if ((res.code == "A0000")) {
              this.$message({
                type: "success",
                message: res.message,
              });
            }
            this.onSubmit();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //变压器查询
    transformerQuery() {
      this.isLoading2 = true
      api.transformerPage(this.formData1).then((res) => {
        if (res.code == "A0000") {
          this.transformerData = res.data.records;
          this.total = res.data.total;
          this.isLoading2 = false
        }
      });
    },
    //导出
    exportEvent1() {
      api.transformerPage(this.formData1).then((res) => {
        this.$refs.transformer.exportData({
          filename: "export", // 文件名字
          sheetName: "Sheet1",
          type: "xlsx", //导出文件类型 xlsx 和 csv
          useStyle: true,
          data: res.data.records, // 数据源 // 过滤那个字段导出
          // columnFilterMethod: function (column, $columnIndex) {
          //   return !(column.$columnIndex === 0);
          // },
        });
      });
    },
    // 数据过滤
    formFilter(row, column) {
      if (row.column.property == "wiring") {
        let title = "";
        this.connectionType.forEach((item) => {
          if (item.value == row.row.wiring) {
            title = item.label;
          }
        });
        return title;
      } else {
        return row.row[row.column.property];
      }
    },
    //变压器新增
    transformerAdd() {
      this.ruleForm.tfName = "";
      this.ruleForm.wiring = "";
      this.ruleForm.tfDescribe = "";
      if (this.subName == "") {
        this.$message({
          type: "warning",
          message: "请选择变电站",
        });
      } else {
        this.transformerTitle = "新增变压器信息";
        this.transformerInformation = true;
        this.$nextTick(() => {
          this.$refs["ruleForm"].clearValidate();
        });
      }
    },
    //变压器新增确定
    addTransformer() {
      this.$refs.ruleForm.validate((value) => {
        // console.log(value);
        if (value == true) {
          this.$confirm("是否确认新增?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              api.insertTransformer(this.ruleForm).then((res) => {
                if (res.code == "A0000") {
                  this.$message({
                    type: "success",
                    message: res.message,
                  });
                }
                this.getTree();
                this.formData1.searchValue = this.parentId;
                this.transformerQuery();
                this.transformerInformation = false;
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消新增",
              });
            });
        }
      });
    },
    //变压器修改
    transformerModify(val) {
      this.transformerTitle = "修改变压器信息";
      this.transformerInformation = true;
      this.$nextTick(() => {
        this.$refs["ruleForm"].clearValidate();
      });
      this.ruleForm = val;
    },
    //变压器修改确定
    modifytransformer() {
      this.$refs.ruleForm.validate((value) => {
        // console.log(value);
        if (value == true) {
          this.$confirm("是否确认修改?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              api.updateTransformer(this.ruleForm).then((res) => {
                if (res.code == "A0000") {
                  this.$message({
                    type: "success",
                    message: res.message,
                  });
                }
                this.getTree();
                this.formData1.searchValue = this.parentId;
                this.transformerQuery();
                this.transformerInformation = false;
              });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消修改",
              });
            });
        }
      });
    },
    //变压器台账删除
    deleteTransformer(val) {
      this.$confirm("是否确认删除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let ids = [];
          ids.push(val.tfIndex);
          api.delTransformer(ids).then((res) => {
            if ((res.code == "A0000")) {
              this.$message({
                type: "success",
                message: res.message,
              });
            }
            this.formData1.searchValue = this.parentId;
            this.transformerQuery();
            this.getTree();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //节点维护
    maintenance(val) {
      this.maintenanceTitle = "变压器节点维护";
      this.maintenanceData.upNode = ''
      this.maintenanceData.downNode = ''
      this.maintenanceData.tfIndex = val.tfIndex;
      this.isLoading3 = true
      api
        .getGeneratrix({
          id: val.tfIndex,
          subId: val.subIndex,
        })
        .then((res) => {
          this.bind = res.data.bind;
          this.treeMenuLeftData = res.data.upNode;
          this.treeMenuRightData = res.data.downNode;
          this.setDisabled(this.treeMenuRightData);
          this.setDisabled(this.treeMenuLeftData);
          this.isLoading3 = false;
          this.treeMenuLeftData[0].children.forEach((item) => {
            // console.log(item);
            item.children.forEach((item1) => {
              item1.children.forEach((item2) => {
                item2.children.forEach((item3) => {
                  if (item3.level != null) {
                    this.$refs.menuTreeLeft.setCheckedKeys([item3.id]);
                    this.maintenanceData.upNode = item3.id;
                    this.bindLevel = item3.level
                    // console.log(this.bindLevel);
                  } else {
                    // this.bindLevel = item3.level
                    // console.log(this.bindLevel);
                    // this.$refs.menuTreeLeft.setCheckedKeys([]);
                  }
                });
              });
            });
          });
          this.treeMenuRightData[0].children.forEach((item) => {
            // console.log(item);
            item.children.forEach((item1) => {
              item1.children.forEach((item2) => {
                item2.children.forEach((item3) => {
                  if (item3.level != null) {
                    this.$refs.menuTreeRight.setCheckedKeys([item3.id]);
                    this.maintenanceData.downNode = item3.id;
                  } else {
                    // this.$refs.menuTreeRight.setCheckedKeys([]);
                  }
                });
              });
            });
          });
        });
      this.messageInfo = JSON.parse(JSON.stringify(val));
      this.connectionType.forEach((item) => {
        if (this.messageInfo.wiring == item.id) {
          this.messageInfo.wiring = item.name;
        }
      });
      this.nodemaintenanceInformation = true;
    },
    //设置禁选
    setDisabled(treeData) {
      treeData.forEach((item) => {
        item.disabled = true;
        item.children.forEach((item1) => {
          item1.disabled = true;
          item1.children.forEach((item2) => {
            item2.disabled = true;
            item2.children.forEach((item3) => {
              item3.disabled = true;
            });
          });
        });
      });
    },
    //树多选
    check(checkedNodes, checkedKeys) {
      // console.log(checkedNodes, checkedKeys);
      this.form.tfIndexs = [];
      checkedKeys.checkedNodes.forEach((item) => {
        if (item.children.length == 0) {
          this.form.tfIndexs.push(item.id);
        }
      });
    },
    //上节点选择
    checkLeft(checkedNodes, checkedKeys) {
      this.maintenanceData.upNode = checkedNodes.id;
      // console.log(this.maintenanceData.upNode);
      if (this.maintenanceData.upNode == this.maintenanceData.downNode) {
        this.$refs.menuTreeRight.setCheckedKeys([]);
        this.maintenanceData.downNode=''
      }
      //
      if (checkedKeys.checkedKeys.length > 1) {
        //单选实现
        this.$refs.menuTreeLeft.setCheckedKeys([checkedNodes.id]);
      }
    },
    //下节点选择
    checkRight(checkedNodes, checkedKeys) {
      this.maintenanceData.downNode = checkedNodes.id;
      // console.log(this.maintenanceData.downNode);
      if (this.maintenanceData.downNode == this.maintenanceData.upNode) {
        this.$refs.menuTreeLeft.setCheckedKeys([]);
        this.maintenanceData.upNode=''
      }
      if (checkedKeys.checkedKeys.length > 1) {
        //单选实现
        this.$refs.menuTreeRight.setCheckedKeys([checkedNodes.id]);
      }
    },
    //节点维护提交
    maintenanceOnsubmit() {
      for (let i = 0; i < this.bind.length; i++) {
        if(this.bind[i][0] == this.maintenanceData.upNode){
          for (let j = 0; j < this.bind.length; j++){
            if(this.bind[j][1] == this.maintenanceData.downNode){
              this.$message({
                type: "warning",
                message: "上下节点无法选择相同母线！！！",
              });
              return;
            }
          }
          return
        }
      }
      if(this.bindLevel != 5 ){
        for (let i = 0; i < this.bind.length; i++) {
          // debugger
          if( this.maintenanceData.upNode == this.bind[i][1] && this.maintenanceData.downNode == this.bind[i][0]){
            // for (let j = 0; j < this.bind.length; j++){
            //   if( this.maintenanceData.downNode == this.bind[j][0]){
                this.$message({
                  type: "warning",
                  message: "上下节点无法选择相同母线！！！",
                });
              //   return;
              // }
            // }
            return
          }
        }
      }
      api.nodeMaintenance(this.maintenanceData).then((res) => {
            if (res.code == "A0000") {
              this.$message({
                type: "success",
                message: "维护成功",
              });
              this.nodemaintenanceInformation = false;
              this.transformerQuery();
            }
          });
    },
    handleNodeClick(data) {
      //   console.log(data);
    },
    //变压器台账配置
    detailFn() {
      this.flag = false;
      this.detailFlag = true;
      this.getTree();
      this.transformerQuery();
    },
    //返回主页面
    detailBack() {
      this.flag = true;
      this.detailFlag = false;
      this.subName = "";
      this.formData1.searchValue = "";
    },
    handleNodeClick1(data, node, nodeCom) {
      if (node.level == 4) {
        this.subName =
          node.parent.parent.parent.data.name +
          `>` +
          node.parent.parent.data.name +
          `>` +
          node.parent.data.name +
          `>` +
          node.data.name;
        this.ruleForm.subIndex = node.data.id;
        this.formData1.searchValue = node.data.id;
        this.parentId = node.data.id;
        // console.log(this.ruleForm.subIndex);
      } else if (node.level == 5) {
        this.subName =
          node.parent.parent.parent.parent.data.name +
          `>` +
          node.parent.parent.parent.data.name +
          `>` +
          node.parent.parent.data.name +
          `>` +
          node.parent.data.name;
        this.ruleForm.subIndex = node.parent.data.id;
        // console.log(this.ruleForm.subIndex);
        this.formData1.searchValue = node.data.id;
        this.parentId = node.parent.data.id;
      } else {
        this.formData1.searchValue = "";
      }
      this.transformerQuery();
    },
    /**筛选节点 */
    filterNode(value, data, node) {
      if (!value) {
        return true;
      }
      let _array = []; //这里使用数组存储 只是为了存储值。
      this.getReturnNode(node, _array, value);
      let result = false;
      _array.forEach((item) => {
        result = result || item;
      });
      return result;
    },
    getReturnNode(node, _array, value) {
      let isPass =
        node.data && node.data.name && node.data.name.indexOf(value) !== -1;
      isPass ? _array.push(isPass) : "";
      this.index++;
      if (!isPass && node.name != 1 && node.parent) {
        this.getReturnNode(node.parent, _array, value);
      }
    },
    clickFn() {
      this.$refs.menuTree.filter(this.filterText);
    },
  },
  watch: {
    filterText(val) {
      this.$refs.menuTree.filter(val);
    },
    filterText1(val) {
      this.$refs.menuTreeLeft.filter(val);
    },
    filterText2(val) {
      this.$refs.menuTreeRight.filter(val);
    },
  },
};
</script>
<style lang="less" scoped>
@import url("../../../styles/comStyle.less");
// ::v-deep .el-form-item--small .el-form-item__content,
// .el-form-item--small .el-form-item__label {
//   height: 32px;
// }


::v-deep .vxe-table .cell {
  text-align: center;
}

.box {
  position: absolute;
  top: 100px;
  right: 60px;
  bottom: 0;
  left: 300px;
  z-index: 1;
}
.BOX {
  height: 42px;
  padding: 0 40px 0 20px;
  overflow: hidden;
  font-size: 18px;
  font-weight: 700;
  line-height: 36px;
  color: #003078;
  background-color: #f8f8f8;
  border-bottom: 1px solid #eee;
  border-radius: 2px 2px 0 0;
}
// ::v-deep .form {
//   .el-input {
//     width: 300px;
//   }
//   .el-textarea {
//     width: 300px;
//   }
// }
// ::v-deep .tree {
//   .el-tree {
//     padding-top: 15px;
//     padding-left: 10px;
//     // 不可全选样式
//     .el-tree-node {
//       .is-leaf + .el-checkbox .el-checkbox__inner {
//         display: inline-block;
//       }
//       .el-checkbox .el-checkbox__inner {
//         display: none;
//       }
//     }
//   }
// }
/* 隐藏掉el-tree中有disabled属性的框框 */
::v-deep .el-checkbox__input.is-disabled {
  display: none;
}
// ::v-deep .formLine {
//   display: flex;
//   flex-wrap: wrap;
//   justify-content: space-between;
//   .el-form-item {
//     display: flex;
//     width: 48%;
//     .el-form-item__content {
//       flex: 1 !important;
//       .el-select {
//         width: 100%;
//       }
//       .el-input__inner {
//         width: 100% !important;
//       }
//       .el-date-editor {
//         width: 100%;
//       }
//     }
//   }
// }
.span-ellipsis {
  display: block;
  width: 100%;
  text-overflow: ellipsis;

  /* overflow: hidden; */
  white-space: nowrap;

  /* overflow: auto;
  overflow-x: auto; */
}
             
::v-deep .el-tree {
  font-size: 13px !important;
  font-weight: 540 !important;
}
// ::v-deep.el-form-item--small .el-form-item__error {
//   padding-top: 7px;
// }
</style>
<style lang="scss" scoped>
::v-deep .iconfont {
  color: $themeColor !important;
  font-size: 16px;
}
.xiaoshou{
  cursor: pointer !important;
}
::-webkit-scrollbar {
    width: 8px !important;
    height: 14px;
    
}
</style>
