-
<template>
  <q-table
    v-bind="{ ...$props, ...$attrs }"
    :grid="$q.screen.xs"
    :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">
        <slot name="top">
          <div class="row q-my-md">
            <div class="q-table__control">
              <div class="q-table__title">
                {{ title }}
              </div>
            </div>
            <q-space />
            <div class="row q-gutter-x-md">
              <slot name="user-toggle" v-if="$scopedSlots[`user-toggle`]">
              </slot>
              <div
                v-if="$props.showToggleMy && !loading"
                class="flex items-center"
              >
                <div :class="{ disabled: onlyMy }">
                  {{ $t('base.all') }}
                </div>
                <q-toggle
                  v-model="onlyMyCast"
                  class="no-box-shadow"
                  name="music_active"
                />
                <div :class="{ disabled: !onlyMy }">
                  {{ $t('base.my') }}
                </div>
              </div>
              <q-btn-group flat>
                <q-btn
                  v-if="!hideRefresh"
                  :loading="loading"
                  color="primary"
                  flat
                  icon="refresh"
                  @click="updateHandler"
                >
                  <template #loading>
                    <q-spinner-gears />
                  </template>
                </q-btn>
              </q-btn-group>
            </div>
          </div>
        </slot>
        <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>
    </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">
      <div class="col-12 q-px-md q-py-xs">
        <q-card
          class="q-table__grid-item col-12 overflow-auto"
          :class="{
            'bg-grey-2': !!props.selected,
            'cursor-pointer': !!rowsHandler,
          }"
          @click="rowsHandlerCast(props.row)"
        >
          <q-card-section
            v-if="['single', 'multiple'].includes($props.selection)"
          >
            <q-checkbox
              v-model="props.selected"
              dense
              :label="props.row.name"
            />
          </q-card-section>
          <q-separator
            v-if="['single', 'multiple'].includes($props.selection)"
          />
          <div class="q-table__grid-item-card">
            <div
              v-for="column in columns.filter(
                (col) => col.name !== 'desc' && !col.hidden
              )"
              :key="column.name"
              class="q-table__grid-item-row"
            >
              <div class="q-table__grid-item-title">
                {{ column.label }}
              </div>
              <div class="q-table__grid-item-value">
                <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)
                                "
                              >
                                {{
                                  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>
                    <template v-else>
                      <q-chip
                        v-if="has(column, 'handler')"
                        :class="{ 'no-icon': !has(column, 'icon') }"
                        :icon="has(column, 'icon') ? column.icon : ''"
                        clickable
                        @click="handler($event, props.row, column.name)"
                        :disable="column.isDisable || false"
                      >
                        <div class="ellipsis">
                          {{ format(props.row, column.name) }}
                          <q-tooltip>{{
                            format(props.row, column.name)
                          }}</q-tooltip>
                        </div>
                      </q-chip>
                    </template>
                  </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>
              </div>
            </div>
          </div>
        </q-card>
      </div>
    </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">
.no-icon {
  .q-icon {
    display: none;
  }
}
.accepted {
  font-size: 12px;
}
</style>
