<i18n>
{
  "en": {
    "RolesCard": {
      "tab": "Roles",
      "chosenRoles": "Selected Roles",
      "edit": "Edit"
    }
  },
  "ru": {
    "RolesCard": {
      "tab": "Роли",
      "chosenRoles": "Выбранные роли",
      "edit": "Редактировать"
    }
  }
}
</i18n>

<template>
  <div v-if="common.active === 'roles'" class="q-pb-md">
    <q-card v-if="!loading" class="no-shadow q-pb-md q-gutter-y-md q-mx-md">
      <div class="q-py-md q-mx-md">
        <div
          class="q-mt-lg q-pl-md q-pr-xs"
          style="border: 1px solid #ebebeb; border-radius: 3px"
        >
          <div class="q-gutter-y-md q-py-md full-width">
            <div class="row flex justify-between">
              <div class="text-h6 text-grey-9">
                {{ $t('RolesCard.chosenRoles') }}
              </div>
            </div>
            <q-tree
              ref="tree"
              class="col-12 col-sm-6"
              :nodes="rolesFormatted"
              node-key="id"
              :ticked.sync="rolesList"
              :filter="treeFilterString()"
              :filter-method="filterSelected"
              no-results-label="Ни одной роли не выбрано"
            />
            <q-btn
              class="q-mt-md"
              unelevated
              color="primary"
              :label="$t('RolesCard.edit')"
              type="button"
              @click="editRoles"
            />
          </div>
        </div>
      </div>
    </q-card>
    <div v-if="loading" style="padding: 200px">
      <q-inner-loading :showing="loading">
        <q-spinner-gears color="primary" size="50px" />
      </q-inner-loading>
    </div>
  </div>
</template>

<script lang="ts">
// @ts-nocheck
import { DomainApi, LinksApi } from '@openapi/idm';
import { ERVU_SCOPES } from '@constants/entities/Scope';

const domainApi = new DomainApi();
const linksApi = new LinksApi();

export default {
  props: ['common', 'model'],
  data() {
    return {
      organization: {
        dialogDelete: false,
        fullname: '',
        id: '',
      },
      loading: false,
      rolesFormatted: [],
      rolesList: [],
      solutions: [],
      isErvuMode: this.$AC.haveOneOfScope(Object.values(ERVU_SCOPES)),
    };
  },
  computed: {
    outputData() {
      return {};
    },
  },
  watch: {
    model: {
      handler: function (val) {
        if (val) {
          if (val.solutions) {
            this.solutions = val.solutions;
          }
          if (val.fullname) {
            this.organization.fullname = val.fullname;
          }
          if (val.id) {
            this.organization.id = val.id;
          }
        }
      },
      immediate: true,
    },
    'common.active': {
      handler(val) {
        if (val === 'roles') {
          this.initSolutions();
        }
      },
      immediate: true,
    },
  },
  methods: {
    initSolutions() {
      linksApi
        .pagingLinks(
          'Organization',
          this.common.id,
          'Solution',
          undefined,
          undefined,
          undefined,
          undefined,
          'roles'
        )
        .then(({ data }) => {
          this.solutions = data.records || [];

          domainApi
            .getDomain(this.common.id, 'roles')
            .then(({ data }) => {
              this.rolesFormatted = this.changeProperties(this.solutions);

              if (this.isErvuMode) {
                this.rolesFormatted = this.filterNonErvuRoles(this.rolesFormatted);                
              }

              if (data.roles) {
                this.rolesList = data.roles.map((itemRole) => itemRole.id);
              }
              this.$nextTick().then(() => {
                this.$refs.tree.expandAll();
                this.rolesFormatted = this.rolesFormatted.map((item) => {
                  item.label = item.displayName;

                  return { ...item };
                });
              });
            })
            .catch(() => {
              throw new Error(
                '[components][cards][organizations][Roles][domainApi]'
              );
            });
        })
        .catch(() => {
          throw new Error(
            '[components][cards][organizations][Roles][linksApi]'
          );
        });
    },
    treeFilterString() {
      if (this.rolesList.length) {
        return this.rolesList.toString();
      } else {
        // Возвращаем никому неизвестный GUID что бы ни одного совпадения не было найдено
        // дело в том что если в q-tree в свойство 'filter' присвоить пустую строку то
        // никакой фильтрации не будет и filter-method (filterSelected()) даже не будет вызываться
        // таким образом отобразится всё дерево
        return 'd6a7e142-82fc-4829-874a-edc6f834b6aa';
      }
    },
    filterSelected(node, filter) {
      const checkArray = filter.split(',');

      return checkArray.includes(node.id);
    },
    changeProperties(arr) {
      if (arr && arr instanceof Array) {
        return arr
          .filter((item) => item.roles)
          .map(function changeList(item) {
            const returnObj = {
              id: item.id,
              label: item.displayName,
              ...item,
            };

            if (item.roles && item.roles instanceof Array) {
              returnObj.children = item.roles.map(changeList);
            }
            return returnObj;
          });
      }
      return [];
    },
    // фильтруем все ветки у которых нет ролей с флажком ervuRole == true
    filterNonErvuRoles(nodes: Array<any>) {
      return nodes.map(node => {
        return {
          ...node,
          children: node.children.filter((role: Role) => role.ervuRole).map((r: Role) => ({
            ...r,
            label: r.displayName,
          })),
        }
      }).filter(node => node.children && node.children.length);    
    },    
    editRoles() {
      this.$store.dispatch('wf/processes/dispatchProcess', {
        processKey: 'AssignRolesToOrganizationProcess',
        data: {
          organizationId: this.organization.id,
          domain: this.organization.id,
          isErvu: this.isErvuMode ? true : undefined,
        },
      });
      this.loading = true;
    },
  },
};
</script>
