<template>
  <div id="project-section-tree">
    <el-input v-model="treeFilterText" placeholder="输入关键字进行过滤" clearable />
    <!-- <el-scrollbar wrap-class="scrollbar-wrapper" :style="{ height: height }"> -->
    <el-tree
      ref="tree"
      style="margin-top:5px;"
      class="filter-tree"
      :props="treeProps"
      :filter-node-method="filterTree"
      :load="loadTreeNode"
      :highlight-current="true"
      lazy
      @node-click="nodeClick"
    >
      <span slot-scope="{ data }" class="custom-tree-node">
        <el-tag size="mini">项目</el-tag>
        <el-tooltip :content="data.name" placement="right" effect="light" transition>
          <span>{{ data.name }}</span>
        </el-tooltip>
      </span>
    </el-tree>
    <!-- </el-scrollbar> -->
  </div>
</template>

<script>
import * as projectApi from '@/api/backbone/project'

export default {
  props: {
    height: {
      type: String,
      default: 'calc(100vh - 220px)'
    }
  },
  data() {
    return {
      treeFilterText: '',
      treeData: [],
      treeProps: {
        children: 'children',
        label: 'name',
        isLeaf: 'isProject'
      }
    }
  },
  watch: {
    treeFilterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    filterTree(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    loadTreeNode(node, resolve) {
      if (node.level === 0) {
        projectApi.lookupAll().then(projects => {
          projects.forEach(t => {
            t.isProject = true
            t.name = t.shortName || t.name
          })
          return resolve(projects)
        })
      } else {
        return resolve([])
      }
    },
    nodeClick(data, node) {
      this.$emit('node-click', data, node)
    }
  }
}
</script>
