<template>
    <page-container>
         <FullPage>
             <div class="dictionary_contain">
                 <div class="dictionary_left">
                     <Left :listData="listData" @select-data="selectData"/>
                 </div>
                 <div class="dictionary_right">
                     <Right :listData="listData" :groupId="groupId"/>
                 </div>
             </div>
         </FullPage>
    </page-container>
 </template>
 
 <script lang="ts" setup>
 import Left from './RoleLeft/index.vue'
import Right from './RoleRight/index.vue'
import { TreeNode } from './type';
import { treeList } from '@/views/gis/data'
import { Ref } from 'vue';
const listData: Ref<TreeNode[]> = ref(treeList);
 const groupId = ref()
 const selectData = (data:any)=>{
    groupId.value = data[0]
 }
 </script>
 <style lang="less" scoped>
 .dictionary_contain{
     display: flex;
     background-color: #fff;
     padding: 24px;
     height: 100%;
 }
 .dictionary_left{
     border-right: 1px solid #f0f0f0;
     padding-right: 24px;
     flex:1;
     height:100%
 }
 .dictionary_right{
     flex:4
 }
 </style>