<template>
  <q-card flat style="border: tomato 2px solid; padding: 10px; margin: 10px">
    <!-- Отображаем текущий узел -->
    <q-card-section horizontal>
      <div>
        <div>
          <!-- {{ node.nomo.enhavo }} -->
          {{ node.name }}
          <span class="text-green">{{ node.childrens.length }}</span>
          <span v-if="isAdmin">
            <q-icon
              v-if="node.isPublished"
              color="blue"
              name="published_with_changes"
            />
            <q-icon v-else color="grey" name="unpublished" />
          </span>

          <span v-if="isAdmin">
            <q-icon
              v-if="node.isDeleted"
              color="orange"
              name="delete_forever"
            />
            <q-icon v-else color="grey" name="delete_forever" />
          </span>
        </div>
        <div class="text-subtitle1">
          {{ node.description }}
        </div>

        <div class="text-subtitle2 text-brown">
          {{ node.uuid }}
        </div>
        <div class="text-subtitle2 text-green">
          {{ node.type }}
        </div>
      </div>
      <!-- <pre class="text-caption text-brown">{{ node }}</pre> -->
      <q-card-actions align="right" vertical>
        <q-btn
          flat
          round
          color="primary"
          icon="edit"
          @click="emitEvent('edit', node)"
        >
          <q-tooltip> Редактирование </q-tooltip>
        </q-btn>
        <q-btn
          v-if="node.typeId < 4"
          flat
          round
          color="teal"
          icon="add"
          @click="emitEvent('add', node)"
        >
          <q-tooltip> Добавить потомка </q-tooltip>
        </q-btn>
        <q-btn
          flat
          round
          color="red"
          icon="delete"
          @click="emitEvent('delete', node)"
        >
          <q-tooltip> Удалить </q-tooltip>
        </q-btn>
      </q-card-actions>
    </q-card-section>

    <!-- Рекурсивно отображаем дочерние узлы -->
    <q-card-section
      v-if="node && node.childrens.length"
      class="q-pa-md row items-start q-gutter-md"
    >
      <template v-for="child in node.childrens" :key="child.uuid">
        <tree-node
          :node="child"
          @edit="$emit('edit', $event)"
          @add="$emit('add', $event)"
          @delete="$emit('delete', $event)"
        ></tree-node>
      </template>
    </q-card-section>
  </q-card>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue';
import { mapState } from 'pinia';
import { useCurrentUserStore } from '../stores/current-user';
import { debugLog } from '../utils';
export default defineComponent({
  name: 'TreeNode',
  props: {
    node: {
      type: Object,
      required: true,
    },
  },
  components: {
    // Рекурсивное подключение компонента
    TreeNode: () => import('./TreeNode.vue'),
  },
  methods: {
    emitEvent(action, node) {
      this.$emit(action, node);
    },
  },
  computed: {
    ...mapState(useCurrentUserStore, ['isAdmin']),
  },
});
</script>
