<template>
  <q-dialog v-model="open" @hide="cancelSave">
    <q-card class="full-width no-shadow" style="max-width: 800px">
      <q-card-section class="q-pb-md q-gutter-y-md">
        <div class="text-h6">
          {{
            isEditForm
              ? 'Редактировать справочник'
              : isReadOnlyForm
              ? 'Просмотр справочника'
              : 'Создать справочник'
          }}
        </div>
      </q-card-section>
      <q-card-section class="q-pb-md q-gutter-y-md">
        <div v-if="model" class="q-gutter-y-md">
          <q-input
            v-model="model.code"
            filled
            :readonly="isEditForm || isReadOnlyForm"
            label="Код отказа"
          />

          <q-input
            v-model="model.name"
            filled
            type="textarea"
            :readonly="isReadOnlyForm"
            label="Имя отказа"
          />

          <q-select
            v-model="model.type"
            filled
            emit-value
            map-options
            :readonly="isReadOnlyForm"
            :options="typeOptions"
            label="Тип отказа"
          />
          <q-select
            v-model="model.goal"
            filled
            :options="goalsList"
            :readonly="isReadOnlyForm"
            label="Цели"
            multiple
            use-chips
            stack-label
          />
        </div>
      </q-card-section>
      <q-card-actions align="right">
        <q-btn
          v-if="isEditForm"
          label="Cохранить"
          unelevated
          color="primary"
          @click="edit"
        />
        <q-btn
          v-else-if="!isReadOnlyForm"
          label="Создать"
          unelevated
          color="primary"
          @click="create"
        />

        <q-btn
          label="Закрыть"
          color="white"
          text-color="primary"
          outline
          @click="open = false"
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script lang="ts">
import { Component, Prop, PropSync, Vue } from 'vue-property-decorator';
import { QSelectOption } from '@/models/models-ui';
import cloneDeep from 'lodash/cloneDeep';
import { notifyError } from '@utils/notify';

@Component({})
export default class RejectDialog extends Vue {
  @PropSync('openDialog') open: boolean;

  @Prop() model!: RejectModel;

  @Prop() mode!: string;

  get isEditForm(): boolean {
    return this.mode === 'edit';
  }

  get isReadOnlyForm(): boolean {
    return this.mode === 'view';
  }

  edit() {
    if (!this.model?.name || !this.model?.code) {
      notifyError('Заполните имя и и код справочника');
      return;
    }
    const card = cloneDeep(
      this.$store.getters['registryService/services/servicesCard']
    );
    card.rejects = card.rejects.map((i: any) =>
      i.code === this?.model?.code ? Object.assign({}, i, this.model) : i
    );
    this.$store.dispatch('registryService/services/setCardForJson', card);
    this.open = false;
  }

  async create() {
    if (!this.model?.name || !this.model?.code) {
      notifyError('Заполните имя и и код справочника');
      return;
    }
    const card = cloneDeep(
      this.$store.getters['registryService/services/servicesCard']
    );
    const rejects = card.rejects || [];
    if (rejects.some((i: any) => i.code === this.model?.code)) {
      notifyError('Код справочника совпадает с уже существующим');
      return;
    }
    rejects.push(this.model);
    card.rejects = rejects;
    this.$store.dispatch('registryService/services/setCardForJson', card);
    this.open = false;
  }

  get typeOptions(): QSelectOption[] {
    return [
      {
        label: 'Отказы в предоставлении услуги',
        value: 'service',
      },
      {
        label: 'Отказы в приеме документов',
        value: 'document',
      },
    ];
  }

  get goalsList(): Array<string> {
    const card = cloneDeep(
      this.$store.getters['registryService/services/servicesCard']
    );
    return (card.goalsList || []).map((i: any) => i.value);
  }

  private cancelSave() {
    this.open = false;
  }
}

export interface RejectModel {
  code?: string;
  name?: string;
  goal?: Array<string>;
  type?: string;
}
</script>
