<template>
  <ul class="leaf r" v-if="netData">
    <li class="leafNode r" :key="index" v-for="(node, index) in netData">
      <span class="node">
        <span class="line-r-x line"></span>
        <span :class="{
            'line-rt-y': index === 0 && netData.length !== 1,
            'line-rc-y': index !== netData.length - 1 && index !== 0,
            'line-rb-y': index === netData.length - 1 && index !== 0,
            line: true }">
        </span>
        <span class="nodeLabel">
          <!-- 高亮节点 -->
          <span :class="node.isHighlight === 1 ? 'label highLightNode' : 'label'" id="riskAnalysis" >

            <!-- 失效 Start -->
            <span>
              <span :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>
              </span>
              <!-- 措施状态 Start -->
              <span
                  class="ml10"
                  v-for="(measure, index) in node.measureChildren"
                  :key="index"
                  v-show="measureSwitch">
                <span :id="measure.key + measure.id">
                  <i class="frontIcon iconfont iconIconspace_planner"/>
                  <span
                      :id="measure.key + 'Name' + measure.id"
                      class="overflowEllipsis"
                      :title="getNodeName(measure)"
                      @click="clickNode(measure)"
                      @contextmenu="rightClick($event, measure)">
                     {{ getNodeName(measure) }}
                  </span>
                </span>
                <!-- 措施组 Start -->
                <span
                    class="ml10"
                    v-for="(group, index) in measure.measureChildren"
                    :key="index">
                  <span :id="group.key + group.id">
                    <i class="frontIcon iconfont iconhrcollegestaffCollegePlan"/>
                    <span
                        :id="group.key + 'Name' + group.id"
                        class="overflowEllipsis"
                        :title="getNodeName(group)"
                        @click="clickNode(group)"
                        @dblclick="doubleClick(group)"
                        @contextmenu="rightClick($event, group)">
                      {{ getNodeName(group) }}
                    </span>
                    <a-input
                        :id="group.key + 'Input' + group.id"
                        :max-length='500'
                        @blur="updateName(group)"
                        @keyup="($event) => {keyup($event, group);}"
                        class="hide"
                        type="text"/>
                  </span>
                  <!-- 预防措施、探测措施 Start -->
                  <span
                      class="ml10"
                      v-for="(action, index) in group.measureChildren"
                      :key="index">
                    <span :id="action.key + action.id">
                      <i :class="action.struTypeCode === '09' ? 'frontIcon iconfont iconfind1'
                          : 'frontIcon iconfont iconHTSCIT_find'"/>
                      <span
                          :id="action.key + 'Name' + action.id"
                          class="overflowEllipsis"
                          :title="getNodeName(action)"
                          @click="clickNode(action)"
                          @dblclick="doubleClick(action)"
                          @contextmenu="rightClick($event, action)">
                         {{ getNodeName(action) }}
                      </span>
                      <a-input
                          :id="action.key + 'Input' + action.id"
                          :max-length='500'
                          @blur="updateName(action)"
                          @keyup="($event) => {keyup($event, action);}"
                          class="hide"
                          type="text"/>
                    </span>
                  </span>
                  <!-- 预防措施、探测措施 End -->
                </span>
                <!-- 措施组 End -->
              </span>
              <!-- 措施状态 End -->
            </span>
            <!-- 失效 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 class="frontIcon iconfont iconMinusCircle r"
           v-if="node.children && node.children.length > 0"
           @click="expandCollapse($event, node.id + '-children')"
        />
      </span>
      <RightLeafs
          :ref="node.id + '-children'"
          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"/>
    </li>
  </ul>
</template>
<script>
import RightLeafs from "./RightLeafs";
import {addClass, hasClass, removeClass, toggleClass} from "@/utils/index";

export default {
  name: "RightLeafs",
  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
     */
    expandCollapse(e, ref) {
      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][0].$el, "hideLeaf");
    }
  }
};
</script>
<style lang="scss" scoped>
.net {
  height: 100vh;

  .l {
    float: none !important;
  }

  .r {
    float: none !important;
  }

  .nodeLabel {

    .label {
      border: 1px solid #999 !important;
      border-radius: 10px !important;
      width: 350px !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;
    }

    span {
      display: block;
    }
  }
}

.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>
