<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('additionalSettings.addSettingsTitle') }}
      </div>
    </div>
    <div class="bg-white rounded-borders">
      <BaseTable
        :columns="columns"
        :data="model.settings"
        :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="stateColorMapSet[row.state] || 'grey'"
            :label="
              row.state
                ? $t(`additionalSettings.${row.state}`)
                : $t('additionalSettings.IN_PROCESS')
            "
          />
        </template>
      </BaseTable>
    </div>
  </div>
</template>

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