<template>
  <div>
    {{ treeParams.data }}
    <el-tree-select
      ref="treeSelectRef"
      v-model.trim="inputValue"
      :multiple="this.$attrs.multiple"
      :styles="Object.assign(this.$attrs.styles, {width: '100%'})"
      :selectClass="this.$attrs.selectClass"
      :popoverClass="this.$attrs.popoverClass"
      :disabled="this.$attrs.disabled"
      :clearable="this.$attrs.clearable || true"
      :placeholder="placeholder"
      :selectParams="{
        ...selectParams,
        multiple
      }"
      :treeParams="treeParams"
      :placement="placement"
      :treeRenderFun="this.$attrs.treeRenderFun"
      :filterable="this.$attrs.filterable"
    ></el-tree-select>
  </div>
</template>

<script>
export default {
  name: "form-select-tree-demo",

  methods: {
    treeDataUpdateFun(data) {
      this.$refs.treeSelectRef.treeDataUpdateFun(data);
    }
  },
  computed: {
    inputValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val);
      }
    }
  },
  props: {
    value: [ String, Array, Number ],
    // 文本框参数，几乎支持el-select所有的API 取消参数：
    // 设定下拉框的弹出框隐藏：:popper-append-to-body="false"
    // 搜索从弹出框里面执行 filterable="false"
    selectParams: {
      type: Object,
      default: () => {
        return null
      }
    },
    treeParams: {
      type: Object,
      default: () => {
        return null
      }
    },
    multiple: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    placeholder: {
      type: String,
      default: () => {
        return null
      }
    },
    placement: {
      type: String,
      default: () => {
        return "bottom"
      }
    }
  }
}
</script>

<style scoped>

</style>