<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>