<template>
  <div class="organization-popover">
    <!-- 气泡框位置 placement="bottomLeft" -->
    <!-- 触发行为 trigger="click" -->
    <!-- 卡片类名 overlayClassName="popover-tree" 注意这里的css类要放到index.html才会生效-->
    <!-- 隐藏后是否销毁 :destroyTooltipOnHide="true" -->
    <a-popover placement="bottomLeft" trigger="click" overlayClassName="popover-tree" :destroyTooltipOnHide="true">
      <template slot="content" id="popover-tree">
        <a-input placeholder="输入关键字进行过滤" @change="onChange" allow-clear v-show="treeData.length != 0"></a-input>
        <!-- 树数据源 :tree-data="treeData" -->
        <!-- 是否自动展开父节点 :auto-expand-parent="false" -->
        <!-- 是否节点占据一行 :blockNode="true" -->
        <!-- 是否展示连接线 showLine 默认false -->
        <!-- 替换 treeNode 中 title,key,children 字段为 treeData 中对应的字段 replaceFields -->
        <!-- 默认选中的树节点 defaultSelectedKeys -->
        <!-- 展开指定的树节点 :expanded-keys="expandedKeys" -->
        <!-- 点击树节点触发 :select="selectTree" -->
        <!-- 展开/收起节点时触发 @expand="onExpand" -->
        <a-tree :tree-data="treeData" :auto-expand-parent="autoExpandParent" :blockNode="true" :defaultSelectedKeys="defaultSelectedKeys" :expanded-keys="expandedKeys" @select="selectTree" @expand="onExpand">
          <template slot="title" slot-scope="{ title }">
            <span v-if="title.indexOf(filterText) > -1">
              {{ title.substr(0, title.indexOf(filterText)) }}
              <span style="color: #f50">{{ filterText }}</span>
              {{ title.substr(title.indexOf(filterText) + filterText.length) }}
            </span>
            <span v-else>{{ title }}</span>
          </template>
        </a-tree>
        <a-empty v-show="treeData.length == 0" description="没有找到组织机构树数据" :image-style="{height: '60px', marginTop: '10px'}" />
      </template>
      <a-button class="organization-tree-button" type="primary">组织机构树
        <a-icon type="down" />
      </a-button>
    </a-popover>
    <div class="organization-tree-organizationName">
      <p class="">{{ selectTitle || '请选择组织机构树' }}</p>
    </div>
  </div>
</template>

<script>
// 组件使用方法
// 1. 引入 import orgTree from '@/components/OrgTree/Index'
// 2. 注册 components: { orgTree },
// 3. 在需要展示的位置放置组件
//    <org-tree defaultOrganizationId="000100020001" startOrganizationId="00010002" @getSelectTreeKey="getSelectTreeKey"></org-tree>
//    说明
//      :defaultOrganizationId 传入默认组织机构ID，可为空，会检查传入的组织结构ID是否在组织机构树中，如不存在则会忽略
//      :startOrganizationId 传入展示组织机构树的起始节点，可为空，但一旦传入会去组织机构树中匹配，如果匹配不到则不展示组织机构树 [满足控权场景]
//      @getSelectTreeKey 当选中某一个组织机构数节点时的回调，传入默认组织机构ID时也会触发回调
//
//    回调函数示例
//      getSelectTreeKey(key) {
//        this.organizationId = key;
//      }
export default {
  props: {
    defaultOrganizationId: String, // 默认显示的组织机构节点
    startOrganizationId: String, // 组织机构数从那个节点开始显示
  },
  data() {
    return {
      // 组织机构树的数据，后续应该从localStorage取
      treeData: [],
      filterText: null, // 搜索关键字
      selectTitle: "", // 选择的组织机构数节点的标题
      selectKey: "", // 选择的组织机构数节点的Key
      autoExpandParent: true, // 是否自动展开父节点
      defaultSelectedKeys: [], // 默认选中的树节点
      expandedKeys: [], // 展开指定的树节点
    };
  },
  created: function () {
    // 组织机构树数据源过滤
    const listData = [
      {
        title: '三峡大学',
        key: '0001',
        children: [
          { title: '三峡大学文学院', key: '00010001' },
          {
            title: '三峡大学水利学院', key: '00010002', children: [
              { title: '三峡大学水利学院第一学院', key: '000100020001' },
              { title: '三峡大学水利学院第二学院', key: '000100020002' },
              { title: '三峡大学水利学院第三学院', key: '000100020003' },
              { title: '三峡大学水利学院第四学院', key: '000100020004' },
              { title: '三峡大学水利学院第五学院', key: '000100020005' },
              { title: '三峡大学水利学院第六学院', key: '000100020006' }
            ]
          },
        ]
      }
    ];
    if (!this.startOrganizationId) {
      this.treeData = listData;
    } else {
      let currentNode = this.getCurrentNode(this.startOrganizationId, listData);
      if (currentNode) this.treeData.push(currentNode);
    }


    // 检查传入的默认显示组织机构节点，如果正确则显示并回调
    if (this.defaultOrganizationId) {
      let currentNode = this.getCurrentNode(this.defaultOrganizationId, this.treeData);
      if (currentNode) {
        this.defaultSelectedKeys.push(this.defaultOrganizationId);
        this.selectTitle = currentNode.title;
        this.selectKey = this.defaultOrganizationId;
        this.$emit('getSelectTreeKey', this.selectKey);
      }
    } else {
      // 如果没有传入默认显示节点 则自动显示树的第一个
      let firstNode = this.treeData[0];
      this.defaultSelectedKeys.push(firstNode.key);
      this.selectTitle = firstNode.title;
      this.selectKey = firstNode.key;
      this.$emit('getSelectTreeKey', this.selectKey);
    }
  },
  methods: {
    // 点击组织机构数节点时调用
    selectTree(selectedKeys, e) {
      this.selectKey = e.node.dataRef.key;
      this.selectTitle = e.node.dataRef.title;
      this.defaultSelectedKeys = [];
      this.defaultSelectedKeys.push(this.selectKey);
      this.$emit('getSelectTreeKey', this.selectKey);
    },
    // 展开/收起节点时触发
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys;
      this.autoExpandParent = false;
    },
    // 筛选组织机构数方法
    getParentKey(value, tree) {
      if (!value) return;

      for (let i = 0; i < tree.length; i++) {
        const node = tree[i];

        if (node.children) {
          if (node.children.some(item => item.title.indexOf(value) > -1)) {
            this.expandedKeys.push(node.key);
          }

          this.getParentKey(value, node.children);
        }
      }
    },
    // 获取组织机构树Key的Title
    getCurrentNode(key, tree) {
      if (!key) return null;

      for (let i = 0; i < tree.length; i++) {
        const node = tree[i];

        if (node.key === key) return node;

        if (node.children) {
          return this.getCurrentNode(key, node.children);
        }
      }

      return null;
    },
    // 搜索框内容发生变化时调用
    onChange(e) {
      const value = e.target.value;
      const this_ = this;
      this.expandedKeys = [];
      this.getParentKey(value, this.treeData);
      // console.log(this.expandedKeys);
      this.filterText = value;
    },
  },
}
</script>

<style scoped>
.organization-popover {
  display: flex;
  border: 1px solid #ebeef5;
  height: 40px;
  margin-top: 8px;
}
.organization-popover > .organization-tree-organizationName {
  background-color: #fff;
  flex: 1;
}
.organization-popover > .organization-tree-organizationName > p {
  margin: 0;
  padding: 0 20px;
  line-height: 40px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.organization-tree-button {
  width: 164px;
  height: 40px;
  line-height: 40px;
  float: left;
  padding: 0px;
  font-size: 14px;
  position: relative;
  margin-top: -1px;
}
</style>



