<template>
  <div class="q-pa-md q-gutter-y-md">
    <div
      class="flex justify-between items-center bg-white q-pa-md rounded-borders"
    >
      <div class="column justify-center text-h5" style="min-height: 36px">
        {{ $t('services.serviceConstructor') }}
      </div>
      <div class="q-pa-md q-gutter-sm">
        <q-btn
          color="primary"
          icon="create"
          :label="$t('services.create')"
          @click="dialogCreate = true"
        />
        <q-btn
          color="primary"
          :loading="loading"
          label="Импорт услуг"
          @click="importServices"
        />
        <!-- <q-btn color="secondary" label="Импорт из КЦР" @click="importDS" /> -->
        <q-btn
          v-if="isServicesConstruct"
          color="primary"
          :label="$t('services.emulation.emulationBtn')"
          to="/services/emulation"
        />
        <!-- Глушим на проде -->
        <q-btn
          v-if="buttonNexusFlag"
          color="primary"
          :label="$t('services.importNexus')"
          @click="importNexus = true"
        />
      </div>
    </div>
    <div class="bg-white rounded-borders">
      <BaseTable
        :columns="columns"
        :data="model.services"
        :loading="model.loading"
        :pagination.sync="model.pagination"
        :visible-columns="model.visibleColumns"
        :title="$t('services.title')"
        :attributes.sync="attributes"
        @requestTable="init"
        @update="init"
        saveQuery
      >
        <template #search>
          <services-search-bar
            :query="searchQuery"
            @save-data="saveData"
            @query="fetch"
          />
        </template>
        <template #body-item-state="{ row }">
          <q-badge
            :color="stateColorMap[row.state] || 'primary'"
            :label="
              row.state
                ? $t(`services.${row.state}`)
                : $t('services.inProgress')
            "
          />
        </template>
      </BaseTable>
      <DigitalRegulationsFormDialog :open-dialog.sync="importDialog" />
      <ImportDialog
        v-if="importServiceData"
        :open-dialog.sync="importAllDialog"
        :model="importServiceData"
        :user-task="userTask"
        :servicesLoading.sync="servicesLoading"
      />
      <q-dialog v-model="dialogCreate" class="full-width">
        <q-card class="no-shadow full-width">
          <q-card-section>
            <div class="text-h6">{{ $t('services.createService') }}</div>
          </q-card-section>
          <q-card-section>
            <q-input
              v-model="newServiceName"
              type="text"
              filled
              :label="$t('services.serviceName')"
              :rules="[(val) => !!val || $t('services.requiredToFill')]"
            />
          </q-card-section>
          <q-card-actions align="right">
            <q-btn color="primary" label="Создать" @click="createService" />

            <q-btn
              color="white"
              text-color="primary"
              outline
              label="Отменить"
              @click="dialogCreate = false"
            />
          </q-card-actions>
        </q-card>
      </q-dialog>
      <q-dialog v-model="importNexus" class="full-width">
        <q-card class="no-shadow full-width">
          <q-card-section>
            <div class="text-h6">{{ $t('services.importNexus') }}</div>
          </q-card-section>
          <q-card-section>
            <q-input
              label="Код услуги"
              type="text"
              v-model="serviceCode"
            />
            <q-file
              v-model="serviceFile"
              :multiple="false"
              accept=".zip"
              :disable="!serviceCode"
            >
              <template v-slot:prepend>
                <q-icon name="attach_file" />
              </template>
            </q-file>
          </q-card-section>
          <q-card-actions align="right">
            <q-btn
                :disable="!serviceCode || !serviceFile"
                color="primary"
                label="Проверить и импортировать"
                @click="importToNexus"
            />
            <q-btn
                color="white"
                text-color="primary"
                outline
                label="Отменить"
                @click="importNexus = false"
            />
          </q-card-actions>
        </q-card>
      </q-dialog>
    </div>
  </div>
</template>

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