<template>
  <div v-loading="result.loading">
    <el-input :placeholder="$t('test_track.module.search')" v-model="filterText" size="small">
      <template v-if="type == 'edit'" v-slot:append>
        <el-button icon="el-icon-folder-add" @click="openEditNodeDialog('add')"></el-button>
      </template>
    </el-input>

    <el-tree
      class="filter-tree node-tree"
      :data="treeNodes"
      node-key="id"
      @node-drag-end="handleDragEnd"
      :filter-node-method="filterNode"
      :expand-on-click-node="false"
      highlight-current
      :draggable="draggable"
      ref="tree">
      <template v-slot:default="{node,data}">
        <span class="custom-tree-node father" @click="handleNodeSelect(node)">
          <span class="node-icon">
            <i class="el-icon-folder"></i>
          </span>

          <span class="node-title">{{node.label}}</span>

          <span v-if="type == 'edit'" class="node-operate child">
            <el-tooltip
              class="item"
              effect="dark"
              :open-delay="200"
              :content="$t('test_track.module.rename')"
              placement="top">
              <i @click.stop="openEditNodeDialog('edit', data)" class="el-icon-edit"></i>
            </el-tooltip>
            <el-tooltip
              class="item"
              effect="dark"
              :open-delay="200"
              :content="$t('test_track.module.add_submodule')"
              placement="top">
              <i @click.stop="openEditNodeDialog('add', data)" class="el-icon-circle-plus-outline"></i>
            </el-tooltip>
            <el-tooltip class="item" effect="dark"
              :open-delay="200" :content="$t('commons.delete')" placement="top">
              <i @click.stop="remove(node, data)" class="el-icon-delete"></i>
            </el-tooltip>
          </span>
        </span>
      </template>
    </el-tree>
    <node-edit ref="nodeEdit" :tree-nodes="treeNodes" @refresh="refreshNode" />
  </div>
</template>

<script>
import NodeEdit from "./NodeEdit";

export default {
  name: "NodeTree",
  components: { NodeEdit },
  data() {
    return {
      result: {},
      filterText: "",
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  props: {
    type: {
      type: String,
      default: "view"
    },
    treeNodes: {
      type: Array
    },
    selectNode: {
      type: Object
    },
    draggable: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    handleDragEnd(draggingNode, dropNode, dropType, ev) {
      let param = {};
      param.id = draggingNode.data.id;
      if (dropType === "inner") {
        param.parentId = dropNode.data.id;
        param.level = dropNode.data.level + 1;
      } else {
        if (dropNode.parent.id === 0) {
          param.parentId = 0;
          param.level = 1;
        } else {
          param.parentId = dropNode.parent.data.id;
          param.level = dropNode.parent.data.level + 1;
        }
      }
      let nodeIds = [];
      this.getChildNodeId(draggingNode.data, nodeIds);
      if (dropNode.level == 1 && dropType != "inner") {
        param.nodeTree = draggingNode.data;
      } else {
        for (let i = 0; i < this.treeNodes.length; i++) {
          param.nodeTree = this.findTreeByNodeId(this.treeNodes[i], dropNode.data.id);
          if (param.nodeTree) {
            break;
          }
        }
      }
      param.nodeIds = nodeIds;
      this.$post("/case/node/drag", param, () => {
        this.refreshTable();
      }, (error) => {
        this.refreshNode();
      });
    },
    refreshTable() {
      this.$emit('refreshTable');
    },
    findTreeByNodeId(rootNode, nodeId) {
      if (rootNode.id == nodeId) {
        return rootNode;
      }
      if (rootNode.children) {
        for (let i = 0; i < rootNode.children.length; i++) {
          if (this.findTreeByNodeId(rootNode.children[i], nodeId)) {
            return rootNode;
          }
        }
      }
    },
    remove(node, data) {
      this.$alert(
        this.$t("test_track.module.delete_confirm") +
          data.label +
          "，" +
          this.$t("test_track.module.delete_all_resource") +
          "？",
        "",
        {
          confirmButtonText: this.$t("commons.confirm"),
          callback: action => {
            if (action === "confirm") {
              let nodeIds = [];
              this.getChildNodeId(node.data, nodeIds);
              this.$post("/case/node/delete", nodeIds, () => {
                const parent = node.parent;
                const children = parent.data.children || parent.data;
                const index = children.findIndex(d => d.id === data.id);
                children.splice(index, 1);
                this.$success(this.$t("commons.delete_success"));
                this.$emit("refresh");
              });
            }
          }
        }
      );
    },
    handleNodeSelect(node) {
      let nodeIds = [];
      let pNodes = [];
      this.getChildNodeId(node.data, nodeIds);
      this.getParentNodes(node, pNodes);
      this.$emit("nodeSelectEvent", nodeIds, pNodes);
      this.$emit("update:selectNode", node);
    },
    getChildNodeId(rootNode, nodeIds) {
      //递归获取所有子节点ID
      nodeIds.push(rootNode.id);
      if (rootNode.children) {
        for (let i = 0; i < rootNode.children.length; i++) {
          this.getChildNodeId(rootNode.children[i], nodeIds);
        }
      }
    },
    getParentNodes(rootNode, pNodes) {
      if (rootNode.parent && rootNode.parent.id != 0) {
        this.getParentNodes(rootNode.parent, pNodes);
      }
      if (rootNode.data.name && rootNode.data.name != "") {
        pNodes.push(rootNode.data);
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    openEditNodeDialog(type, data) {
      let nodeIds = [];
      if (type == 'edit') {
        this.getChildNodeId(data, nodeIds);
      }
      this.$refs.nodeEdit.open(type, data, nodeIds);
    },
    refreshNode() {
      this.$emit("refresh");
    }
  }
};
</script>

<style scoped>
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}

.el-icon-arrow-down {
  font-size: 12px;
}

.custom-tree-node {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  width: 100%;
}

.node-tree {
  margin-top: 15px;
}

.father .child {
  display: none;
}

.father:hover .child {
  display: block;
}

.node-title {
  width: 0px;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  padding: 0px 5px;
  overflow: hidden;
}

.node-operate > i {
  color: #409eff;
  margin: 0px 5px;
}
</style>
