<script setup lang="ts">
import {useSettingStore} from "@/stores/api/setting/setting"

const {getMenu,getRoleMenuById,getTypeUser} = useSettingStore()
const {roleMenuById,listMenu,listTypeUser} = storeToRefs(useSettingStore())

const data = ref<any>([])

const dataMenu = async() => {
    await getMenu()
    await getTypeUser()
    return roleMenuById.value.data.map((role_menu: any) => {
        const menuItem = listMenu.value.find((menu:any) => menu._id == role_menu.menu_id)
        const type_user= listTypeUser.value.find((type_user:any) => type_user._id == role_menu.type_user_id)
    return {
      _id: role_menu._id,
      menu: menuItem?.display || '-',
      type_user: type_user?.display || '-',
      accessAdd: role_menu.access?.[0]?.add || 0,
      accessUpdate: role_menu.access?.[1]?.update || 0,
      accessRead: role_menu.access?.[2]?.read || 0,  
      accessDelete: role_menu.access?.[3]?.delete || 0
    }
  });
};

const onSubmit = async() => {
    // console.log("ini disimpan:",data.value?.data.typeUser);
    // console.log("ini disimpan:",data.value?.form$.data);
    // await getTypeUser(data.value?.form$.data)
}
onMounted(async () => {
//   console.log(roleMenuById.value.data);
  data.value = await dataMenu()
  // console.log(data.value);
})

const columns=ref([
    {label:'Nama Menu',key:'menu'},
    {label:'Tambah',key:'accessAdd'},
    {label:'Ubah',key:'accessUpdate'},
    {label:'Baca',key:'accessRead'},
    {label:'Hapus',key:'accessDelete'},
    {label:'Aksi',key:'actions'},
])
</script>

<template>
  <div class="d-flex flex-column gap-1 mx-1 pa-7 pt-0 pb-0">
    <MasterTable :columns="columns" :data="data"/>
  </div>
</template>
