<template>
  <div class="es-selector-tree">
    <el-input
      v-model="seachkey"
      placeholder="请输入搜索关键字"
      class="es-selector-tree-search"
      @change="handleChangeSearch"
    >
      <template slot="append">
        <el-button
          icon="el-icon-search"
          type="primary"
          @click="handleSearch"
        ></el-button>
      </template>
    </el-input>
    <div
      v-loading="loading"
      element-loading-text="加载中..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      class="es-tree-content"
    >
      <el-scrollbar class="es-scrollbar">
        <el-tree
          ref="tree"
          class="es-filter-tree"
          empty-text="暂无数据"
          node-key="id"
          :indent="12"
          :data="contents"
          :props="props"
          :filter-node-method="filterNode"
          :expand-on-click-node="false"
          :highlight-current="true"
          @node-expand="handleExpand"
          @node-click="handleClick"
        >
          <el-tooltip
            :content="node.label"
            placement="right"
            :auto="true"
            slot-scope="{ node, data }"
          >
            <div
              :class="[
                {
                  'es-icon-node': icon,
                  'es-icon-group':
                    data.attributes && data.attributes.isentity === '0',
                  'es-icon-open': node.expanded
                },
                data.attributes && data.attributes.orgType
                  ? 'es-icon-' + data.attributes.orgType
                  : ''
              ]"
            >
              {{ node.label }}
            </div>
          </el-tooltip>
        </el-tree>
      </el-scrollbar>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Tree',
  props: {
    data: {
      type: [Array, Object],
      default() {
        return [];
      }
    },
    icon: {
      type: Boolean,
      default: true
    },
    loading: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      props: {
        label: 'name',
        children: 'children'
      },
      seachkey: '',
      chooseNode: ''
    };
  },
  computed: {
    contents() {
      return this.data;
    }
  },
  watch: {},
  mounted() {},
  methods: {
    // 树节点展开
    handleExpand(data, node) {
      this.$emit('loadsub', data, node);
    },
    handleClick(data, node) {
      this.$emit('loadsub', data, node, true);
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    loadNode(node, resolve) {
      this.$emit('load', node, resolve);
    },
    handleChangeSearch() {
      if (this.seachkey === '') {
        this.$emit('search', '');
      }
    },
    handleSearch() {
      if (this.seachkey !== '') {
        this.$emit('search', this.seachkey);
      }
    }
  }
};
</script>
