<template>
  <a-modal
      class="funcNetDialog"
      :title="$t('functional-analysis.net.function-net-colon')+ title"
      :visible="dialogFormVisible"
      :maskClosable="false"
      @cancel="close"
      :keyboard="false"
      width="100%"
      :destroyOnClose="true"
      :footer="false"
      @afterClose="close">
    <div class="funcNetContent">
      <splitPane
          :min-percent="2"
          split="vertical"
          :default-percent="25">
        <template slot="paneL">
          <div class="net-left beauty-Scroll">
            <div style="min-width: 250px;">
              <div class="ml10 mr10">{{ $t('functional-analysis.net.superstructure') }}</div>
              <NetLeftTree
                  class="ml10 mr10 netLeftTree"
                  ref="netLeftTree"
                  :dropTreeData="leftDropTreeData"
                  :checkedNodes="netLeftTreeCheckedNodes"
                  :directFlag="0"
                  @addNetNode="addNetNode"
                  @deleteNetNode="deleteNetNode"
                  @deleteNode="deleteNode"
                  @updateFunctionNetNode="updateFunctionNetNode"
              />
            </div>
          </div>
        </template>
        <template slot="paneR">
          <splitPane split="vertical" :default-percent="70" :min-percent="2">
            <template slot="paneL">
              <div class="net-center beauty-Scroll pr over-hide">
                <a-form-model class="switchArea">
                  <a-form-model-item>
                    <span class="ml10">
                      <label>{{ $t('functional-analysis.net.note-colon') }}</label>
                      <span>
                        <i class="iconfont icondantupailie parent"/>
                        <label class="ml5">{{ $t('functional-analysis.net.super') }}</label>
                      </span>
                      <span class="ml5">
                        <i class="iconfont icondantupailie current"/>
                        <label class="ml5">{{ $t('functional-analysis.net.current') }}</label>
                      </span>
                      <span class="ml5">
                        <i class="iconfont icondantupailie children"/>
                        <label class="ml5">{{ $t('functional-analysis.net.lower-level') }}</label>
                      </span>
                      <span class="ml5">
                        <i class="iconfont iconshubiaojiantou"/>
                        <label class="ml5">{{ $t('functional-analysis.net.double-tap-focus') }}</label>
                      </span>
                    </span>
                    <span class="ml10">
                      <label>{{ $t('functional-analysis.net.show-structure') }}</label>
                      <a-switch
                          class="ml5"
                          size="small"
                          v-model="structureSwitch"
                          @change="structureSwitchChange"
                          active-color="#13ce66"
                          inactive-color="#ff4949"/>
                    </span>
                    <span class="ml10">
                      <a-tooltip :title="$t('functional-analysis.net.refresh')">
                        <a-button type="primary" size="small" @click="refreshFunctionNet()">
                            <i class="iconfont iconshuaxin"/>
                        </a-button>
                      </a-tooltip>
                    </span>
                    <span class="ml10">
                      <a-tooltip :title="$t('functional-analysis.net.download')">
                        <a-button type="primary" size="small" @click="downloadHtml()">
                            <i class="iconfont iconxiazai2"/>
                        </a-button>
                      </a-tooltip>
                    </span>
                    <!-- 导出图片 -->
                    <span class="ml10 mr10">
                      <a-tooltip :title="$t('global-btn.export.picture')">
                        <a-button type="primary" size="small" @click="downloadHtmlImage()">
                            <i class="iconfont iconxiazai"/>
                        </a-button>
                      </a-tooltip>
                    </span>
                  </a-form-model-item>
                </a-form-model>
                <template>
                  <a-spin
                      :tip="spinTip"
                      :spinning="functionNetLoading">
                    <div class="pr net-container" style="height: calc(100vh - 100px)">
                      <table id="function-net-tree" ref="functionNetTree" class="ml10 table htree"></table>
                    </div>
                  </a-spin>
                </template>
              </div>
            </template>
            <template slot="paneR">
              <div class="net-right beauty-Scroll">
                <div style="min-width: 250px">
                  <div class="ml10 mr10">{{ $t('functional-analysis.net.substructure') }}</div>
                  <NetRightTree
                      class="ml10 mr10 netRightTree"
                      ref="netRightTree"
                      :dropTreeData="rightDropTreeData"
                      :checkedNodes="netRightTreeCheckedNodes"
                      :directFlag="1"
                      @addNetNode="addNetNode"
                      @deleteNetNode="deleteNetNode"
                      @deleteNode="deleteNode"
                      @updateFunctionNetNode="updateFunctionNetNode"
                  />
                </div>
              </div>
            </template>
          </splitPane>
        </template>
      </splitPane>
    </div>
  </a-modal>
</template>
<script>

import splitPane from "vue-splitpane";
import NetLeftTree from "./components/FunctionNet/NetLeftTree.vue";
import NetRightTree from "./components/FunctionNet/NetRightTree";
import {filterNode} from "@/utils/netTree";
import {buildNet, dragZoom} from './components/index';
import {downloadHtml} from "@/utils/download-html";
import html2canvas from 'html2canvas';

/** 节点颜色 */
let nodeColor = {
  "02": {'color': 'rgb(66, 167, 94)'},
  "04": {'color': '#5b9bd5'},
  "05": {'color': '#5b9bd5'},
  "06": {'color': 'rgb(200, 77, 60)'},
};

export default {
  name: "FunctionNetModal",
  components: {splitPane, NetLeftTree, NetRightTree},
  props: {
    showFunctionNetModal: {
      type: Boolean,
      default: false
    },
    showFunctionNetEventListener: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    showFunctionNetModal(val) {
      this.dialogFormVisible = val;
    },
    showFunctionNetEventListener(val) {
      if (val) {
        window.addEventListener("keydown", this.keyCodeForEvent);
      } else {
        window.removeEventListener("keydown", this.keyCodeForEvent);
      }
    },
  },
  data() {
    return {
      /** 标题 */
      title: '',
      /** 模态框状态 */
      dialogFormVisible: false,
      /** 左侧树数据 */
      netLeftTreeData: [],
      /** 右侧树数据 */
      netRightTreeData: [],
      /** 左侧树选中节点 */
      netLeftTreeCheckedNodes: [],
      /** 右侧树选中节点 */
      netRightTreeCheckedNodes: [],
      /** 缓存树标识 左边=0 右边=1 */
      directFlag: 0,
      /** 结构switch开关 */
      structureSwitch: true,
      /** 第一次功能网节点 */
      firstFunctionNetNode: {},
      /** 功能网加载中状态 */
      functionNetLoading: false,
      /** 自定义Loading描述文案 */
      // spinTip: "加载中...",
      spinTip: "",
      /** 中心节点菜单项 */
      centerMenuItems: {},
      /** 左下拉树数据源 */
      leftDropTreeData: [],
      /** 右下拉树数据源 */
      rightDropTreeData: []
    };
  },
  methods: {
    /**
     * 下载Html
     */
    downloadHtml() {
      const html = this.$refs.functionNetTree.outerHTML;
      downloadHtml(html, this.$t('functional-analysis.net.function-net'));
    },
    /**
     * 导出图片
     */
    downloadHtmlImage() {
      // 获取id为'function-net-tree'的元素
      const element = document.getElementById('function-net-tree');
      // 获取类名为'htree'的ul元素的宽度，除目标节点外的所有子节点总长度
      var children = document.querySelector('ul.htree');
      var childrenWidth = children ? children.offsetWidth : 0;
      // 使用html2canvas将元素转换为canvas
      html2canvas(element,
        {
          // 设置canvas的窗口高度为浏览器窗口高度
          windowHeight: $(window).height(),
          // 设置canvas的窗口宽度为目标元素宽度（300）加上childrenWidth
          windowWidth: 500 + childrenWidth
        }).then(canvas => {
          // 将canvas转换为图片URL
          const imgData = canvas.toDataURL('image/png');
          // 创建一个隐藏的链接元素
          const link = document.createElement('a');
          link.href = imgData;
          link.download = 'functionNet.png';
          link.style.display = 'none'; // 隐藏链接
          // 将链接添加到DOM中
          document.body.appendChild(link);
          // 触发点击事件
          link.click();
          // 移除链接
          document.body.removeChild(link);
        });
    },
    /**
     * 刷新功能网
     */
    refreshFunctionNet() {
      let _that = this;
      _that.setCheckedNode(_that.firstFunctionNetNode.id);
      _that.initFunctionNet(_that.firstFunctionNetNode.id, 1, 1);
      _that.structureSwitch = true;
      _that.handleCenterMenuItems(_that.firstFunctionNetNode.id);
      _that.title = _that.firstFunctionNetNode.name;
    },
    /**
     * 初始化下拉结构树
     * @returns {Promise<void>}
     */
    initLeftTree() {
      let _that = this;
      _that.$api.getLeftTree({
        fmeaId: _that.$store.getters.rfmeaId
      }).then((res) => {
        if (res.flag) {
          let resData = res.data.rdfmStruTreeModels || [];
          _that.leftDropTreeData = resData;
          _that.rightDropTreeData = resData;
        } else {
          _that.$message.error(res.message, 1);
        }
      });
    },
    /**
     * 初始化功能网
     * @param checkedNodeId 选中节点ID
     * @param flag 初期化网时，清空前次对网操作的Session标记
     * @param clearFlag 初期化网时，清空前次对网操作的Session标记
     * @returns {Promise<void>}
     */
    async initFunctionNet(checkedNodeId, flag, clearFlag) {
      let _that = this;
      _that.functionNetLoading = true;
      await this.$api.getFunctionNet({
        fmeaId: this.$store.getters.rfmeaId,
        struId: checkedNodeId,
        flag: flag,
        clearFlag: clearFlag,
      }).then((res) => {
        if (res.flag) {
          // 处理功能网数据
          _that.handleFunctionNetData(res.data);
          // 构建左右侧，节点的勾选
          let targetNode = res.data.targetNode;
          _that.netLeftTreeCheckedNodes = [];
          _that.netRightTreeCheckedNodes = [];
          res.data.parentNode.forEach((item) => {
            if (targetNode.functionId === item.functionId) _that.netLeftTreeCheckedNodes.push(item.parentFunctionId);
          });
          res.data.subNode.forEach((item) => {
            if (targetNode.functionId === item.parentFunctionId) _that.netRightTreeCheckedNodes.push(item.functionId);
          });
          // 初始化功能网左侧，右侧的树
          _that.$refs.netLeftTree.initTree();
          _that.$refs.netRightTree.initTree();
        } else {
          _that.$message.error(res.message, 1);
        }
      }).finally(() => {
        _that.functionNetLoading = false;
        _that.structureSwitchChange(_that.structureSwitch);
      });
    },
    /**
     * 处理功能网数据
     * @param resData 响应数据
     */
    handleFunctionNetData(resData) {
      // 过滤变体节点
      let filterNodes = this.$store.getters.variantFilterNodes;
      let targetNode = resData.targetNode;
      let parentNode = filterNode(resData.parentNode, filterNodes, 'parentFunctionId');
      let subNode = filterNode(resData.subNode, filterNodes, 'functionId');

      let id = resData.struId;
      let nodeData = {};
      nodeData[targetNode.functionId] = {
        id: targetNode.functionId,
        parentFunctionName: targetNode.parentFunctionName,
        functionName: targetNode.functionName,
        struCode: targetNode.struCode,
        struName: targetNode.struName,
        funStruTypeCode: targetNode.funStruTypeCode,
        linkName: targetNode.linkName
      }
      let netData = [];
      parentNode.forEach(pf => {
        nodeData[pf.parentFunctionId] = {
          id: pf.parentFunctionId,
          parentFunctionName: pf.parentFunctionName,
          functionName: pf.functionName,
          struCode: pf.struCode,
          struName: pf.struName,
          funStruTypeCode: pf.funStruTypeCode,
          linkName: pf.linkName
        };
        netData.push([pf.parentFunctionId, pf.functionId]);
      })

      subNode.forEach(pf => {
        nodeData[pf.functionId] = {
          id: pf.functionId,
          parentFunctionName: pf.parentFunctionName,
          functionName: pf.functionName,
          struCode: pf.struCode,
          struName: pf.struName,
          funStruTypeCode: pf.funStruTypeCode,
          linkName: pf.linkName
        };
        netData.push([pf.parentFunctionId, pf.functionId]);
      });
      // 去重
      netData = $.unique(netData);
      this.handleFunctionNet(id, nodeData, netData);
    },
    /**
     * 处理功能网
     * @param id 根节点ID
     * @param nodeData 节点数据
     * @param netData 网数据
     */
    handleFunctionNet(id, nodeData, netData) {
      const name = this.$t('global-constant.contextmenu.delete');
      let _that = this;
      // 初期化网
      buildNet('table#function-net-tree', {target: id, nodes: nodeData, net: netData}, {
        htmlNullLeft: '',
        htmlNullRight: '',
        editable: false,
        buildNodeHtmlFunc: function (o) {
          // 结构（零件号）
          let scode = '';
          if (o.struCode) scode = '(' + o.struCode + ')';

          // 功能或要求
          let resultHtml = '';
          resultHtml += '<p id="netNameId' + o.id + '" style="line-height:20px;white-space: normal;color:'
              + nodeColor[o.funStruTypeCode]["color"] + '" title="' + o.functionName + scode + '">'
              + (o.linkName ? o.linkName + "\xa0\xa0" : '')
              + o.functionName
              + '</p>'
          // 功能
          if (o.parentFunctionName) {
            resultHtml += '<small style="line-height:20px;white-space: normal;color:'
                + nodeColor["02"]["color"] + '" title="' + o.parentFunctionName + scode + '">'
                + (o.linkName ? o.linkName + "\xa0\xa0" : '')
                + o.parentFunctionName
                + '</small>'
          }
          // 结构
          resultHtml += '<small class="structure" style="line-height:20px;white-space: normal;'
              + '" title="' + o.struName + scode + '">'
              + o.struName + scode
              + '</small>'
          return resultHtml;
        },
        // 双击聚焦
        focusNodeFunc: function () {
          let id = $(this).attr("id");
          let name = $("#netNameId" + id)[0].innerText;
          let checkedNode = {id: id, name: name};
          _that.dblFocus(checkedNode);
        },
        // 右击节点
        rightClickNodeFunc: function () {
          let className = $(this).attr("class");
          // 位置标识
          let position = '';
          if (className.indexOf('center') !== -1) {
            position = 'center';
          } else if (className.indexOf('left') !== -1) {
            position = 'left';
          } else if (className.indexOf('right') !== -1) {
            position = 'right';
          }
          let id = $(this).attr("id");
          $.contextMenu('destroy'); // 销毁所有菜单。
          // 中心节点
          if (position === 'center') {
            if (Object.keys(_that.centerMenuItems).length === 0) return;
            $.contextMenu({
              selector: '#' + id,
              autoHide: true,
              zIndex: 10,
              items: _that.centerMenuItems,
              callback: function (itemKey, opt) {
                let item = opt.items[itemKey];
                let actionInfo = {action: 'toFaultNet', node: item.node};
                _that.menuAction(actionInfo);
              },
            });
            // 两侧节点
          } else if (position === 'left' || position === 'right') {
            $.contextMenu({
              selector: '#' + id,
              autoHide: true,
              zIndex: 10,
              items: {
                "delete": {
                  name: name,
                  title: name,
                  icon: "fas iconfont iconshanchu",
                  node: {
                    id: id,
                  }
                }
              },
              callback: function (itemKey, opt) {
                let item = opt.items[itemKey];
                let actionInfo = {action: 'delete', node: item.node, position: position};
                _that.menuAction(actionInfo);
              },
            });
          }
        }
      });
      // 元素拖动、缩放
      dragZoom(document.querySelector('#function-net-tree'));
    },
    /**
     * 处理中心节点菜单项
     * @param id
     */
    handleCenterMenuItems(id) {
      let _that = this;
      let menuBtn = {};
      _that.$api.getFunctionNetToFaultNet({
        fmeaId: _that.$store.getters.rfmeaId,
        struId: id,
      }).then((res) => {
        //刷新结构树
        if (res.flag) {
          let resData = res.data.failIdsList;
          // 过滤变体节点
          let filterNodes = _that.$store.getters.variantFilterNodes;
          resData = filterNode(resData, filterNodes, 'struId');
          if (resData && resData.length > 0) {
            // 处理右键菜单项
            resData.forEach(item => {
              menuBtn['' + item.struId + ''] = {
                name: item.failName,
                icon: "fas iconfont icon14",
                className: "fault-color",
                node: {
                  id: item.struId,
                  pid: id,
                  name: item.failName,
                }
              };
            });
          }
          _that.centerMenuItems = menuBtn;
        } else {
          _that.$message.error(res.message, 1);
        }
      }).catch((error) => {
        _that.$message.error(error.response.data.message, 1);
      });
    },
    /**
     * 结构开关改变事件
     * @param checked
     */
    structureSwitchChange(checked) {
      if (checked) {
        $('.structure').show();
      } else {
        $('.structure').hide();
      }
    },
    /**
     * 缓存选中节点
     * @param checkedNetNodeId 选中节点ID
     */
    setCheckedNode(checkedNetNodeId) {
      this.$store.dispatch("fmeaTree/set", {
        key: "lastCheckedNetNode",
        value: {id: checkedNetNodeId}
      });
    },
    /**
     * 右键菜单事件
     * @param actionInfo 菜单项信息
     */
    menuAction(actionInfo) {
      switch (actionInfo.action) {
        case "delete": // 删除
          let directFlag = actionInfo.position === 'left' ? 0 : 1;
          this.deleteNetNode(directFlag, actionInfo.node);
          break;
        case "toFaultNet": // 处理功能网跳转失效网逻辑
          this.handleFunctionNetToFaultNet(actionInfo.node);
          break;
      }
    },
    /**
     * 处理功能网跳转失效网逻辑
     * @param node 节点
     */
    handleFunctionNetToFaultNet(node) {
      this.$store.dispatch("fmeaTree/clearNet");
      this.$emit("closeFunctionNetModal");
      this.$parent.$refs.faultNet.setCheckedNode(node.id, node.pid);
      this.$parent.$refs.faultNet.initFaultNet(node.id, 1, 1);
      this.$parent.$refs.faultNet.handleCenterMenuItems(node.id);
      this.$parent.$refs.faultNet.firstFaultNetNode = {id: node.id, name: node.name};
      this.$parent.$refs.faultNet.initLeftTree();
      this.$parent.$refs.faultNet.title = node.name;
      this.$parent.$refs.faultNet.structureSwitch = true;
      this.$parent.$refs.faultNet.functionSwitch = true;
      this.$parent.showFaultNetEventListener = true;
      this.$parent.showFaultNetModal = true;
      this.$parent.$refs.faultNet.forbiddenRightClick();
    },
    /**
     * 添加网节点
     * @param directFlag 0：左侧，1：右侧
     * @param node 节点
     */
    async addNetNode(directFlag, node) {
      let _that = this;
      // 1：查看：2：编制
      if (_that.$api.isLook === '1') return;
      let centerNodeId = _that.$store.getters.lastCheckedNetNode.id;
      if (centerNodeId === node.id) {
        _that.$message.warning(this.$t('global-message.warn.can-not-all-choose-myself'));
        return false;
      }
      await _that.$api.saveFunctionNet({
        fmeaId: _that.$store.getters.rfmeaId,
        directFlag: directFlag,
        selectStruId: node.id,
        targetStruId: centerNodeId,
      }).then((res) => {
        //刷新结构树
        if (res.flag) {
          _that.$message.success(res.message, 1);
          _that.initFunctionNet(centerNodeId, undefined, undefined);
        } else {
          _that.$message.error(res.message, 1);
        }
      });
    },
    /**
     * 删除网节点
     * @param directFlag 0：左侧，1：右侧
     * @param node 节点
     */
    deleteNetNode(directFlag, node) {
      let _that = this;
      // 1：查看：2：编制
      if (_that.$api.isLook === '1') return;
      _that.$confirm({
        title: this.$t('global-message.warn'),
        content: this.$t('global-message.warn.sure-delete'),
        icon: "aaoopqa", //图标，不想用就随便写一个
        okText: this.$t('global-btn.ok'),
        cancelText: this.$t('global-btn.cancel'),
        onCancel() {
          if (directFlag === 0) {
            _that.$refs.netLeftTree.restoreCheckNode(node);
          } else {
            _that.$refs.netRightTree.restoreCheckNode(node);
          }
        },
        onOk() {
          let centerNodeId = _that.$store.getters.lastCheckedNetNode.id;
          _that.$api.deleteFunctionNet({
            fmeaId: _that.$store.getters.rfmeaId,
            struId: centerNodeId,
            delStruId: node.id,
          }).then((res) => {
            if (res.flag) {
              _that.$message.success(res.message, 1);
              _that.initFunctionNet(centerNodeId, undefined, undefined);
            } else {
              _that.$message.error(res.message, 1);
            }
          }).catch((error) => {
            _that.$message.error(error.response.data.message, 1);
          }).finally(() => {
            _that.cleanHighLightNode();
          });
        }
      });
    },
    /**
     * 删除节点
     * @param node 节点
     */
    deleteNode(node) {
      let _that = this;
      let centerNodeId = _that.$store.getters.lastCheckedNetNode.id;
      let deleteContent = undefined;
      let deleteNumber = undefined;
      let data = {
        rfmeaId: _that.$store.getters.rfmeaId,
        struId: node.id
      };
      // 发送请求，统计删除的节点数量
      _that.$api.getDeleteNodeNumber(data).then(res => {
        if (res.flag) {
          deleteNumber = res.data;
          // 设置删除提示语
          deleteContent = _that.$t('global-message.warn.function.delete', [deleteNumber]);
          _that.$confirm({
            title: _that.$t('global-message.warn'),
            content: deleteContent,
            okText: _that.$t('global-btn.ok'),
            cancelText: _that.$t('global-btn.cancel'),
            onCancel() {
            },
            onOk() {
              _that.$api.deleteNode({
                fmeaId: _that.$store.getters.rfmeaId,
                struId: node.id
              }).then((res) => {
                if (res.flag) {
                  _that.$message.success(res.message, 1);
                  _that.initFunctionNet(centerNodeId, undefined, undefined);
                } else {
                  _that.$message.error(res.message, 1);
                }
              }).catch((error) => {
                _that.$message.error(error.response.data.message, 1);
              });
            },
          });
        }
      });
    },
    /**
     * 清除高亮节点
     */
    cleanHighLightNode() {
      // 清除左侧网选中样式
      let leftClassName = "leftNode-selected";
      let leftCheckedNodes = document.getElementsByClassName(leftClassName);
      if (leftCheckedNodes[0]) leftCheckedNodes[0].classList.remove(leftClassName);
      // 清除右侧网选中样式
      let rightClassName = "rightNode-selected";
      let rightCheckedNodes = document.getElementsByClassName(rightClassName);
      if (rightCheckedNodes[0]) rightCheckedNodes[0].classList.remove(rightClassName);
    },
    /**
     * 修改功能网节点
     * @param node 节点
     */
    updateFunctionNetNode(node) {
      let el_arr = document.querySelectorAll('#netNameId' + node.id);
      el_arr.forEach(el => {
        el.innerText = node.name;
      });
    },
    /**
     * 关闭右键菜单
     */
    closeMenu() {
      this.menuVisible = false;
    },
    /**
     * 关闭模态框
     */
    close() {
      this.$store.dispatch("fmeaTree/clearNet");
      this.$emit("closeFunctionNetModal");
      this.$emit("initRightTree");
    },
    /**
     * 监听键盘，触发事件
     * @param v true移除，false添加
     */
    keyListenerChange(v) {
      if (v) {
        window.removeEventListener("keydown", this.keyCodeForEvent);
      } else {
        window.addEventListener("keydown", this.keyCodeForEvent);
      }
    },
    /**
     * 监听键盘，触发事件
     * @param e
     */
    keyCodeForEvent(e) {
      // 选中功能网左右侧节点
      let checkedNetLRNode = this.$store.getters.lastCheckedNetLRNode;
      if (!checkedNetLRNode) return;
      switch (e.keyCode) {
        case 46: // Delete
          if (checkedNetLRNode.isFirst !== 1) return false; // 第一层网可以删除
          this.deleteNetNode(checkedNetLRNode.directFlag, checkedNetLRNode.id);
          break;
        default:
          break;
      }
    },
    /**
     * 双击聚焦
     * @param checkedNode 选中节点
     */
    async dblFocus(checkedNode) {
      this.title = checkedNode.name;
      this.setCheckedNode(checkedNode.id);
      // 重置左右侧
      this.$refs.netLeftTree.dropTreeClickNodeId = undefined;
      this.$refs.netLeftTree.fuzzyName = undefined;
      this.$refs.netRightTree.dropTreeClickNodeId = undefined;
      this.$refs.netRightTree.fuzzyName = undefined;
      // 清空缓存节点
      this.cleanCheckedNetNode();
      await this.initFunctionNet(checkedNode.id, undefined, undefined);
      this.handleCenterMenuItems(checkedNode.id);
    },
    /**
     * 清空缓存节点
     */
    cleanCheckedNetNode() {
      this.$store.dispatch("fmeaTree/set", {
        key: "lastCheckedNetLRNode",
        value: undefined
      });
    },
    /**
     * 禁用浏览器右键菜单
     */
    forbiddenRightClick() {
      document.body.oncontextmenu = function () {
        return false;
      };
    }
  },
};
</script>

<style lang="less" scoped>

// 设置model 全屏
/deep/ .ant-modal {
  top: 0 !important;
}

// 设置model 全屏
/deep/ .ant-modal-content {
  height: calc(100vh);
}

// 不加上弹窗就会有滚动条;
/deep/ .ant-modal-wrap {
  overflow: hidden !important
}

.funcNetDialog .switchArea {
  position: absolute;
  z-index: 1;
  background-color: #fff;
}

/deep/ .funcNetContent {
  height: calc(100vh);

  .splitter-pane-resizer.vertical {
    margin-top: -24px;
  }

  // 功能网左侧
  .splitter-pane.vertical.splitter-paneL {
    overflow: hidden !important;
  }
}

/*/deep/ .ant-modal-close-x {
  font-size: 40px;
  color: white;
}

/deep/ .ant-modal-header {
  background: #5170b7;
}

/deep/ .ant-modal-title {
  color: white;
}*/

/deep/ .ant-form-item {
  margin-bottom: 0px;
}

.parent {
  color: #e6a23c;
}

.current {
  color: #409eff;
}

.children {
  color: #c84d3c;
}
</style>
