<template>
  <div id="">
    <a-tree-select
      v-model:value="showValue"
      :tree-data="treeData"
      show-search
      placeholder="行政区名称"
      search-placeholder="请输入行政区划"
      :fieldNames="{children: 'children', label: 'nm', key: 'id', value: 'nm'}"
      treeNodeFilterProp="label"
      :dropdown-style="{ maxHeight: maxHeight +'px', overflow: 'auto' }"
      allow-clear />
  </div>
</template>

<script>
import { getAddTree } from '../api/duChaAPI.js';
export default {
  props: [
    'maxWidth',
    'maxHeight',
    'rootAddCode',
    'level',
    'value',
    'nameOrCode',
  ],
  data() {
    return {
      addvInfoShow: '', // input保存值
      showValue: '', // input显示值
      showMenuTree: false,
      filterText: '',
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'nm',
      },
      treeLoading: true,
    };
  },
  watch: {
    value: function () {
      this.addvInfoShow = this.value;
    },
  },
  created() {
    this.getAdDataList();
  },
  mounted() {
    this.addvInfoShow = this.value;
  },
  methods: {
    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) {
      data.upAdName = node.parent.data.nm;
      data.level = node.level;
      this.$emit('addvTreeNodeClick', data);
      // 判断父组件需要的是行政区名称或者编码
      if (this.nameOrCode == 'name') {
        this.addvInfoShow = data.nm;
        this.showValue = data.nm; // 使用showValue中间变量代理input中v-model，通过外部组件传入的nameOrCode控制
      } else {
        this.addvInfoShow = data.id;
        this.showValue = data.nm; // 使用showValue中间变量代理input中v-model，通过外部组件传入的nameOrCode控制
      }
      this.showMenuTree = false;
    },
    // 清除操作
    clearEvent: function () {
      // this.$emit('addvTreeNodeClick',"");
      this.addvInfoShow = '';
      this.$emit('input', this.addvInfoShow);
    },
    // 关闭面板
    closeTree() {
      this.showMenuTree = false;
    },
  },
};
</script>

<style lang='less' scoped>

</style>
