<template>
  <div class="tree-filter">
    <div class="station-tree-top">
      <Input
        suffix="ios-search"
        placeholder="输入关键字查询"
        search
        v-model="currentStation"
        class="common-search"
      />
    </div>
    <div class="station-tree-center">
      <div class="station-tree-left common-scroll">
        <Tree
          :data="treeData"
          ref="tree"
          :render="renderContent"
          @on-select-change="selectChange"
          v-show="treeData.length>0"
        ></Tree>
        <div class="station-tree-left-notree" v-show="!treeData || treeData.length==0">
          暂无数据！
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import _ from "lodash";
export default {
  name: "TreeFilter",
  components: {},
  props: {
    currentStaData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    defaultData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    clickAllNode: {
      // 是否能点击全部节点 （true可点击  false第一层节点不能点击）
      type: Boolean,
      default: true,
    },
    firstCalssName: {
      type: String,
      default: "icon-hefeiditie",
    },
    secondCalssName: {
      type: String,
      default: "icon-sutpczhihuizhantai",
    },
    thirdCalssName: {
      type: String,
      default: "icon-ditiezhaofang",
    },
  },
  data() {
    return {
      currentStation: null,
      treeData: [],
      saveId: null,
      upperTreeData: []
    };
  },
  watch: {
    currentStation(val) {
      if (val) {
        let arr = JSON.parse(JSON.stringify(this.treeData));
        this.treeData = this.filterNode(val, arr);
      } else {
        if (this.saveId) { //当this.saveId>0时，输入框没值时，默认上个选中的节点
          this.treeData = this.getParentIdList(this.defaultData,this.saveId)
        } else if(this.saveId === 0){ //选中根节点时
          this.treeData =  this.getTree(this.defaultData);
        } else { //初始化默认显示树形结构
          this.treeData =  this.defaultData;
        }
      }
    },
    defaultData: {
      handler(newValue, oldValue) {
        this.treeData = newValue;
      },
    },
  },
  mounted() {
    this.treeData = this.defaultData;
  },
  methods: {
    // 当选中根节点时
     getTree(arr) {
      return arr.map((v,index) => {
        v.selected = false
        v.disabled = false
        if (index==0) {
          v.expand = true
        } else {
          v.expand = false
        }
        if (v.level== 1) {
          v.disabled = true
          v.selected = true
          v.expand = true
        }
        if (v.children) v.children = this.getTree(v.children);
        return v;
      });
    },
    getParentIdList(list, id) {
        if (!list || !id) {
            return ''
        }
        let findParent = (data, currentdId, nodeId) => {
            for (var i = 0, length = data.length; i < length; i++) {
                let node = data[i];
                node.expand = false
                node.selected = false
                node.disabled = false
                if (node.level == 1 && !this.clickAllNode) {
                  node.disabled = true
                } else {
                  node.disabled = false
                }
                if (node.nodeId === currentdId) {
                    node.expand = true
                    if (node.nodeId == id) {     
                      node.expand = true
                      this.currentOrgId = node.nodeId
                      node.selected = true
                      node.disabled = true
                      if(node.children) {
                        findParent(node.children, currentdId, node.nodeId);
                      }       
                    }
                    if (!node.nodeId) {
                      break
                    }
                    findParent(list, nodeId);
                    // break
                } else {
                    if (node.children) {
                      findParent(node.children, currentdId, node.nodeId);
                    }
                    continue
                }
            }
            return list;
        }
        return findParent(list, id);
    },
    renderContent(h, { root, node, data }) {
      let calssName = "",
        color = "";
      if (data.level == 1) {
        calssName = "iconfont " + this.firstCalssName;
        color = "red";
      } else if (data.level == 2) {
        calssName = "iconfont " + this.secondCalssName;
        color = "#41aeff";
      } else {
        calssName = "iconfont " + this.thirdCalssName;
        color = "#41aeff";
      }
      return h(
        "span",
        {
          style: {
            display: "inline-block",
            width: "100%",
          },
        },
        [
          h("span", [
            h("i", {
              style: {
                verticalAlign: "sub",
                display: "inline-block",
                margin: "0px 5px",
                color: color,
                fontSize: "24px",
              },
              class: calssName,
            }),
            // h("img", {
            //   attrs: {
            //     src: src
            //   },
            //   style: {
            //     verticalAlign: "text-bottom",
            //     display: "inline-block",
            //     margin: "0px 5px"
            //   }
            // }),
            h("span", data.title),
          ]),
        ]
      );
    },
    //过滤树节点
    filterNode(val, List) {
      //过滤出满足条件的数组
      let List1 = List.filter((item) => {
        //如果该元素有children，则优先处理children的
        if (item.children) {
          if (item.level == 1 && !this.clickAllNode) {
              item.disabled = true
            } else {
              item.disabled = false
            }
          item.selected = false;
          item.expand = true;
          //过滤children里面满足条件的
          item.children = this.filterNode(val, item.children);
          //如果children里面没有满足条件的，则进入，否则返回true
          if (!item.children.some((item1) => item1.title.indexOf(val) !== -1)) {
            //判断children里面是否还有一层children,如果有则对内层children继续调用函数判断，否则返回title中含有关键字的元素
            if (item.children.some((item1) => item1.children)) {
              item.children.forEach((item2) => {
                item2.children && this.filterNode(val, item2.children);
              });
            } else {
              return item.title.indexOf(val) > -1;
            }
          }
          return true;
        }
        //返回title中含有关键字的元素
        return item.title.indexOf(val) > -1;
      });
      return List1;
    },
    selectChange(option) {
      if (option[0].level == 1) {
        this.saveId = option[0].id
      } else {
        this.saveId = option[0].nodeId
      }
      let arr = [],
        level = null,
        currentNodeId = null;
        this.treeData.forEach((first, firstIndex, firstArr) => {
          first.expand = false; //expand 是否展开直子节点
          if (this.clickAllNode) {
            first.disabled = false; // disabled 是否禁止选中
          }
          // first.disabled = false; // disabled 是否禁止选中
          first.selected = false;
          if (first.title == option[0].title && first.id == option[0].id) {
            first.selected = true;
            first.disabled = true; // disabled 是否禁止选中
            first.expand = true;
            level = first.level;
            currentNodeId = first.nodeId;
          }
          if (first.children) {
            first.children.forEach((second, secondIndex, secondArr) => {
              second.expand = false; //expand 是否展开直子节点
              second.disabled = false; // disabled 是否禁止选中
              second.selected = false;
              if (option[0].level == 1) {
                secondArr[firstIndex].expand = true;
              }
              if (second.title == option[0].title && second.id == option[0].id) {
                second.selected = true;
                second.disabled = true; // disabled 是否禁止选中
                second.expand = true;
                currentNodeId = second.nodeId;
                first.expand = true;
                arr.push(second.nodeId);
                level = second.level;
              }
              if (second.children && second.children.length > 0) {
                second.children.forEach((thrid, thridIndex, thridArr) => {
                  thrid.expand = false; //expand 是否展开直子节点
                  thrid.disabled = false;
                  thrid.selected = false;
                  if (
                    thrid.title == option[0].title &&
                    thrid.id == option[0].id
                  ) {
                    thrid.selected = true;
                    thrid.disabled = true; // disabled 是否禁止选中
                    thrid.expand = true;
                    second.expand = true;
                    first.expand = true;
                    currentNodeId = thrid.nodeId;
                    arr.push(second.nodeId);
                    arr.push(thrid.nodeId);
                    level = thrid.level;
                  }
                  if (thrid.children && thrid.children.length > 0) {
                    thrid.children.forEach((forth) => {
                      forth.expand = false; //expand 是否展开直子节点
                      forth.disabled = false;
                      forth.selected = false;
                      if (
                        forth.title == option[0].title &&
                        forth.id == option[0].id
                      ) {
                        forth.selected = true;
                        forth.disabled = true; // disabled 是否禁止选中
                        forth.expand = true;
                        second.expand = true;
                        first.expand = true;
                        thrid.expand = true;
                        currentNodeId = forth.nodeId;
                        arr.push(second.nodeId);
                        arr.push(thrid.nodeId);
                        arr.push(forth.nodeId);
                        level = forth.level;
                      }
                      if (forth.children && forth.children.length > 0) {
                        forth.children.forEach((five) => {
                          five.expand = false; //expand 是否展开直子节点
                          five.disabled = false;
                          five.selected = false;
                          if (
                            five.title == option[0].title &&
                            five.id == option[0].id
                          ) {
                            five.selected = true;
                            five.disabled = true; // disabled 是否禁止选中
                            five.expand = true;
                            second.expand = true;
                            first.expand = true;
                            thrid.expand = true;
                            forth.expand = true;
                            currentNodeId = five.nodeId;
                            arr.push(second.nodeId);
                            arr.push(thrid.nodeId);
                            arr.push(forth.nodeId);
                            arr.push(five.nodeId);
                            level = five.level;
                          }
                        });
                      }
                    });
                  }
                });
              }
            });
          }
      });
      this.$emit('treeChange',arr,level,currentNodeId)
    },
  },
};
</script>
<style scoped lang="stylus">
.tree-filter {
  height: 100%;
}
.station-tree-center {
  height: calc(100% - 32px);
  padding-top: 10px;
}
.station-tree-left {
  height: 100%;
  overflow: auto;
}
.station-tree-left-notree {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  fon-size: 14px;
}
>>> .ivu-tree-empty {
  height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
>>> .ivu-tree-arrow {
  color: #41aeff;
  width: 15px;
}
>>> .ivu-tree-title {
  color: #fff;
  min-width: 90%;
  padding: 6px 4px;
  vertical-align: middle;
}
>>> .ivu-tree-title:hover {
    background-color: transparent;
}
>>> .ivu-tree-title-selected, >>> .ivu-tree-title-selected:hover {
  background-color: #3565BC;
  // background-color: transparent;
  color: #fff;
}
>>> .ivu-tree-title img {
  width: 18px;
  height: 18px;
}
// >>> .ivu-tree .ivu-icon {// 禁止旋转
//   -webkit-transform: rotate(0deg);
//   transform: rotate(0deg);
// }
// >>> .ivu-tree .ivu-icon-ios-arrow-forward:before { //改变tree默认折叠的三角箭头
//     background: url('../../assets/images/yu.png') no-repeat 0 3px;
//     content: '';
//     display: block;
//     width: 16px;
//     height: 16px;
//     font-size: 16px;
//     background-size: 16px;
// }
// >>> .ivu-tree .ivu-tree-arrow-open .ivu-icon-ios-arrow-forward:before { //改变tree默认展开的三角箭头
//     background: url('../../assets/images/warning.png') no-repeat 0 0px;
//     content: '';
//     display: block;
//     width: 16px;
//     height: 16px;
//     font-size: 16px;
//     background-size: 16px;
// }
</style>
