<!--value-consists-of="LEAF_PRIORITY"-->
<template>
  <treeselect
    class="treePopup"
    v-model="valueT"
    :multiple="true"
    value-consists-of="ALL"
    :options="menuOptions"
    :limit="1"
    :limitText="limitText"
    :normalizer="normalizer1"
    :show-count="true"
    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: Array,
                default() {
                    return []
                }
            }
        },
        watch:{
            treeval:{
                immediate:true,
                handler(val){
                    this.valueT = val;
                }
            },
        },
        computed: {

        },
        data() {
            return {
                // 菜单树选项
                menuOptions: [],
                valueT:this.treeval,
            }
        },
        created() {
            this.getTreeselect();
        },
        methods: {
            /** 查询菜单下拉树结构 */
            getTreeselect() {
                listDept().then(response => {
                    this.menuOptions = this.handleTree(response.data, "deptId", "parentId");
                    // 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]);
                    // }
                    if(this.menuOptions.length>0){
                        let selected = []
                        this.menuOptions.forEach((item,index)=>{
                            selected.push(item.deptId)
                            if(item.children!=undefined&&item.children.length>0 ){
                                item.children.forEach((ite,ind)=>{
                                    selected.push(ite.deptId);
                                    if(ite.children!=undefined&& ite.children.length>0) {
                                        ite.children.forEach((data, i) => {
                                            selected.push(data.deptId);
                                            if( data.children!=undefined&&data.children.length>0){
                                                data.children.forEach((da, ia) => {
                                                    selected.push(da.deptId);
                                                })
                                            }
                                        })
                                    }
                                })
                            }
                        })
                      this.$emit('treeselectFn', selected);
                    }
                });
            },
            /** 转换菜单数据结构 */
            normalizer1(node) {
                if (node.children && !node.children.length) {
                    delete node.children;
                }
                return {
                    id: node.deptId,
                    label: node.deptName,
                    children: node.children
                };
            },
            selectFn(node, instanceId){
                this.$emit('treeselectFn', this.valueT);
            },
            limitText(num){
                let count = num + 1;
                return `已选择${count}`
            },
        }
    }
</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>
