<template>
  <q-table
    class="RTable"
    v-bind="{ ...$props, ...$attrs }"
    grid
    :rows-per-page-options="rowsPerPageOptionsCustom"
    :selected.sync="syncedSelected"
    :selection="selection"
    :binary-state-sort="binarySort"
    @request="requestHandler"
    @update:pagination="$emit('update:pagination', $event)"
    @update:selected="$emit('update:selected', $event)"
  >
    <template v-if="$props.gridHeader" #header="props">
      <q-tr :props="props">
        <q-th
          v-for="col in props.cols"
          :key="col.name"
          :props="props"
          :style="`width: ${col.width}`"
          class="RTable-HeaderCol"
        >
          {{ col.label }}
        </q-th>
      </q-tr>
    </template>
    <template v-else #top>
      <div class="RTable-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="RTable-SortBar">
        <q-btn
          v-for="column in sortBy"
          :key="column.field"
          class="RTable-SortBtn"
          :class="getSortButtonClasses(column.field)"
          @click="sortHandler(column.field)"
          :label="column.label"
          icon-right="pgs-arrow-down"
          :disabled="loading"
        />
      </div>
      <div
        class="RTable-HeaderRow non-selectable"
        :style="{
          'grid-template-columns': gridЕemplateСolumns,
        }"
      >
        <slot name="header">
          <div
            class="RTable-HeaderCol RTable-HeaderCol_Selected"
            v-if="hasSelection"
          >
            <span class="RCheckboxScoped">
              <input
                type="checkbox"
                id="select-all"
                class="RCheckboxScoped-Input RTable-SelectAll"
                size="sm"
                :checked="allRowsWereSelected"
                :disable="isEmpty(data) || $props.selection !== 'multiple'"
                @input="toggleSelectAll"
              />
              <label for="select-all" class="RCheckboxScoped-Label" />
            </span>
          </div>
          <div
            :class="[
              'RTable-HeaderCol',
              getAlignClass(col.align, 'RTable-HeaderCol'),
              col.classes || '',
            ]"
            :key="col.name"
            v-for="col in visibleColumns"
          >
            <slot :name="`header-col-${col.name}`">
              <slot name="header-col">
                <div class="Ellipsis">
                  <span
                    >{{ getCombinedLabel(col)
                    }}<q-tooltip :delay="500" content-class="">{{
                      getCombinedLabel(col, true)
                    }}</q-tooltip></span
                  >
                </div>
              </slot>
            </slot>
          </div>
        </slot>
      </div>
    </template>
    <template #item="props">
      <q-card
        class="RTable-Row"
        :class="{
          'cursor-pointer': $scopedSlots.expand,
        }"
        :style="{
          'grid-template-columns': gridЕemplateСolumns,
          'maxHeight': maxRowHeight || '5em',
        }"
        @click="props.expand = !props.expand"
      >
        <div class="RTable-Col RTable-Col_Selected" v-if="hasSelection">
          <slot
            v-if="$scopedSlots[`body-item-selection`]"
            name="body-item-selection"
            :props="props"
          />
          <span v-else class="RCheckboxScoped">
            <input
              class="RCheckboxScoped-Input"
              type="checkbox"
              :id="`select-${props.row.id}`"
              :disabled="!isSelectable(props.row)"
              v-model="props.selected"
            />
            <label
              :for="`select-${props.row.id}`"
              class="RCheckboxScoped-Label"
            />
          </span>
        </div>
        <div
          class="RTable-Col"
          :class="[
            getAlignClass(column.align, 'RTable-Col'),
            {
              'RTable-Col_Border': !column.borderless,
              'RTable-Col_Collaps': column.collaps,
            },
          ]"
          v-for="column in visibleColumns"
          :key="column.name"
        >
          <slot :name="`body-item-${column.name}`" v-bind="props">
            <slot name="body-item" v-bind="props">
              <div
                v-for="sub in getFields(column)"
                :key="sub.name"
                class="RTable-SubCol"
                :class="[
                  `RTable-SubCol_${getCamelCaseName(sub.name)}`,
                  getAlignClass(sub.align, 'RTable-SubCol'),
                  getTypeClass(sub.type, 'RTable-SubCol'),
                ]"
                :style="`width: ${sub.width}`"
                @click="handler($event, props.row, column)"
              >
                <component
                  v-if="sub.componentPath"
                  :is="components[sub.componentPath]"
                  :value="format(props.row, sub)"
                  v-bind="sub.componentOptions || {}"
                  :row="props.row"
                  :sub="sub"
                />
                <span v-else>
                  <q-icon v-if="sub.icon" :name="sub.icon" />
                  {{ format(props.row, sub) }}
                </span>
              </div>
            </slot>
          </slot>
        </div>
      </q-card>
      <slot v-if="props.expand" name="expand" v-bind="props" />
    </template>
    <!--
      TODO Привести к виду из дизайна
    <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> -->
    <template v-slot:no-data="{ icon, message, filter }">
      <div class="RTable-NoData">
        <q-icon size="2em" :name="filter ? 'filter_b_and_w' : icon" />
        <span>
          {{ message }}
        </span>
      </div>
    </template>
  </q-table>
</template>

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

<style lang="scss" scoped>
.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;
  }
}

.RCheckboxScoped {
  &-Label {
    display: block;
    width: 20px;
    height: 20px;
    background-color: rgba(15, 32, 160, 0.08);
    border: 1px solid rgba(1, 72, 116, 0.18);
    border-radius: 4px;
    position: relative;
  }
  &-Input:checked + &-Label {
    background-color: #1491cf;
    box-shadow: 0 0 3.5px rgba(1, 94, 152, 0.5);
    &:before,
    &:after {
      position: absolute;
      content: '';
      display: block;
      background-color: #fff;
      height: 3px;
      border-radius: 10px;
    }
    &:before {
      width: 10px;
      top: 10px;
      left: 1px;
      transform: rotate(60deg);
    }
    &:after {
      width: 14px;
      top: 8px;
      left: 5px;
      transform: rotate(-60deg);
    }
  }
  &-Input {
    display: none;
  }
}

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

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

  &-Select {
    display: none;
    &:checked + .LabelSelect {
      background-color: #1491cf;
      box-shadow: 0 0 3.5px rgba(1, 94, 152, 0.5);
      &:before,
      &:after {
        position: absolute;
        content: '';
        display: block;
        background-color: #fff;
        height: 3px;
        border-radius: 10px;
      }
      &:before {
        width: 10px;
        top: 10px;
        left: 1px;
        transform: rotate(60deg);
      }
      &:after {
        width: 14px;
        top: 8px;
        left: 5px;
        transform: rotate(-60deg);
      }
    }
  }

  &-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: grid;
    width: 100%;
    padding: 16px 0 6px 0;
  }

  &-Row {
    display: grid;
    width: 100%;

    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: 0 0.6px 1.8px rgba(7, 46, 71, 0.12),
        0 3.2px 8px rgba(7, 46, 71, 0.15);
    }
  }

  &-HeaderCol {
    flex: 1 1 auto;
    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;
    padding: 0 12px;

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

    &_Narrow {
      padding: 0;
    }

    &_AlignRiht {
      justify-content: end;
      text-align: right;
    }

    &_AlignLeft {
      justify-content: start;
      text-align: left;
    }

    &_AlignCenter {
      justify-content: center;
      text-align: center;
    }

    &_AlignStretch {
      justify-content: center;
      text-align: center;
    }

    &_Selected {
      flex: none;
      padding-left: 12px;
      padding-right: 12px;
      margin-top: -4px;
      margin-bottom: -4px;
      // width: 48px;
    }

    ::v-deep {
      .q-table__sort-icon {
        font-size: 140%;
      }
    }
  }

  &-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);
    }
  }

  &-SubCol {
    flex: 1 1 auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: stretch;
    align-content: center;

    &:only-child {
      height: 100%;
    }

    &_AlignRiht {
      justify-content: flex-end;
      text-align: right;
    }

    &_AlignLeft {
      justify-content: flex-start;
      text-align: left;
    }

    &_AlignCenter {
      justify-content: center;
      text-align: center;
    }

    &_AlignStretch {
      justify-content: stretch;
      text-align: center;
    }

    &_Address {
      color: rgba(2, 12, 18, 0.9);
      line-height: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: flex;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      span {
        align-self: center;
      }
    }

    &_GrayNumbr {
      font-weight: 400;
      font-size: 14px;
      line-height: 20px;
      color: rgba(2, 12, 18, 0.58);
    }

    &_Regular {
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      line-height: 16px;
      color: rgba(2, 12, 18, 0.58);
    }

    &_Bold {
      font-weight: 500;
      font-size: 14px;
      line-height: 16px;
      color: rgba(2, 12, 18, 0.9);
    }
  }

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

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

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

    &_Narrow {
      padding: 0 4px 0 4px;
    }

    &_Collaps {
      padding: 0;
      margin: -4px 0;
    }

    &_AlignRiht {
      justify-content: flex-end;
    }

    &_AlignLeft {
      justify-content: flex-start;
    }

    &_AlignCenter {
      justify-content: center;
    }

    &_AlignStretch {
      justify-content: stretch;
    }

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

  &-NoData {
    display: flex;
    flex-flow: row nowrap;
    gap: 8px;
    align-items: center;

    font-family: 'Golos UI', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 16px;
    color: rgba(2, 12, 18, 0.58);
  }

  .q-table__top {
    padding: 0 0 0 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>
