<template>
  <treeselect
    class="treePopup"
    v-model="valueT"
    :multiple="false"
    :disable-branch-nodes="true"
    value-consists-of="LEAF_PRIORITY"
    :options="menuOptions"
    :normalizer="normalizer1"
    placeholder="选择组织架构"
    noOptionsText="暂无数据"
    @input="selectFn"
  />
</template>

<script>
    import Treeselect from "@riophae/vue-treeselect";
    import "@riophae/vue-treeselect/dist/vue-treeselect.css";
    import { listDept } from "@/api/system/dept";
    export default {
        name: "Tree",
        components: { Treeselect },
        // props: {
        //     treeval: {
        //         type: Number,
        //         default:null
        //     }
        // },
        props:{
            treeval:{
                type:Number,
                default:null,
            },
            isDisabled:{
                type:Boolean,
                default:false,
            },
        },
        watch:{
            treeval:{
                immediate:true,
                handler(val){
                    this.valueT = val;
                }
            },
            isDisabled:{
                immediate:true,
                handler(val){
                    this.isDisabled = val;
                    this.getTreeselect();
                }
            },
        },
        computed: {

        },
        data() {
            return {
                // 菜单树选项
                menuOptions: [],
                valueT:this.treeval,
            }
        },
        created() {
            this.getTreeselect();
        },
        methods: {
            /** 查询菜单下拉树结构 */
            getTreeselect() {
                listDept().then(response => {
                    this.menuOptions = this.handleTree(response.data, "deptId", "parentId");
                    console.log(this.menuOptions)
                    if(this.menuOptions.length == 1 && (this.menuOptions[0].children == null || this.menuOptions[0].children == undefined||
                        (this.menuOptions[0].children != undefined && this.menuOptions[0].children != null && this.menuOptions[0].children.length == 0))){
                        this.$emit('treeselectFn', this.menuOptions[0].deptId);
                    }
                });

            },
            /** 转换菜单数据结构 */
            normalizer1(node) {
                let that = this;
                if (node.children && !node.children.length) {
                    delete node.children;
                }
                return {
                    id: node.deptId,
                    label: node.deptName,
                    children: node.children,
                    isDisabled:that.isDisabled
                };
            },
            selectFn(node, instanceId){
                this.$emit('treeselectFn', this.valueT);
            },
        }
    }
</script>

<style lang="scss" scoped>
  .treePopup {
    ::v-deep.vue-treeselect__menu {
      overflow-x: auto!important;
    }

    ::v-deep .vue-treeselect__label{
      overflow: unset;
      text-overflow: unset;
    }
  }

</style>
