<template>
  <div>
    <el-popover ref="popover" :placement="placement" trigger="click" :disabled="isEdit == 2">
      <el-tree
        :data="data"
        :props="props"
        node-key="nodeKey"
        ref="popupTree"
        @current-change="currentChangeHandle"
        :default-expand-all="defaultExpandAll"
        :accordion="accordion"
        :highlight-current="true"
        :expand-on-click-node="true"
      ></el-tree>
    </el-popover>
    <el-input
      :disabled="isEdit == 2"
      v-model="prop"
      v-popover:popover
      :readonly="true"
      :placeholder="placeholder"
      style="cursor:pointer;"
    ></el-input>
  </div>
</template>

<script>
export default {
  name: 'PopupTreeInput',
  props: {
    isEdit: {
      type: Number,
      default: 0,
    },
    data: {
      type: Array,
    },
    props: {
      type: Object,
    },
    prop: {
      type: String,
      default: ''
    },
    nodeKey: {
      type: String,
      default: ''
    },
    placeholder: {
      type: String,
      default: '请选择内容'
    },
    placement: {
      type: String,
      default: 'bottom-start'
    },
    defaultExpandAll: {
      type: Boolean,
      default: false
    },

    accordion: {
      type: Boolean,
      default: true
    },
    currentChangeHandle: {
      type: Function,
      default: null
    }
  },
}
</script>

<style scoped>
</style>