-
<template>
  <q-table
    class="redesigned-base-table"
    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="column full-width">
        <div v-if="!!$props.useSearch" class="full-width">
          <base-search-bar
            v-model="inputSearch"
            :saveQuery="saveQuery"
            @query="queryHandler"
          />
        </div>
        <slot v-else name="search" />
      </div>
      <div class="row full-width q-gutter-x-xs q-pb-xs" style="border-bottom: 1px solid rgba(1, 72, 116, 0.11);">
        <q-btn class="sort-btn" :class="getSortButtonClasses('common.orderId')" @click="sortHandler('common.orderId')" label="По номеру" icon-right="pgs-arrow-down" :disabled="loading" />
        <q-btn class="sort-btn" :class="getSortButtonClasses('common.chanel')" @click="sortHandler('common.chanel')" label="По каналу" icon-right="pgs-arrow-down" :disabled="loading" />
        <q-btn class="sort-btn" :class="getSortButtonClasses('system.applicant.fullName')" @click="sortHandler('system.applicant.fullName')" label="По заявителю" icon-right="pgs-arrow-down" :disabled="loading" />
        <q-btn class="sort-btn" :class="getSortButtonClasses('system.service')" @click="sortHandler('system.service')" label="По названию услуги" icon-right="pgs-arrow-down" :disabled="loading" />
        <q-btn class="sort-btn" :class="getSortButtonClasses('system.status.internal')" @click="sortHandler('system.status.internal')" label="По статусу" icon-right="pgs-arrow-down" :disabled="loading" />
        <q-btn class="sort-btn" :class="getSortButtonClasses('common.assignee.fullName')" @click="sortHandler('common.assignee.fullName')" label="По ответственному" icon-right="pgs-arrow-down" :disabled="loading" />
        <q-btn v-if="departmentColumnVisible" class="sort-btn" :class="getSortButtonClasses('system.department.fullName')" @click="sortHandler('system.department.fullName')" label="По ведомству" icon-right="pgs-arrow-down" :disabled="loading" />
        <q-btn class="sort-btn" :class="getSortButtonClasses('system.startDateIso')" @click="sortHandler('system.startDateIso')" label="По дате подачи" icon-right="pgs-arrow-down" :disabled="loading" />
        <q-btn class="sort-btn" :class="getSortButtonClasses('common.dueDate')" @click="sortHandler('common.dueDate')" label="По сроку" icon-right="pgs-arrow-down" :disabled="loading" />
        <q-btn class="sort-btn" :class="getSortButtonClasses('common.finishDate')" @click="sortHandler('common.finishDate')" label="По дате решения" icon-right="pgs-arrow-down" :disabled="loading" />
        <q-btn v-if="regionColumnVisible" class="sort-btn" :class="getSortButtonClasses('system.regionCode')" @click="sortHandler('system.regionCode')" label="По субъекту" icon-right="pgs-arrow-down" :disabled="loading" />
      </div>
      <div :class='{ "eight-columns": regionColumnVisible }' class="row full-width headers q-pt-md non-selectable">
        <div class="col q-px-sm">Номер / Канал</div>
        <div :class='{ "col-4": !regionColumnVisible, "col-3": regionColumnVisible }'>Заявитель / Название услуги</div>
        <div class="col">Статус</div>
        <div class="col-2">Ответственный {{ (departmentColumnVisible) ? "/ Ведомство" : "" }}</div>
        <div class="col text-right">
          <span>
            Подача 
            <q-tooltip>Дата подачи</q-tooltip>
          </span>
          /
          <span>
            Срок
            <q-tooltip>Срок выполнения</q-tooltip>
          </span>
        </div>
        <div class="col text-right">
          <span>
            Решение
            <q-tooltip>Дата принятия решения</q-tooltip>
          </span>
        </div>
        <div class="col-2">Адрес заявителя</div>
        <div v-if="regionColumnVisible" class="col">Субъект</div>
      </div>
    </template>

    <template #body="props">
      <slot v-if="$scopedSlots[`user-body`]" name="user-body" v-bind="props" />
      <q-tr
        v-else
        :class="{ 'cursor-pointer': !!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>
        <q-td v-for="column in columns" :key="column.name" :props="props">
          <slot
            v-if="$scopedSlots[`body-item-${column.name}`]"
            :name="`body-item-${column.name}`"
            v-bind="props"
            :value="format(props.row, column.name)"
          />
          <template v-else-if="isArray(props.row, column.name)">
            <template v-if="has(column, 'handler')">
              <template>
                <q-chip
                  v-for="(item, i) in crop(field(props.row, column.name))"
                  :key="i"
                  :class="{ 'no-icon': !has(column, 'icon') }"
                  :icon="has(column, 'icon') ? column.icon : ''"
                  clickable
                  @click="handler($event, props.row, column.name, item)"
                  :disable="column.isDisable || false"
                >
                  {{ format(props.row, column.name)[i] }}
                </q-chip>
                <q-menu
                  v-if="difference(field(props.row, column.name)).length"
                  class="shadow-1"
                  clickable
                  outline
                >
                  ...
                  {{
                    $t('base.more', {
                      length: difference(field(props.row, column.name)).length,
                    })
                  }}
                  <q-popup-proxy>
                    <q-card>
                      <q-card-section>
                        <q-chip
                          v-for="(item, i) in difference(
                            field(props.row, column.name)
                          )"
                          :key="i"
                          :class="{ 'no-icon': !has(column, 'icon') }"
                          :icon="has(column, 'icon') ? column.icon : ''"
                          clickable
                          @click="handler($event, props.row, column.name, item)"
                          :disable="column.isDisable || false"
                        >
                          {{ difference(format(props.row, column.name))[i] }}
                        </q-chip>
                      </q-card-section>
                    </q-card>
                  </q-popup-proxy>
                </q-menu>
              </template>
            </template>
            <template v-else>
              <q-chip
                v-for="(item, i) in crop(field(props.row, column.name))"
                :key="i"
                :class="{ 'no-icon': !has(column, 'icon') }"
                :icon="has(column, 'icon') ? column.icon : ''"
              >
                {{ format(props.row, column.name)[i] }}
              </q-chip>
              <q-chip
                v-if="difference(field(props.row, column.name)).length"
                clickable
                outline
              >
                ...
                {{
                  $t('base.more', {
                    length: difference(field(props.row, column.name)).length,
                  })
                }}
                <q-menu content-class="shadow-1">
                  <q-card>
                    <q-card-section>
                      <q-chip
                        v-for="(item, i) in difference(
                          field(props.row, column.name)
                        )"
                        :key="i"
                        :class="{ 'no-icon': !has(column, 'icon') }"
                        :icon="has(column, 'icon') ? column.icon : ''"
                      >
                        {{ format(props.row, column.name, item) }}
                      </q-chip>
                    </q-card-section>
                  </q-card>
                </q-menu>
              </q-chip>
            </template>
          </template>
          <template v-else-if="format(props.row, column.name)">
            <template v-if="has(column, 'handler')">
              <template v-if="column.isHTML">
                <q-btn
                  :class="column.classList"
                  @click="handler($event, props.row, column.name)"
                  v-html="format(props.row, column.name)"
                  :disable="column.isDisable || false"
                />
              </template>
              <q-chip
                v-else
                :class="{ 'no-icon': !has(column, 'icon') }"
                :icon="has(column, 'icon') ? column.icon : ''"
                clickable
                @click="handler($event, props.row, column.name)"
                :disable="column.isDisable || false"
              >
                {{ format(props.row, column.name) }}
              </q-chip>
            </template>
            <template v-else-if="column.isHTML">
              <div v-html="format(props.row, column.name)"></div>
            </template>
            <template v-else>
              <span ellipsis>{{ format(props.row, column.name) }}</span>
            </template>
          </template>
          <span
            class="text-weight-bold accepted"
            v-if="
              column.name === 'system.status.internal' && props.row.parentId
            "
          >
            {{ $t('statements.CommonCard.reAccepted') }}</span
          >
        </q-td>
      </q-tr>
    </template>
    <template #item="props">
      <q-card
        class="q-table__grid-item col-12 overflow-hidden"
        :class="{
          'bg-grey-2': !!props.selected,
          'cursor-pointer': !!rowsHandler,
        }"
        @dblclick="handler($event, props.row, 'common.orderId')"
      >
        <div class="row full-width">
          <div class="col q-px-sm cell">
            <div class="order-id" @click="handler($event, props.row, 'common.orderId')" style="cursor: pointer;">{{ format(props.row, "common.orderId") }}</div>
            <div class="channel">
              <q-icon v-if="getValue(props.row, 'common.chanel')" :name="isOnline(props.row) ? 'pgs-portal' : 'pgs-form'" size="15px" />
              {{ format(props.row, "common.chanel") }}
            </div>
          </div>
          <div :class='{ "col-4": !regionColumnVisible, "col-3": regionColumnVisible }' class="cell" >
            <div class="applicant">
              <q-icon name="pgs-user-avatar" size="xs" />
              {{ format(props.row, "system.applicant.fullName") }}
            </div>
            <div class="service">{{ format(props.row, "system.service") }}</div>
          </div>
          <div class="col cell">{{ format(props.row, "system.status.internal") }}</div>
          <div class="col-2 cell assignee">
            <div>
              <q-icon :name="hasAssignee(props.row)? 'pgs-user-check' : 'pgs-user'" size="xs" :class="{ green: hasAssignee(props.row)}" />
              <span>
                {{ getValue(props.row, "common.assignee.fullName") }}
                <q-tooltip v-if="hasAssignee(props.row)">
                  {{ getValue(props.row, "common.assignee.fullName") }}
                </q-tooltip>
              </span>
            </div>
            <div v-if="departmentColumnVisible" class="organization">
              <!-- <q-icon name="o_domain" size="xs" /> -->
              <span>
                {{ getValue(props.row, "system.department.fullName") }}
                <q-tooltip anchor="top middle">
                  {{ getValue(props.row, "system.department.fullName") }}
                </q-tooltip>
              </span>
            </div>
          </div>
          <div class="col cell q-pr-xs" style="direction:rtl;">
            <div class="date text-right">
              {{ format(props.row, "system.startDateIso") }}
              <q-icon v-if="getValue(props.row, 'system.startDateIso')" name="pgs-calendar" size="15px" />
            </div>
            <div class="date text-right">
              {{ format(props.row, "common.dueDate") }}
              <q-icon v-if="getValue(props.row, 'common.dueDate')" name="pgs-time" size="15px" />
            </div>
          </div>
          <div class="col cell q-pr-xs" style="direction:rtl;">
            <div class="date text-right">
              {{ format(props.row, "common.finishDate") }}
              <q-icon v-if="getValue(props.row, 'common.finishDate')" name="pgs-calendar" size="15px" />
            </div>
          </div>
          <div class="col-2 cell">{{ format(props.row, "reg-address") }}</div>
          <div v-if="regionColumnVisible" class="col cell">{{ format(props.row, 'system.regionCode') }}</div>
        </div>
      </q-card>
    </template>
    <template v-if="pagination" #pagination="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">

.redesigned-base-table {

  .sort-btn {
    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);

    padding: 0px 4px 0px 4px;
    white-space: nowrap;

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

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

    &.current-sort {
      color: #107ABC;
      i {
        transform: rotate(0deg);
        display: initial;
        transition: .1s;
      }
      &.descending i {
        transform: rotate(-180deg);
        transition: .1s;
      }
    }
  }

  .q-table__top {
    padding: 0 0 6px 0;
    .headers {
      >div {
        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;
        &:nth-child(4) {
          padding-left: 4px;
        }
        &:nth-child(5) {
          padding-right: 6px;
        }
        &:nth-child(6) {
          padding-right: 6px;
        }
        &:nth-child(7) {
          padding-left: 2px;
        }
      }
    }
    .headers.eight-columns {
      >div {
        &:nth-child(5) {
          padding-right: 4px;
        }
        &:nth-child(n + 7) {
          padding-left: 8px;
        }
      } 
    }
  }
  .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;
    .cell {
      // display: flex;
      // align-items: center;     
      position: relative;
      padding-left: 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;
      .order-id {
        white-space: nowrap;
        color: #015E98;
        font-weight: 500;
      }
      .channel {
        color: rgba(2, 12, 18, 0.58);        
      }
      .applicant {
        //white-space: nowrap;
        color: rgba(2, 12, 18, 0.58);        
      }
      .service {
        font-weight: 500;
        font-size: 14px;
        line-height: 16px;
        color: rgba(2, 12, 18, 0.9);
      }
      .date {
        white-space: nowrap;
        color: rgba(2, 12, 18, 0.58);        
      }
      &.assignee {
        white-space: nowrap;
        color: rgba(2, 12, 18, 0.28);
        .green {
          color: #04967D;
        }
        &:has(.green) {
          color: rgba(2, 12, 18, 0.9);
        }
        .organization {
          white-space: initial;
          color: rgba(2, 12, 18, 0.9);
          //>> Ellipsis только после второй линии текста
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          //<<
        }
      }
    }
    &: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);
    }
    .cell:not(:last-child)::after { // Кроме последнего
      position: absolute;
      content: '';
      width: 1px;
      height: 100%;
      top: 0;
      right: 0;
      background-color:rgba(1, 72, 116, 0.11);      
    }
  }
  .no-icon {
    .q-icon {
      display: none;
    }
  }
  .accepted {
    font-size: 12px;
  }
}

</style>
