<template>
  <div id="">
    <div class="mySelectTree" v-if="showMenuTree" :style="{'width': maxWidth +'px'}">
      <a-row>
        <a-button type="link" style="float:right;padding:0;" @click="closeTree()" icon="close-circle"></a-button>
      </a-row>
      <a-row>
        <!-- <a-tree
          :tree-data="treeData"
          :fieldNames="defaultProps"
          :filter-tree-node="filterNode"
          @select="treeNodeClickHandler"
          ref="tree"
          :style="{'max-height': maxHeight +'px'}"
          style="overflow:auto;"
          class="filter-tree"
        >
        </a-tree> -->
        <a-tree-select
          v-model:value="addvInfoShow"
          :fieldNames="defaultProps"
          :tree-data="treeData"
          show-search
          :dropdown-style="{ maxHeight: maxHeight + 'px', overflow: 'auto' }"
          allow-clear
          ref="tree"
        />
      </a-row>
    </div>
  </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',
        title: 'nm',
        key: 'id',
        value: 'nm',
      },
      treeLoading: true,
    };
  },
  // 监控data中的数据变化
  watch: {
    showValue(val) {
      console.log(this.$refs, val);
      // 下面一步是行政区划input过滤
      this.$refs.tree.filter(val);
      // 上传input保存值
      this.$emit('input', this.addvInfoShow);
    },
    value: function () {
      this.addvInfoShow = this.value;
    },
  },
  mounted() {
    this.addvInfoShow = this.value;
    // this.$refs.myInput.$el
  },
  methods: {
    showSelet() {
      // alert(1);
      this.showMenuTree = true;
      this.getAdDataList();
    },
    // 获取行政区划树结构数据
    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) {}
    },
    filterNode(node) {
      console.log(node, 'filterNode');
      // // 如果什么都没填就直接返回
      // if (!node) 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;
    },
    // 树节点点击事件
    // treeNodeClickHandler: function (node, event) {
    //   console.log(node, event, 'treeNodeClickHandler')
    //   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>
