<template>
  <operation-dialog
    persistent
    sign
    ref="dialog"
    :title="editableRoleName"
    sub="Редактирование роли"
    v-model="opened"
    @hide="$emit('close')"
  >
    <div class="ModalEditCountSessionRole__Text">
      Кол-во сессий равное "0" означает отсутствие ограничений
    </div>
    <q-input
      class="ModalEditCountSessionRole__Input"
      v-model="sessionsLimit"
      dense
      filled
      label="Кол-во сессий"
      mask="#"
      fill-mask="0"
      reverse-fill-mask
      :rules="sessionsLimitRules"
    />

    <template #right-actions-panel>
      <r-btn outline label="Сохранить" positive @click="updateSessionsLimit" />
    </template>
  </operation-dialog>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import { RoleApi, Role } from '@openapi/idm';
import { notifyError } from '@utils/notify';

const roleApi = new RoleApi();

@Component({})
export default class ModalEditCountSessionRole extends Vue {
  @Prop({ default: null }) editableRole: Role | null;

  sessionsLimit = 0;
  opened = false;

  @Watch('editableRole')
  private async editableRoleHandler(): Promise<void> {
    // editableRole приходит null - значит надо закрыть окно
    this.opened = false;
    this.sessionsLimit = 0;
    if (!this.editableRole?.id) return;

    // editableRole приходит Role - значит надо показать окно
    this.opened = true;
    this.sessionsLimit = this.editableRole.sessionsLimit || 0;
  }

  private sessionsLimitRules = [
    (val: any) => (val !== null && val !== '') || 'Не может быть пустым',
  ];

  get editableRoleName(): string {
    return (
      this.editableRole?.shortname ||
      this.editableRole?.displayName ||
      this.editableRole?.name ||
      ''
    );
  }

  /**
   * Функция обновления данных о лимите сессий
   */
  async updateSessionsLimit(): Promise<void> {
    try {
      if (this.editableRole?.id && this.editableRole?.name) {
        await roleApi.updateRole([
          {
            id: this.editableRole.id,
            name: this.editableRole.name,
            sessionsLimit: this.sessionsLimit,
          },
        ]);
        this.$emit('refresh');
      } else {
        notifyError(
          'Произошла непредвиденная ошибка. Отсутствует информация о роли'
        );
        this.$emit('close');
      }
    } catch (e: any) {
      notifyError(e.toString());
      this.$emit('close');
    }
  }
}
</script>

<style lang="scss" scoped>
.ModalEditCountSessionRole {
  &__Text {
    margin-bottom: 8px;
  }
  &__Input {
    ::v-deep {
      .q-field:not(.q-field--focused) {
        .q-field__control {
          border-bottom: 1px solid rgba(1, 72, 116, 0.18);
        }
      }

      .q-field--outlined .q-field__control:before {
        border: none;
      }

      .q-field__control {
        font-family: 'Golos Text', sans-serif;
        background: #e9f1f8 !important;
        color: #1491cf;
        background-blend-mode: multiply;
        border-radius: 0px;
        border-bottom: 1px solid #e9f1f8; // такой же толщены что бы не прыгало при фокусе
      }
    }
  }
}
</style>
