<template>
  <ResizablePage 
    :defaultWidth="200"
    :minWidth="150"
    :maxWidth="420"
    bgColor="#fff" 
  >
    <template #sidebar>
      <div class="sidebar-content">
       <FilterSelect
		 :list-data="listData"
		 node-key="roleId"
		 label-key="roleName"
		 @item-click="handleItemClick" 
		 @edit="handleEdit"
		 @delete="handleDelete"
		 @view="handleView"
	   />
      </div>
    </template>
    <template #main>
      <div class="main-content">
		  <vUser />
      </div>
    </template>
  </ResizablePage>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ResizablePage from '@/components/Layout/proResizable.vue'
import FilterSelect from '@/components/Table/proFilterSelect.vue'

import { getHomeRoleList } from '@/api/bizRole'
import vUser from './list.vue'

const FormValues = ref({
  menuId: ''
});

const listData = ref([]);

const getListData = async () => {
  try {
    const res = await getHomeRoleList();
	listData.value = res || []
  } catch (error) {
	  console.log(error);
  }
}

const handleItemClick = (item) => {
  console.log('选中了：', item)
}

// 操作事件处理
const handleEdit = (item) => {
  console.log('编辑', item)
}

const handleDelete = (item) => {
  console.log('删除', item)
}

const handleView = (item) => {
  console.log('查看', item)
}

onMounted(() => {
	getListData();
})
</script>

<style scoped>
.sidebar-content {
  width: 100%;
  height: 100%;
}

.main-content {
  padding: 0px;
  height: 100%;
}
</style>