<template>
  <q-table
    class="RTableOld "
    v-bind="{ ...$props, ...$attrs }"
    grid
    :rows-per-page-options="rowsPerPageOptionsCustom"
    :selected.sync="syncedSelected"
    :selection="selection"
    :binary-state-sort="binarySort"
    @request="requestHandler"
    @update:pagination="paginationHandler"
    @update:selected="selectedHandler"
  >
    <template #top>
      <div class="RTableOld -SearchBar">
        <template v-if="!!$props.useSearch">
          <base-search-bar
            v-model="inputSearch"
            :saveQuery="saveQuery"
            @query="queryHandler"
          />
        </template>
        <slot v-else name="search" />
      </div>
      <div v-if="!isEmpty(sortBy)" class="RTableOld -SortBar">
        <template v-for="column in sortBy">
          <q-btn
            :key="column.field"
            class="RTableOld -SortBtn"
            :class="getSortButtonClasses(column.field)"
            @click="sortHandler(column.field)"
            :label="column.label"
            icon-right="pgs-arrow-down"
            :disabled="loading"
          />
        </template>
      </div>
      <div class="RTableOld -HeaderRow row full-width non-selectable">
        <slot name="header">
          <div
            class="RTableOld -HeaderCol RTableOld -HeaderCol_Selected"
            v-if="['single', 'multiple'].includes($props.selection)"
          >
            <q-checkbox
              class="RTableOld -SelectAll"
              size="sm"
              :value="allRowsWereSelected"
              :disable="isEmpty(data) || $props.selection !== 'multiple'"
              @input="toggleSelectAll"
            />
          </div>
          <div
            class="RTableOld -HeaderCol"
            style="width: 30%"
            :key="col.name"
            v-for="col in visibleColumns"
          >
            <slot :name="`header-col-${col.name}`">
              <slot name="header-col">
                <div class="Ellipsis">
                  <span
                    >{{ col.label
                    }}<q-tooltip :delay="500" content-class="">{{
                      col.fullLabel || col.label
                    }}</q-tooltip></span
                  >
                </div>
              </slot>
            </slot>
          </div>
        </slot>
      </div>
    </template>
<!-- 
    <template #body="props">
      <slot name="body" v-bind="props">
        <q-tr
          v-for="col in visibleColumns"
          :key="col.name"
          :class="['RTableOld -Row', { 'RTableOld -Row_Clickable': !!rowsHandler }]"
          :props="props"
          @click="rowsHandlerCast(props.row)"
        >
          <q-td v-if="['single', 'multiple'].includes($props.selection)">
            <slot
              v-if="$scopedSlots[`body-item-selection`]"
              name="body-item-selection"
              :props="props"
            />
            <q-checkbox v-else v-model="props.selected" />
          </q-td>
          <slot :name="`body-item-${col.name}`">
            <slot name="body-item">
              <q-td v-for="column in columns" :key="column.name" :props="props">
                <span>
                  {{ col.label }}
                  <q-tooltip v-if="col.fullLabel">{{
                    col.fullLabel
                  }}</q-tooltip>
                </span>
              </q-td>
            </slot>
          </slot>
        </q-tr>
      </slot>
    </template> -->
    <template #item="props">
      <q-card
        class="RTableOld -Row full-width"
        :class="{
          'bg-grey-2': !!props.selected,
          'cursor-pointer': !!rowsHandler,
        }"
      >
        <div
          class="RTableOld -Col RTableOld -Col_Selected"
          v-if="['single', 'multiple'].includes($props.selection)"
        >
          <slot
            v-if="$scopedSlots[`body-item-selection`]"
            name="body-item-selection"
            :props="props"
          />
          <q-checkbox v-else size="sm" v-model="props.selected" />
        </div>
        <div
          class="RTableOld -Col"
          style="width: 30%"
          v-for="column in columns"
          :key="column.name"
        >
          <slot :name="`body-item-${column.name}`" v-bind:props="props">
            <slot name="body-item">
              <div
                v-for="sub in getFields(column)"
                :key="sub.field"
                :class="`text-${sub.type}`"
                @click="handler($event, props.row, column)"
              >
                <span>
                  <q-icon v-if="sub.icon" :name="sub.icon" />
                  {{ format(props.row, sub) }}
                </span>
              </div>
            </slot>
          </slot>
        </div>
      </q-card>
    </template>
    <template v-if="pagination" #bottom="scope">
      {{ paginationLabelCustom(scope.pagination) }}
      <q-btn
        icon="chevron_left"
        color="grey-8"
        round
        dense
        flat
        :disable="scope.isFirstPage || !!$props.loading"
        @click="scope.prevPage"
      />

      <q-btn
        icon="chevron_right"
        color="grey-8"
        round
        dense
        flat
        :disable="scope.isLastPage || !!$props.loading"
        @click="scope.nextPage"
      />
    </template>
  </q-table>
</template>

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

<style lang="scss">
.Ellipsis {
  white-space: initial;
  //>> Ellipsis только после второй линии текста
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  //<<
  &_Cap1 {
    -webkit-line-clamp: 1;
  }
  &_Cap2 {
    -webkit-line-clamp: 2;
  }
}

.RTableOld  {
  &-SearchBar {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
  }

  &-SortBar {
    display: flex;
    flex-flow: row nowrap;
    width: 100%;
    padding-bottom: 4px;
  }

  &-SortBtn {
    font-family: 'Golos UI';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;
    text-transform: initial;
    color: rgba(2, 12, 18, 0.58);
    border-bottom: 1px solid rgba(1, 72, 116, 0.11);

    white-space: nowrap;
    padding: 0px 4px 0px 4px;
    margin-right: 4px;
    &:last-child {
      margin-right: 0;
    }

    .q-btn__wrapper {
      padding: 0;
      min-height: 2em;
    }

    i.on-right {
      display: none;
      margin-left: initial;
    }

    &_CurrentSort {
      color: #107abc;
      i {
        transform: rotate(0deg);
        display: initial;
        transition: 0.1s;
      }
    }
    &_Descending i {
      transform: rotate(-180deg);
      transition: 0.1s;
    }
  }

  &-SelectAll {
    transform: translateY(4px);
  }

  &-HeaderRow {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    justify-content: space-between;
  }

  &-Row {
    display: flex;
    flex-flow: row nowrap;
    align-items: stretch;
    justify-content: space-between;

    max-height: 5em;
    padding: 4px 0 4px 0;
    margin: 2px 0 2px 0;
    background: #ffffff;
    border: 1px solid rgba(1, 72, 116, 0.11);
    border-radius: 8px;
    box-shadow: none;
  }

  &-HeaderCol {
    flex: 1 1 auto;
    padding: 16px 4px 0 4px;
    color: rgba(2, 12, 18, 0.58);
    overflow: hidden;
    font-family: 'Golos Text';
    font-style: normal;
    font-weight: 600;
    font-size: 10px;
    line-height: 12px;

    letter-spacing: 0.05em;
    text-transform: uppercase;

    &_Selected {
      flex: none;
      padding: 0 4px 0 4px;
      // width: 48px;
    }
  }

  &-Card {
    max-height: 5em;
    padding: 4px 0 4px 0;
    margin: 2px 0 2px 0;
    background: #ffffff;
    border: 1px solid rgba(1, 72, 116, 0.11);
    border-radius: 8px;
    box-shadow: none;
    &:hover {
      border: 1px solid #1491CF;
      box-shadow: 0px 0.6px 1.8px rgba(7, 46, 71, 0.12), 0px 3.2px 8px rgba(7, 46, 71, 0.15);
    }
  }

  &-Col {
    flex: 1 1 auto;
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    width: auto;
    min-width: 0;
    max-width: 100%;

    position: relative;
    padding: 0 4px 0 4px;
    overflow: hidden;
    color: rgba(2, 12, 18, 0.9);
    font-family: 'Golos UI';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 14px;

    &:not(:last-child)::after {
      position: absolute;
      content: '';
      width: 1px;
      height: 100%;
      top: 0;
      right: 0;
      background-color: rgba(1, 72, 116, 0.11);
    }

    &_Selected {
      flex: none;
    }
    &_Clickable {
      white-space: nowrap;
      color: #015e98;
      font-weight: 500;
    }
  }

  .q-table__top {
    padding: 0 0 6px 0;
  }
  .q-table__grid-item {
    max-height: 5em;
    padding: 4px 0 4px 0;
    margin: 2px 0 2px 0;
    background: #ffffff;
    border: 1px solid rgba(1, 72, 116, 0.11);
    border-radius: 8px;
    box-shadow: none;
  }
  .no-icon {
    .q-icon {
      display: none;
    }
  }
  .accepted {
    font-size: 12px;
  }
}

.text-action {
  white-space: nowrap;
  color: #015e98;
  font-weight: 500;
  cursor: pointer;
}
.text-regular {
  color: rgba(2, 12, 18, 0.58);
}
.text-bold {
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  color: rgba(2, 12, 18, 0.9);
}
.text-date {
  white-space: nowrap;
  color: rgba(2, 12, 18, 0.58);
}
.text-assignee {
  white-space: nowrap;
  color: rgba(2, 12, 18, 0.28);
  .green {
    color: #04967D;
  }
  &:has(.green) {
    color: rgba(2, 12, 18, 0.9);
  }
}
</style>
