<template>
  <el-popover
    v-model="treePop"
    :props="defaultProps"
    :width="treeInputWidth"
    popper-class="single-selection-tree"
    :title="placeholder ? placeholder : '请选择上级组织'"
    placement="bottom-start"
    trigger="focus"
  >
    <el-scrollbar class="default-scrollbar" style="height: 300px" wrap-class="default-scrollbar__wrap">
      <el-tree
        ref="orgTree"
        :highlight-current="true"
        :node-key="'id'"
        :data="treeData"
        accordion
        :expand-on-click-node="false"
        :default-expand-all="true"
        class="popTree"
        :check-on-click-node="true"
        @node-click="treeNodeClick"
        icon-class="fa fa-chevron-circle-right"
        :props="defaultProps"
      >
      </el-tree>
    </el-scrollbar>
    <el-input
      :size="size"
      :value="model"
      autocomplete="off"
      slot="reference"
      ref="input"
      :placeholder="placeholder ? placeholder : '请选择上级组织'"
      :style="{ width: width + 'px' }"
      class="input-with-select"
      :readonly="true"
    >
      <slot slot="prepend"></slot>
      <el-button slot="append" :size="size" :icon="icon"></el-button>
    </el-input>
  </el-popover>
</template>

<script>
export default {
  name: "selectBox",
  props: {
    icon: {
      type: String,
      default: "fa fa-th-list",
    },
    treeInputWidth: {
      type: Number,
      default: 400,
    },
    size: {
      type: String,
      default: "small",
    },
    treeData: {
      type: Array,
      default: () => {
        return [];
      },
    },
    placeholder: {
      type: String,
      default: "请选择",
    },
    width: {
      type: String,
      default: "200px",
    },
    model: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      //搜索框字段
      filterText: "",
      //树状表格数据
      defaultProps: {
        children: "children",
        label: "name",
      },
      //树状目录弹出窗是否可见
      treePop: false,
      //树状输入框文字
      //树状目录已选数据
      treeSelectedData: {
        name: "",
        id: null,
      },
      //输入框的宽
    };
  },
  methods: {
    defultInputVal(val) {
      this.treeSelectedData.name = val;
    },
    treeNodeClick(data) {
      /* this.$set(this.treeSelectedData, 'name', data.name);
                this.$set(this.treeSelectedData, 'id', data.id);*/
      this.$emit("select", {
        id: data.id,
        name: data.name,
      });
      this.treePop = false;
      // this.$emit("listenToChildEventB",)
    },
  },

  watch: {
    //监听当前选择项发生变化
    /*     treeSelectedData: {
                deep: true,
                handler() {
                    //点击后主动向父组件传值事件   提交

                }
            },*/
    //监听树数据发生变化
    treeData: {
      deep: true,
      handler(data) {
        if (data.length !== 0) {
          this.$emit("change", this.treeData);
        }
      },
    },
  },
};
</script>

<style lang="scss">
.single-selection-tree {
  .el-popover {
    .el-popover__title {
      font-size: 14px;
    }
  }

  .popTree {
    border: 1px solid #d9dae0;
    padding: 5px;

    .el-tree-node__content {
      height: 36px;
    }

    .is-current {
      /*.el-tree-node__content{*/
      /*    background-color: #005996;*/
      /*    color: #FFF;*/
      /*}*/
    }
  }
}
</style>
