<template>
  <div>
    <div v-clickoutside="closeTree">
      <div @click="inputFocus">
        <el-input
          v-model="inputValue"
          :style="'width:' + width + 'px'"
          placeholder="请选择工机具类型"
        ></el-input>
      </div>
      <div class="treeModule">
        <el-tree
          class="ORGTree"
          v-show="ishowTree"
          ref="tree"
          :data="dataList"
          key="id"
          node-key="id"
          highlight-current
          @node-click="handleNodeClick"
          :props="defaultProps"
        >
        </el-tree>
      </div>
    </div>
  </div>
</template>

<script>
import Clickoutside from "element-ui/src/utils/clickoutside";
export default {
  directives: { Clickoutside },
  props: {
    dataList: {
      type: Array,
      default: () => {
        return []
      }
    },
    // name: {
    //   type: String,
    //   default: ''
    // },
    width: {
      type: Number,
      default: 300
    }
  },
  watch: {

  },
  data() {
    return {
      mineStatusValue: [],
      inputValue: '',
      dataLists: [],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      ishowTree: false,
    }
  },
  mounted() {
  },
  // watch: {
  //   name: function () {
  //     this.inputValue = this.name
  //   }
  // },
  methods: {
    inputFocus() {
      if (this.ishowTree == true) {
        this.ishowTree = false
      } else {
        this.ishowTree = true
      }

    },
    // 关闭树形控件
    closeTree() {
      this.ishowTree = false
    },
    handleNodeClick(e) {
      this.inputValue = e.label
      this.$emit('changeId', e.id)
      this.ishowTree = false
    }
  }

}
</script>

<style scoped>
.treeModule {
  position: absolute; /*这里一定要设置*/
  z-index: 999999; /*这里是该元素与显示屏的距离，据说越大越好，但是我也没有看到效果，因为没有它也是可以的*/
}
.ORGTree {
  width: 240px;
  height: 200px;
  overflow: auto;
  border: 1px solid #ccc7c7;
}
</style>
