<template>
  <div class="manual">
    <div
      class="flex justify-start items-center bg-white q-pa-md q-mt-md q-mx-md rounded-borders"
    >
      <q-btn
        padding="xs"
        class="text-grey-7 q-mr-md"
        color="grey-3"
        icon="arrow_back"
        @click="goToStatements"
      />
      <span class="text-h5">{{ $t('statements.manualInput') }}</span>
      <q-space />
      <q-btn
        v-if="$route.name === 'from-draft'"
        label="Удалить черновик"
        color="negative"
        @click="
          deleteCurrentDraft();
          goToStatementDrafts();
        "
      >
      </q-btn>
    </div>
    <div
      class="q-gutter-y-md row bg-white q-px-lg q-pb-md q-pt-sm q-mt-md q-mx-md rounded-borders"
    >
      <div class="col text-primary q-pa-sm">
        <div class="q-gutter-y-md">
          <q-card v-if="!sendingStatement" class="no-border no-shadow">
            <SelectBase
              :disable="servicesLoading"
              :loading="servicesLoading"
              :options="statementsModels"
              :multiple="false"
              :dense="false"
              :label="$t('Выберите услугу')"
              :value="statementType"
              :emit-array="false"
              :popup-content-style="{ width: '40%' }"
              filled
              outlined
              use-input="10"
              @input="onStatementTypeChange"
            />
            <template v-if="!loading && schema">
              <FormGeneratorWrapper
                :model="model"
                ref="externalFormGeneratorWrapper"
                mode="create"
                :attractionCode="attractionCode"
                :schema="adoptedExternalSchema"
                @update-validation="setExternalStepValid"
              />
              <q-card-section>
                <q-stepper
                  vertical
                  animated
                  v-model="step"
                  header-nav
                  flat
                >
                  <template v-for="(stepEntry, stepIndex) in steps">
                    <q-step
                      :active-icon="stepEntry.icon"
                      :icon="stepEntry.icon"
                      :name="stepEntry.name"
                      :title="stepEntry.label"
                      :key="stepEntry.name"
                      :header-nav="allowJump(stepIndex)"
                    >
                      <div
                        v-if="stepEntry.name === 'applicationForPrint'"
                        class="documents"
                      >
                        <div>
                          При скачивании заявления также скачается файл согласия на обработку персональных данных. Оба документа нужно подписать.
                        </div>
                        <FormGeneratorWrapper
                          ref="formGeneratorWrapper"
                          :model="model"
                          mode="create"
                          :attractionCode="attractionCode"
                          :schema="adoptedSchema"
                          @update-validation="setStepValid"
                        />
                        <q-btn
                          unelevated
                          color="secondary"
                          label="Скачать заявление"
                          class="q-mb-md"
                          @click="downloadStatement"
                        />
                        <OperatorStatementSign v-if="hasStatementBeenDownloaded" />
                      </div>
                      <div
                        v-if="stepEntry.name === 'documents'"
                        class="documents q-gutter-sm"
                      >
                        <q-checkbox
                          v-model="isExternalFile"
                          label="На внешнем носителе"
                        />
                        <template v-if="isExternalFile">
                          <q-select
                            class="q-mb-sm"
                            outlined
                            label="Тип документа"
                            :options="fileDataOptions"
                            v-model="externalFileData.type"
                          >
                          </q-select>
                          <q-input
                            v-model="externalFileData.quantity"
                            label="Количество документов этого типа на внешнем носителе"
                            type="number"
                          />
                          <q-input
                            v-model="externalFileData.comment"
                            label="Комментарий"
                          />
                          <q-btn
                            unelevated
                            @click="addExternalFile"
                            color="secondary"
                            label="Добавить"
                            :disable="!externalFileData.type || !externalFileData.quantity"
                          />
                        </template>
                        <template v-else>
                          <q-select
                            class="q-mb-sm"
                            outlined
                            label="Тип документа"
                            :options="fileDataOptions"
                            v-model="fileData.type"
                          >
                          </q-select>
                          <q-file
                            class="q-mb-md"
                            outlined
                            :accept="documentExtensions"
                            v-model="fileData.file"
                          ></q-file>
                          <q-btn
                            unelevated
                            @click="addFile"
                            color="secondary"
                            label="Добавить файл"
                            :disable="!fileData.file || !fileData.type"
                          ></q-btn>
                        </template>

                        <div
                          class="q-my-md row items-start q-gutter-md"
                          v-if="files && files.length"
                        >
                          <q-card
                            bordered
                            class="document-card"
                            v-for="file in files || []"
                            :key="file.id"
                          >
                            <q-card-section class="entry header text-h6">
                              Документ
                            </q-card-section>
                            <q-separator inset />
                            <q-card-section class="entry">
                              <div
                                class="grid-item-label text-weight-medium text-grey-9"
                              >
                                Тип файла
                              </div>
                              <div class="grid-item-value">
                                {{ get(file, 'type.data.name') }}
                              </div>
                            </q-card-section>
                            <q-card-section class="entry">
                              <div
                                class="grid-item-label text-weight-medium text-grey-9"
                              >
                                Название файла
                              </div>
                              <div class="grid-item-value">
                                {{ get(file, 'file.name') }}
                                <q-tooltip
                                  :content-style="{ 'font-size': '12px' }"
                                  >{{ get(file, 'file.name') }}</q-tooltip
                                >
                              </div>
                            </q-card-section>
                            <q-card-actions align="right">
                              <q-btn
                                @click="deleteFile(file)"
                                text-color="negative"
                                >Удалить</q-btn
                              >
                            </q-card-actions>
                          </q-card>
                        </div>

                        <div
                          class="q-my-md row items-start q-gutter-md"
                          v-if="externalFiles && externalFiles.length"
                        >
                          <q-card
                            bordered
                            class="document-card"
                            v-for="file in externalFiles || []"
                            :key="file.id"
                          >
                            <q-card-section class="entry header text-h6">
                              Документ на внешнем носителе
                            </q-card-section>
                            <q-separator inset />
                            <q-card-section class="entry">
                              <div
                                class="grid-item-label text-weight-medium text-grey-9"
                              >
                                Тип файла
                              </div>
                              <div class="grid-item-value">
                                {{ get(file, 'type.data.name') }}
                              </div>
                            </q-card-section>
                            <q-card-section class="entry">
                              <div
                                class="grid-item-label text-weight-medium text-grey-9"
                              >
                                Количество
                              </div>
                              <div class="grid-item-value">
                                {{ get(file, 'quantity') }}
                                <q-tooltip
                                  :content-style="{ 'font-size': '12px' }"
                                  >{{ get(file, 'quantity') }}</q-tooltip
                                >
                              </div>
                            </q-card-section>
                            <q-card-section class="entry">
                              <div
                                class="grid-item-label text-weight-medium text-grey-9"
                              >
                                Комментарий
                              </div>
                              <div class="grid-item-value">
                                {{ get(file, 'comment') }}
                                <q-tooltip
                                  :content-style="{ 'font-size': '12px' }"
                                  >{{ get(file, 'comment') }}</q-tooltip
                                >
                              </div>
                            </q-card-section>
                            <q-card-actions align="right">
                              <q-btn
                                @click="deleteExternalFile(file)"
                                text-color="negative"
                                >Удалить</q-btn
                              >
                            </q-card-actions>
                          </q-card>
                        </div>
                      </div>
                      <FormGeneratorWrapper
                        v-else-if="stepEntry.name === step"
                        ref="formGeneratorWrapper"
                        :model="model"
                        mode="create"
                        :attractionCode="attractionCode"
                        :schema="adoptedSchema"
                        @update-validation="setStepValid"
                      />
                      <q-stepper-navigation>
                        <q-btn
                          v-show="prevStep"
                          @click="goBack"
                          color="secondary"
                          label="Назад"
                          class="on-left"
                        />
                        <q-btn
                          v-show="nextStep"
                          @click="checkUnSaveData('next')"
                          color="primary"
                          label="Далее"
                        />
                      </q-stepper-navigation>
                    </q-step>
                  </template>
                </q-stepper>
                <q-inner-loading :showing="loading">
                  <q-spinner-gears color="primary" size="50px" />
                </q-inner-loading>
              </q-card-section>
            </template>
            <q-card-section>
              <div class="flex justify-end q-gutter-sm">
                <q-btn
                  v-if="!isEmpty(model) && schema"
                  color="primary"
                  :disable="disableSaveDraft"
                  label="Сохранить черновик"
                  @click="saveOrUpdate"
                />
                <q-btn
                  v-if="!isEmpty(model) && schema"
                  color="primary"
                  label="Отправить"
                  :disable="disableSendStatement"
                  @click="checkUnSaveData('send', 'Документы')"
                />
              </div>
            </q-card-section>
            <q-inner-loading v-if="loading && schema" :showing="true">
              <q-spinner-gears color="primary" size="50px" />
            </q-inner-loading>
          </q-card>
          <q-inner-loading :showing="sendingStatement">
            <q-spinner-gears color="primary" size="50px" />
          </q-inner-loading>
        </div>
      </div>
    </div>

    <q-dialog v-model="unSaveDataDialog" persistent>
      <q-card>
        <q-card-section>
          <div class="text-h6">Есть несохраненные данные!</div>
        </q-card-section>

        <q-card-section class="q-pt-none">
          Для сохранения нажмите "Добавить" в блоке "{{ unSaveDataLabel }}". Для
          продолжения работы без сохранения данных, нажмите "Далее"
        </q-card-section>

        <q-card-actions align="right">
          <q-btn flat label="Далее" color="primary" @click="goAction" />
          <q-btn flat label="Отмена" color="primary" v-close-popup />
        </q-card-actions>
      </q-card>
    </q-dialog>

    <q-dialog class="z-max" :value="isClearModalOpen" persistent style="z-index: 6001;">
      <q-card class="q-pa-md">
        <q-card-section>
          Вы собираетесь изменить атрибут, влияющий на ветвление в процессе формирования 
          шагов интерактивной формы услуги. Сведения в атрибутах черновика, заполненные 
          на последующих шагах, будут очищены.
        </q-card-section>

        <q-card-actions align="right">
          <q-btn label="Далее" color="primary" @click="clearData" />
          <q-btn label="Вернуться" color="primary" @click="closeClearModal" />
        </q-card-actions>
      </q-card>
    </q-dialog>
  </div>
</template>

<script lang="ts" src="./index.ts"></script>

<style lang="scss">
.file-cell {
  white-space: pre-line;
}
.document-card {
  width: 100%;
  max-width: 350px;
}

.grid-item-value {
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
