<!--
版本0.0.1
调用组件需要三个参数：
1、maxHeight 行政区划树选择面板的最大高度,类型：Number
2、maxWidth 行政区划树选择面板的宽度,类型：Number
3、rootAddCode 行政区划树的根节点，全国是12个0，类型String
4、level 行政区划树的查询深度等级，例如：根节点是全国，"3"是查到县级,类型String
5、nameOrCode 父组件需要的是行政区划名称或行政区划编码
 -->
<template>
    <div>
        <el-input
            ref="myInput"
            v-model="addvInfoShow"
            @input="addvInfo"
            @focus="showSelet()"
            @clear="clearEvent()"
            clearable
            placeholder="行政区名称">
        </el-input>
        <div
            class="mySelectTree"
            v-if="showMenuTree"
            v-loading="treeLoading"
            :style="{'width': maxWidth +'px'}">
            <el-row>
                <el-button type="text" style="float:right;padding:0;" @click="closeTree()"></el-button>
            </el-row>
            <el-row>
                <el-tree
                    :style="{'max-height': maxHeight +'px'}"
                    style="overflow:auto;"
                    class="filter-tree"
                    :data="treeData"
                    accordion
                    :props="defaultProps"
                    node-key="id"
                    :filter-node-method="filterNode"
                    @node-click = 'treeNodeClickHandler'
                    ref="tree">
                </el-tree>
            </el-row>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { getAddTree } from '@/api/duChaAPI.js';
export default {
  //import引入的组件需要注入到对象中才能使用
  props: [
    'maxWidth',
    'maxHeight',
    'rootAddCode',
    'level',
    'value',
    'nameOrCode',
  ],
  components: {
  },
  data() {
    //这里存放数据
    return {
      addvInfoShow: '',
      addvInfo: '',
      showMenuTree: false,
      filterText: '',
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'nm',
      },
      treeLoading: true,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    addvInfo(val) {
      if (this.$refs.tree) {
        this.$refs.tree.filter(val);
      }
      this.$emit('input', this.addvInfo);
    },
    value: function () {
      this.addvInfo = this.value;
    },
  },
  //方法集合
  methods: {
    showSelet() {
      // alert(1);
      this.showMenuTree = true;
      this.getAdDataList();
    },
    filterNode(value, data, node) {
      // 如果什么都没填就直接返回
      if (!value) return true;
      // 如果传入的value和data中的nm相同就是匹配到了
      if (data.nm.indexOf(value) !== -1) {
        return true;
      }
      // 否则要去判断它是不是选中节点的子节点
      return this.checkBelongToChooseNode(value, data, node);
    },
    // 判断传入的节点是不是选中节点的子节点
    checkBelongToChooseNode(value, data, node) {
      const level = node.level;
      // 如果传入的节点本身就是一级节点就不用校验
      if (level === 1) {
        return false;
      }
      // 先取当前节点的父节点
      let parentData = node.parent;
      // 遍历当前节点的父节点
      let index = 0;
      while (index < level - 1) {
        // 如果匹配到直接返回
        if (parentData.data.nm.indexOf(value) !== -1) {
          return true;
        }
        // 否则的话再往上一层做匹配
        parentData = parentData.parent;
        index++;
      }
      // 没匹配到返回false
      return false;
    },
    //获取行政区划树结构数据
    getAdDataList: function (node, resolve) {
      try {
        getAddTree(this.rootAddCode, this.level).then((res) => {
          if (res.data) {
            this.treeData = res.data.children;
            this.treeLoading = false;
          }
        });
      } catch (e) {}
    },
    //树节点点击事件
    treeNodeClickHandler: function (data, node, tree) {
      this.$emit('addvTreeNodeClick', data);
      //判断父组件需要的是行政区名称或者编码
      if (this.nameOrCode == 'name') {
        this.addvInfo = data.nm;
        this.addvInfoShow = data.nm;
      } else {
        this.addvInfo = data.id;
        this.addvInfoShow = data.nm;
      }
      this.showMenuTree = false;
    },
    //清除操作
    clearEvent: function () {
      this.$emit('addvTreeNodeClick', { id: '' });
      this.addvInfo = '';
      this.$emit('input', this.addvInfo);
    },
    //关闭面板
    closeTree() {
      this.showMenuTree = false;
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.addvInfo = this.value;
    this.$refs.myInput.$el;
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style >
.mySelectTree{
    position: absolute;
    z-index: 20;
    width: 100%;
    border: 1px solid #e4e7ed;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
    box-sizing: border-box;
    margin: 5px 0;
    padding: 5px;
    background: #fff;
}

</style>
