<template>
  <div>
    <Centered1280Box class="OrganizationsTable">
      <WhiteCard class="OrganizationsTable__WhiteCard">
        <div class="OrganizationsTable__Header">
          Организации
          <div class="OrganizationsTable__Actions">
            <div v-if="canChangeSubjectType" class="OrganizationsTable__Select">
              <r-select
                map-options
                emit-value
                :options="subjectsType"
                v-model="filter.subjectType"
              />
            </div>
            <r-btn
              v-if="canCreate"
              label="Создать"
              icon="create"
              @click="modalCreateOrganization = true"
            />
          </div>
        </div>
        <search-bar
          v-model="filter"
          :loading="loading"
          @search="executeSearch"
        />
        <sort-bar
          v-model="sortButtons"
          :pagination="pagination"
          :loading="loading"
          @click="handleSortClick"
        />
        <re-table
          :data="data"
          :columns="columns"
          :loading="loading"
          :pagination.sync="pagination"
          :rows-per-page-options="[10, 25, 50, 100]"
          @request="onRequest"
        >
          <template v-slot:body-item-fullname="props">
            <LinkCell
              :route="props.row.schema.toLowerCase()"
              :routeParams="(domain) => ({ id: domain.id })"
              :row="props.row"
              :value="props.row.fullname"
            />
          </template>
          <template v-slot:body-item-enabled="props">
            <IconCell
              align="center"
              icon="block"
              iconBlank=""
              iconColor="black"
              :value="isShowIcon(props.row)"
            />
          </template>
        </re-table>
      </WhiteCard>
    </Centered1280Box>
    <CreateModal
      :showModal="modalCreateOrganization"
      @close="modalCreateOrganization = false"
      @finish="finishCreateOrganization"
    />
  </div>
</template>

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

<style lang="scss" scoped>
.OrganizationsTable {
  &__WhiteCard {
    padding: 10px;
  }

  &__Header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: Golos Text, sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 28px;
    line-height: 36px;
    color: rgba(2, 12, 18, 0.9);
  }
  &__Actions {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  &__Select {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 400;
    font-size: 16px;
  }
}
</style>
