<template>
  <div class="net">
    <table v-cdrag="{ isCtrl: true }" id="failNetTable">
      <tr v-for="(node, index) in netData" :key="index">
        <td>
          <div class="cNode node">
            <span class="nodeLabel">
              <!-- 高亮节点 -->
              <span :class="node.isHighlight === 1 ? 'label highLightNode' : 'label'" id="riskAnalysis" >

                <!-- 失效 Start -->
                <p class="m0" :id="node.key + node.id">
                  <span class="fault-color">
                    <i class="frontIcon iconfont iconimage_0"/>
                    <span
                        :id="node.key +'Name'+ node.id"
                        :class="'overflowEllipsis'"
                        :title="getNodeName(node)"
                        @click="clickNode(node)"
                        @dblclick="doubleClick(node)"
                        @contextmenu="rightClick($event, node)">
                      <img v-if="node.fileName" width="14" height="14" :src="$api.baseUrl + '/DFMEA/file/' + node.fileName"/>
                        {{ getNodeName(node) }}
                    </span>
                    <a-input
                        :id="node.key +'Input'+ node.id"
                        :max-length='500'
                        @blur="updateName(node)"
                        @keyup="($event) => {keyup($event, node);}"
                        class="hide"
                        type="text"/>
                  </span>
                </p>
                <!-- 失效 End -->

                <!-- 要求名称 Start -->
                <p
                    v-if="node.requireParent"
                    class="m0"
                    :id="node.requireParent.key + node.requireParent.id"
                    v-show="functionSwitch">
                  <span class="require-color">
                    <i class="frontIcon iconfont iconGear-"/>
                    <span
                        :id="node.requireParent.key +'Name'+ node.requireParent.id"
                        class="overflowEllipsis"
                        :title="getNodeName(node.requireParent)"
                        @click="clickNode(node.requireParent)"
                        @dblclick="doubleClick(node.requireParent)">
                        {{ getNodeName(node.requireParent) }}
                    </span>
                    <a-input
                        :id="node.requireParent.key +'Input'+ node.requireParent.id"
                        :max-length='500'
                        @blur="updateName(node.requireParent)"
                        @keyup="($event) => {keyup($event, node.requireParent);}"
                        class="hide"
                        type="text"/>
                  </span>
                </p>
                <!-- 要求名称 End -->

                <!-- 功能名称 Start -->
                <p v-if="node.functionParent" class="m0"
                   :id="node.functionParent.key + node.functionParent.id" v-show="functionSwitch">
                  <span :class="getNodeColor(node.functionParent.struTypeCode)">
                    <i class="frontIcon iconfont iconGear-"/>
                    <span
                        :id="node.functionParent.key +'Name'+ node.functionParent.id"
                        class="overflowEllipsis"
                        :title="getNodeName(node.functionParent)"
                        @click="clickNode(node.functionParent)"
                        @dblclick="doubleClick(node.functionParent)">
                        {{ getNodeName(node.functionParent) }}
                    </span>
                    <a-input
                        :id="node.functionParent.key +'Input'+ node.functionParent.id"
                        :max-length='500'
                        @blur="updateName(node.functionParent)"
                        @keyup="($event) => {keyup($event, node.functionParent);}"
                        class="hide"
                        type="text"/>
                  </span>
                </p>
                <!-- 功能名称 End -->

                <!-- 结构名称 Start -->
                <p v-if="node.structureParent" class="m0"
                   :id="node.structureParent.key + node.structureParent.id" v-show="structureSwitch">
                  <span>
                    <i class="frontIcon iconfont icongongneng"/>
                    <span
                        :id="node.structureParent.key +'Name'+ node.structureParent.id"
                        class="overflowEllipsis"
                        :title="getNodeName(node.structureParent)"
                        @click="clickNode(node.structureParent)"
                        @dblclick="doubleClick(node.structureParent)">
                      {{ getNodeName(node.structureParent) }}
                    </span>
                    <a-input
                        :id="node.structureParent.key +'Input'+ node.structureParent.id"
                        :max-length='500'
                        @blur="updateName(node.structureParent)"
                        @keyup="($event) => {keyup($event, node.structureParent);}"
                        class="hide"
                        type="text"/>
                  </span>
                </p>
                <!-- 结构名称 End -->

              </span>
            </span>
            <i v-if="node.children && node.children.length > 0"
               class="frontIcon iconfont iconMinusCircle r"
               @click="expandCollapse($event, 'right', index)"/>
          </div>

          <!-- 右侧网 Start-->
          <RightLeafs
              ref="right"
              v-if="node.children && node.children.length > 0"
              :netData="node.children"
              :functionSwitch="functionSwitch"
              :structureSwitch="structureSwitch"
              :measureSwitch="measureSwitch"
              @clickNode="clickNode"
              @doubleClick="doubleClick"
              @keyup="keyup"
              @updateName="updateName"
              @rightClick="rightClick"/>
          <!-- 右侧网 End-->
        </td>
      </tr>
    </table>
  </div>
</template>
<script>

import RightLeafs from "./components/RightLeafs";
import {addClass, hasClass, removeClass, toggleClass} from "@/utils/index";

export default {
  name: "RiskAnalysisNet",
  components: {RightLeafs},
  props: {
    netData: {
      type: Array,
      default: []
    },
    functionSwitch: {
      type: Boolean,
      default: false
    },
    structureSwitch: {
      type: Boolean,
      default: false
    },
    measureSwitch: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      /** 用于改名时 ecs 退出会触发input blur，esc不能触发blur */
      ecsFlag: false,
      /** 折叠状态IconClass */
      foldIconClass: "iconPlusCircle",
      /** 展开状态IconClass */
      openIconClass: "iconMinusCircle",
    };
  },
  methods: {
    /**
     * 取得节点名称
     * @param node 节点
     */
    getNodeName(node) {
      let featureClassify = node.classifyName ? node.classifyName : '';
      return (node.prefix ? node.prefix + "\xa0" : "")
          + (node.struTypeCode === '06' ? featureClassify : '')
          + node.name
          + (node.suffix ? "\xa0" + node.suffix : "")
    },
    /**
     * 取得节点颜色样式
     * @param struTypeCode 类型编码CODE
     */
    getNodeColor(struTypeCode) {
      let color = " ";
      let obj = this.$store.getters.nodeTypeDict.color.filter(item => item.key === struTypeCode)[0]
      if (obj) color += obj.value;
      return color;
    },
    /**
     * 点击节点
     * @param node 节点
     */
    clickNode(node) {
      this.$emit("clickNode", node);
    },
    /**
     * 双击节点
     * @param node 节点
     */
    doubleClick(node) {
      this.$emit("doubleClick", node);
    },
    /**
     * 键盘松开事件
     * @param e event对象
     * @param node 节点
     */
    keyup(e, node) {
      this.$emit("keyup", e, node);
    },
    /**
     * 修改节点名称
     * @param node 节点
     */
    updateName(node) {
      this.$emit("updateName", node);
    },
    /**
     * 右键点击
     * @param e
     * @param node 节点
     */
    rightClick(e, node) {
      this.$emit("rightClick", e, node);
    },
    /**
     * 折叠展开
     * @param e
     * @param ref
     * @param index
     */
    expandCollapse(e, ref, index) {
      if (hasClass(e.target, this.foldIconClass)) {
        removeClass(e.target, this.foldIconClass);
        addClass(e.target, this.openIconClass);
      } else {
        removeClass(e.target, this.openIconClass);
        addClass(e.target, this.foldIconClass);
      }
      toggleClass(this.$refs[ref][index].$el, "hideLeaf");
    },
    /**
     * 获取元素
     */
    getNetElement() {
      let element = document.getElementById('failNetTable');
      return element;
    }
  }
};
</script>
<style lang="scss" scoped>
.net {
  height: 100vh;

  .l {
    float: none !important;
  }

  .r {
    float: none !important;
  }

  .nodeLabel {

    .label {
      border: 1px solid #999 !important;
      background-color: transparent !important;
      margin-left: 50px !important;
      border-radius: 10px !important;
      width: 250px !important;
      font-size: 14px !important;

      .overflowEllipsis {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
      }
    }
    .label-selected {
      border: 5px solid skyblue !important;
      border-radius: 10px !important;
      width: 350px !important;
      font-size: 14px !important;

      .overflowEllipsis {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
      }
    }

    .node-selected {
      background-color: #9bf2eb;
      border-radius: 2px;
    }

    .label:hover {
      background-color: transparent !important;
    }

    .highLightNode {
      background-color: #9bf2eb !important;
    }

    input {
      width: 80%;
      height: 20px;
      padding: 0px;
    }
  }
}

.frontIcon {
  display: inline !important;
  font-size: 14px !important;
  float: left;
  height: 1px !important;
}

.iconMinusCircle {
  font-size: 14px !important;
}

.iconPlusCircle {
  font-size: 14px !important;
}

</style>
<style lang="scss">
</style>
