<i18n>
{
  "en": {
    "ResourcesSuccessForm": {
      "label": "Service general description",
      "added": "Added",
      "removed": "Removed",
      "next": "Next"
    }
  },
  "ru": {
    "ResourcesSuccessForm": {
      "label": "Общая информация по сервису",
      "added": "Добавлены",
      "removed": "Удалены",
      "next": "Далее"
    }
  }
}
</i18n>
<template>
  <q-form class="q-gutter-y-md" @submit="submit">
    <div class="text-h6">
      {{ $t('ResourcesSuccessForm.label') }}
    </div>
    <div class="row q-gutter-y-md">
      <div class="col-6">
        <div class="text-subtitle2">
          {{ $t('ResourcesSuccessForm.added') }}:
        </div>
        <q-separator />
        <q-tree :nodes="added" node-key="id" default-expand-all />
      </div>
      <div class="col-6">
        <div class="text-subtitle2">
          {{ $t('ResourcesSuccessForm.removed') }}:
        </div>
        <q-separator />
        <q-tree :nodes="removed" node-key="id" default-expand-all />
      </div>
    </div>
    <q-btn
      color="primary"
      :label="$t('ResourcesSuccessForm.next')"
      type="submit"
    />
  </q-form>
</template>

<script lang="ts">
// @ts-nocheck
export default {
  props: ['input-data'],
  data() {
    return {
      added: [],
      removed: [],
    };
  },
  computed: {
    outputData() {
      return {};
    },
  },
  created() {
    this.added = this.inputData.created.resourceScopes.map((el, i) => {
      const returnObj = {
        label: el.description,
        id: i,
      };
      if (el.permissions) {
        returnObj.children = el.permissions.map((el) => {
          return { label: el };
        });
      }
      return returnObj;
    });

    this.removed = this.inputData.resourceScopes.map((el) => {
      return {
        label: el.description,
      };
    });
  },
  methods: {
    submit(e) {
      this.$emit('submit', e, this.outputData);
    },
  },
};
</script>
