<template>
  <div class="q-pa-md q-gutter-y-md redesigned redesigned-statements-section">
    <div class="row">
      <div class="col-12 col-sm-3 text-h5 section-header" style="min-height: 36px">
        {{ $t('statements.label') }}
      </div>
      <q-space />
      <div class="col-12 col-sm-9">
        <div class="row justify-end q-gutter-sm">
          <q-btn
            v-if="showPersonalReception && successfulAccessElectronicDublicate"
            @click="goTo('statements-electronic-duplicate')"
            icon="pgs-edit"
            :label="$t('statements.Common.button.electronicDuplicate')"
            class="redesigned-outline-btn text-capitalize"
          />
<!--          <q-btn
            v-if="showPersonalReception && !$AC.haveScope(USER_SCOPES.RF_OBSERVER_SCOPE)"
            @click="goTo('statements-create')"
            icon="pgs-form"
            icon-right="pgs-shevron-right-off"
            :label="$t('statements.Common.button.personalReception')"
            class="redesigned-action-btn text-capitalize right-padding-override"
          />-->
          <q-btn
            icon="pgs-refresh"
            class="redesigned-outline-btn flip-icon"
            @click="init()"
            :loading="model.loading > 0"
            :disabled="model.loading > 0" />
        </div>
      </div>
    </div>
    <div>
      <RedesignedStatementsTable
        class="statements-index-table"
        :only-my.sync="model.onlyMy"
        :showToggleMy="
          !$AC.haveOneOfScope([
            USER_SCOPES.REGION_OBSERVER,
            USER_SCOPES.REGION_ADMIN,
          ])
        "
        :columns="cols"
        :data="model.records"
        :loading="model.loading > 0"
        :title="$t('statements.myStatements')"
        :pagination.sync="model.pagination"
        :visible-columns="model.visibleColumns"
        @requestTable="init"
        @update="init"
        @changeToggleMy="resetPagination"
        saveQuery
      >
        <template v-slot:search>
          <a ref="csvLink" />
          <!-- FIXME @reset-filter="resetModel" Временное решение -->
          <statements-search-bar
            @reset-filter="resetModel"
            @save-data="saveData"
            @save-refugee-subjects="saveRefugeeFile"
            @query="fetch"
            @pagination="resetPagination"
            @change-columns="changeColumns"
            @clear-statements-storage="clearStatementsStorage"
            @download-export-mapping="downloadExportMapping"
            :selectedServiceMapping="selectedServiceMapping"
            :selectedServiceFound="selectedServiceFound"
            :isFetchedAfterFilterChanged="isFetchedAfterFilterChanged"
            :defaultColumns="defaultColumns"
            :columns="columns"
            :isRefugeeCompensation="successfulAccessRefugeeCompensation"
            :query="searchQuery"
            :loading="model.loading > 0"
            :only-my.sync="model.onlyMy"
          />
        </template>
      </RedesignedStatementsTable>
    </div>
  </div>
</template>

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

<style lang="scss">

.redesigned-statements-section {

  .section-header {
    font-family: 'Golos Text', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 28px;
    line-height: 32px;
    letter-spacing: -0.02em;
    color: rgba(2, 12, 18, 0.9);
  }

  .right-padding-override {
    .q-btn__wrapper {
      padding-right: 4px;
    }
  }

  .flip-icon {
    i {
      transform: scaleX(-1);
    }
  }

  .statements-index-table {
    background: transparent;
    .q-table th,
    .q-table td {
      padding: {
        left: 10px;
        right: 10px;
      }

      &:first-child {
        padding: {
          left: 16px;
        }
      }

      &:last-child {
        padding: {
          right: 16px;
        }
      }
    }

    .q-table th {
      padding: {
        top: 8px;
        bottom: 8px;
      }
    }

    .q-table td {
      padding: {
        top: 6px;
        bottom: 6px;
      }
    }
  }
}
</style>
