<script setup lang="ts">
import { Icon } from "@iconify/vue";

import type { RolePage } from '~/types/setting/menu';

const props = defineProps<{
  page: RolePage;
  level: number;
}>();

const emit = defineEmits(['detail', 'edit', 'delete']);

const handleDetail = (page: RolePage) => emit('detail', page);
const handleEdit = (page: RolePage) => emit('edit', page);
const handleDelete = (page: RolePage) => emit('delete', page);
</script>

<template>
  <div
    :style="{ marginLeft: (level > 0 ? 40 : 0) + 'px' }"
    :class="{ 'is-child': level > 0 }"
    class="page-row-container"
  >
     <v-card class="mb-3 page-card" elevation="2" @click="handleDetail(page)">
      <v-card-text class="pa-5">
        <div class="d-flex align-center">
          <v-avatar color="primary" size="40" class="me-3">
            <Icon :icon="'solar:' + page.icon" width="24" />
          </v-avatar>
          <div class="flex-grow-1">
            <div class="d-flex align-center">
              <h6 class="text-subtitle-1 font-weight-semibold">{{ page.name }}</h6>
            </div>
            <p class="text-muted mb-0">{{ page.url }}</p>
          </div>
          <v-btn icon variant="text" class="ml-2" @click.stop="handleEdit(page)">
            <v-icon>mdi-pencil</v-icon>
          </v-btn>
          <v-btn icon variant="text" class="ml-2" @click.stop="handleDelete(page)">
            <v-icon>mdi-delete</v-icon>
          </v-btn>
        </div>
      </v-card-text>
    </v-card>
    <div v-if="page.children && page.children.length > 0" class="children-container">
      <PageRow
        v-for="child in page.children"
        :key="child.id"
        :page="child"
        :level="level + 1"
        @detail="handleDetail"
        @edit="handleEdit"
        @delete="handleDelete"
      />
    </div>
  </div>
</template>

<style scoped>
.page-row-container {
  position: relative;
}
.page-card {
  cursor: pointer;
}
.children-container {
  position: relative;
}


.children-container::before {
  content: '';
  position: absolute;
  top: -12px;
  bottom: 0;
  left: 20px;
  width: 3px;
  background-color: #e0e0e0;
}

.children-container > .page-row-container::before {
    content: '';
    position: absolute;
    top: 28px;
    left: -20px;
    width: 20px;
    height: 3px;
    background-color: #e0e0e0;
}
</style>
