<template>
  <div v-if="common.active === 'data' && !loading" class="q-pb-md">
    <q-card class="no-shadow q-pb-md q-gutter-y-md q-mx-md">
      <div class="q-mx-md">
        <div class="q-py-md">
          <base-label-value class="q-pa-xs q-gutter-x-md">
            <template #label>
              {{ $t('notifications.messageTopic') }}
            </template>

            <template #value>
              {{ get(template, 'name', '') }}
            </template>
          </base-label-value>
          <base-html-view
            class="q-pa-xs q-gutter-x-md"
            label="Тело email уведомления"
            :body="get(template, 'body', '')"
          />
        </div>
        <q-btn
          class="q-mx-md q-mt-md"
          unelevated
          color="primary"
          :label="$t('notifications.edit')"
          type="button"
          @click="editDomainNotifications"
        />
      </div>
    </q-card>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { BaseCardCommon } from '@interfaces/components';
import { Notification } from '@openapi/idm';
import { TemplatesApi } from '@openapi/notifier-registry';
import get from 'lodash/get';

@Component({
  methods: {
    get,
  },
})
class NotificationsCardData extends Vue {
  @Prop({}) private common?: BaseCardCommon;
  @Prop({}) private model?: Notification;

  private template: any | null = null;

  private templatesService = new TemplatesApi();

  @Watch('model', {
    immediate: true,
  })
  async modelWatcher(val: Notification) {
    if (!val) return;

    if (val.templateId) {
      ({ data: this.template } = await this.templatesService.getMessageTemplate(
        val.templateId
      ));
    } else {
      this.template = {
        name: val.messageTopic?.toString() || '',
      };
    }
  }

  editDomainNotifications(): void {
    this.$store.dispatch('wf/processes/dispatchProcess', {
      processKey: 'EditDomainNotificationsBodyStageProcess',
      data: {
        notificationId: this.model?.id,
      },
    });
    this.$store.commit('idm/notifications/notificationCardLoading', true);
  }

  private get loading(): string {
    return this.$store.getters[
      'registryService/services/notificationCardLoading'
    ];
  }
}
export default NotificationsCardData;
</script>
