<template>
  <treeselect
    v-model="valueT"
    :multiple="false"
    :disable-branch-nodes="true"
    value-consists-of="LEAF_PRIORITY"
    :options="menuOptions"
    :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 { streetTree } from "@/api/sfa/streetDept";
    export default {
        name: "Tree",
        components: { Treeselect },
        props: {
            treeval: {
                type:String,
                default:null,
            }
        },
        watch:{
            treeval:{
                immediate:true,
                handler(val){
                    console.log(val)
                    if(val!=null && val.length == 0){
                        this.valueT = null;
                    }else{
                        this.valueT = val;
                    }
                }
            },
        },
        computed: {

        },
        data() {
            return {
                // 菜单树选项
                menuOptions: [],
                valueT:this.treeval,
            }
        },
        created() {
            this.getTreeselect();
        },
        methods: {
            /** 查询菜单下拉树结构 */
            getTreeselect() {
                streetTree().then(response => {
                    console.log(response)
                    this.menuOptions = response.data;
                });

            },
            /** 转换菜单数据结构 */
            normalizer1(node) {
                if (node.children && !node.children.length) {
                    delete node.children;
                }
                return {
                    id: node.code?node.code:null,
                    label: node.name?node.name:null,
                    children: node.children
                };
            },
            selectFn(node, instanceId){
                this.$emit('treeselectFn', this.valueT);
            },
            limitText(num){
                let count = num + 1;
                return `已选择${count}`
            },
        }
    }
</script>

<style scoped>

</style>
