<template>
  <treeselect
    v-model="val"
    :options="deptOptions"
    :normalizer="normalizer"
    v-bind="$attrs"
    @select="select"
    ref="tree"
  />
</template>
<script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { deptTreeSelect } from "@/api/system/public";
import sync from "@/components/computed.sync.js";
export default {
  name: "orgDropTree",
  data() {
    return {
      deptOptions: [],
    };
  },
  props: {
    value: {
      type: String,
    },
    label: {
      type: String,
      default: "shortName",
    },
  },
  watch: {
    // value(v){
    //   // debugger
    //   // console.info("watch",v);
    // }
  },
  computed: {
    val: sync("value"),
  },
  components: { Treeselect },

  methods: {
    /** 查询机构下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
        // console.log(this.deptOptions, " this.deptOptions");
        if (response.data && response.data.length > 0) {
          // this.val = response.data[0].id;
          // this.value = response.data[0].id;
          // let t=this.$refs.tree;
          // debugger;
          // this.$emit("input", response.data[0].id);
          if(this.val){
            this.$emit("select", response.data[0]);
          }
        }
      });
    },
    /** 转换机构数据结构 */
    normalizer(node) {
      if (node.children == null || node.children.length == 0) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node[this.label],
        children: node.children,
      };
    },
    select(node) {
      this.$emit("select", node);
    },
  },
  mounted() {
    this.getDeptTree();
  },
};
</script>
<style scoped lang="scss">
::v-deep {
  .vue-treeselect__menu {
    overflow-x: auto !important;
    width: 250px;
    max-height: 300px !important;
  }

  
  .vue-treeselect__label {
    overflow: unset;

    text-overflow: unset;
  }


  .vue-treeselect div,
  .vue-treeselect span {
    box-sizing: content-box;

    // white-space: nowrap;

    // text-overflow: ellipsis;
  }

  // 选中后的溢出隐藏

  .vue-treeselect__multi-value-label {
    display: block;

    width: 140px;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
  }


}
</style>
