<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,      
    },
  },
  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);
          // 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.name,
        children: node.children,
      };
    },
    select(node) {
      this.$emit("select", node);
    },
  },
  mounted() {
    this.getDeptTree();
  },
};
</script>
