<template>
  <treeselect
    v-model="valueT"
    :multiple="true"
    value-consists-of="LEAF_PRIORITY"
    :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 { streetTree } from "@/api/sfa/streetDept";
    export default {
        name: "Tree",
        components: { Treeselect },
        props: {
            treeval: {
                type: Array,
                default() {
                    return []
                }
            }
        },
        watch:{
            treeval:{
                immediate:true,
                handler(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;
                    console.log(this.menuOptions)
                    // if(this.menuOptions.length>0){
                    //     let selected = []
                    //     this.menuOptions.forEach((item,index)=>{
                    //         selected.push(item.code)
                    //         if(item.children!=undefined&&item.children.length>0 ){
                    //             item.children.forEach((ite,ind)=>{
                    //                 selected.push(ite.code);
                    //                 if(ite.children!=undefined&& ite.children.length>0) {
                    //                     ite.children.forEach((data, i) => {
                    //                         selected.push(data.code);
                    //                         if( data.children!=undefined&&data.children.length>0){
                    //                             data.children.forEach((da, ia) => {
                    //                                 selected.push(da.code);
                    //                             })
                    //                         }
                    //                     })
                    //                 }
                    //             })
                    //         }
                    //     })
                    //     console.log(selected)
                    //     this.$emit('treeselectFn', selected);
                    // }
                });

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

<style scoped>

</style>
