<script setup lang="ts">
import typeUser from "@/data/dummy/keuangan.type_user.json";
import role_menu from "@/data/dummy/keuangan.role_menu.json";
import menu from "@/data/dummy/keuangan.menu.json";
//misal id = 683d57b2bccc67d467a9e10f
// const id=ref('683d57b2bccc67d467a9e10f')
// const { data:role_menu } = await useFetch(`/api/role_menu/${id.value}`)

const props = defineProps({
    data: {
        type: Array,
    },
    columns: {
        type: Array,
    }
})
const updateData = (id) => {
  console.log("update data:", id);
};

const deleteData = (id) => {
  console.log("delete data:", id);
};

</script>
<template>
  <!-- {{ data() }} -->
    <!-- {{props.columns}} -->
  <v-table density="compact">
    <thead>
      <tr>
        <th class="text-left" v-for="(col,index) in columns" :key="index">{{col.label}}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(item,index) in data" :key="index">
        <td v-for="(col,colIndex) in columns" :key="colIndex">{{item[col.key]}}
            <template v-if="col.key == 'actions'">
            <v-btn class="mx-2" @click="updateData(item)">ubah</v-btn>
            <v-btn @click="deleteData(item)">hapus</v-btn>
            </template>
        </td>
      </tr>
    </tbody>
  </v-table>
</template>
