<template>
  <q-table
    v-bind="$attrs"
    v-on="$listeners"
    :columns="fullColumns"
    :data="dataCast"
    :sort-method="customSort"
    class="no-shadow text-grey-9 overflow-hidden sticky-column-table"
    separator="cell"
    wrap-cells
    bordered
    :style="`border-radius: 0; ${fullscreen ? '' : 'max-height: 80vh'}`"
    :pagination.sync="pagination"
    hide-bottom
    binary-state-sort
    ref="checksTable"
  >
    <template v-slot:header="props">
      <q-tr :props="props" key="h1">
        <q-th
          :key="props.cols[0].name"
          :props="props"
          rowspan="2"
          style="
            border-right: 1px solid rgba(0, 0, 0, 0.12) !important;
            font-size: 18px;
            text-align: center;
            color: #757575;
          "
        >
          <q-btn
            flat
            round
            dense
            :icon="fullscreen ? 'fullscreen_exit' : 'fullscreen'"
            @click.stop="toggleFullscreen"
            style="position: absolute; top: 5px; left: 5px; z-index: 5"
          />
          {{ checkTitle }}
        </q-th>
        <th
          :colspan="props.cols.length"
          style="
            border-left: none;
            font-size: 18px;
            text-align: center;
            color: #757575;
          "
        >
          {{ columnsTitle }}
        </th>
      </q-tr>
      <q-tr :props="props" key="h2">
        <q-th
          v-for="(col, i) in props.cols.slice(1)"
          :key="col.name"
          :props="props"
          :class="{ 'table-cell-error': col.error !== -1 }"
          :style="{
            borderLeft: !i
              ? 'none'
              : '1px solid rgba(0, 0, 0, 0.12) !important',
          }"
        >
          <div v-if="col.type" style="color: #c4c4c4">{{ col.type }}</div>
          {{ col.label }}
        </q-th>
      </q-tr>
    </template>

    <template v-slot:body-cell="props">
      <q-td
        :props="props"
        style="
          border-left: none;
          border-right: none;
          font-size: 18px;
          text-align: center;
        "
        v-if="props.row.isTitle && props.col.field === 'title'"
        class="bg-grey-3 text-grey-8"
        :colspan="props.cols.length"
      >
        <q-btn
          v-if="props.col.name === 'title'"
          flat
          style="text-transform: none; font-size: 16px"
          @[mayClickOnLink]="checkLinkedObjects(props.row.linkedObjects)"
        >
          {{ props.value }}
        </q-btn>
      </q-td>
      <q-td
        v-else-if="!props.row.isTitle"
        :props="props"
        :style="`${
          props.col.name === 'title' &&
          (props.col.i < props.row.error || props.col.error >= props.rowIndex)
            ? 'border-left: 4px solid #c10015;'
            : ''
        }
            ${
              props.col.name === 'title'
                ? 'border-right: 1px solid rgba(0, 0, 0, 0.12) !important;'
                : ''
            }
            ${props.col.i === 0 ? 'border-left: none;' : ''}
           `"
      >
        <template v-if="props.col.name === 'title'">
          <div class="flex no-wrap items-center">
            <!--            <q-btn-->
            <!--                size="sm"-->
            <!--                style="margin-right: 5px; color: rgba(0, 0, 0, 0.54)"-->
            <!--                flat-->
            <!--                round-->
            <!--                @click="expands[props.rowIndex].val = !expands[props.rowIndex].val" :icon="expands[props.rowIndex].val ? 'expand_less' : 'expand_more'" -->
            <!--            />-->
            <div>
              <span style="font-size: 14px">{{ props.value }}</span>
              <div v-if="expands[props.rowIndex].val" class="q-pl-lg">
                <div style="font-size: 12px" class="q-py-sm">
                  <b>{{ $t('base.checkboxTable.docColumnTitle') }}: </b>
                  <span>{{ props.row.baseDocument }}</span>
                </div>
              </div>
            </div>
          </div>
        </template>
        <template
          v-else-if="
            !icons[get(props.value, 'icon')] && typeof props.value !== 'object'
          "
        >
          {{ props.value }}
        </template>
        <template
          v-else-if="
            !icons[get(props.value, 'icon')] && typeof props.value === 'object'
          "
        >
          <div class="flex items-center justify-center no-wrap">
            <q-spinner v-if="loading" color="grey-6" size="30px" />
            <span v-else-if="!loading">
              <q-select
                borderless
                v-model="props.value.value"
                :options="selectOptions"
                :disable="isCheckBtnDisabled(props.row)"
                v-on="props.row.withComment ? {
                  input: (value) => onManualCommentInput(value, results, props)
                } : {
                  input: () => checkResults(results, true, true, props)
                }"
                emit-value
                map-options
                style="max-width: 70px"
                :ref="`${props.value.code}-${props.value.objectId}`"
              >
                <template v-if="props.value.value === null" v-slot:default>
                  <q-item>
                    <q-item-section>
                      <q-icon name="update" color="warning" size="30px" />
                    </q-item-section>
                  </q-item>
                </template>
                <template v-slot:selected-item="scope">
                  <q-item v-bind="scope.itemProps" v-on="scope.itemEvents">
                    <q-item-section>
                      <q-icon
                        :name="scope.opt.label.icon"
                        :color="scope.opt.label.color"
                        :size="scope.opt.label.size"
                      />
                    </q-item-section>
                  </q-item>
                </template>
                <template v-slot:option="scope">
                  <q-item v-bind="scope.itemProps" v-on="scope.itemEvents">
                    <q-item-section>
                      <q-icon
                        :name="scope.opt.label.icon"
                        :color="scope.opt.label.color"
                        :size="scope.opt.label.size"
                      />
                    </q-item-section>
                  </q-item>
                </template>
              </q-select>
              <q-tooltip v-if="isCheckBtnDisabled(props.row)">
                {{
                  isResponsiblePerson
                    ? $t('base.decisionTable.editForbidden')
                    : $t('base.decisionTable.noResponsible')
                }}
              </q-tooltip>
            </span>
          </div>
        </template>
        <q-spinner v-else-if="loading" color="grey-6" size="30px" />
        <span v-else>
          <q-btn
            @click="
              openOverridingModal({
                value: props.value.value,
                type: props.value.type,
                code: props.value.code,
                name: props.row.title,
                status: props.value.icon,
                id: props.value.id,
              })
            "
            padding="none"
            flat
            :icon="icons[props.value.icon].name"
            :color="icons[props.value.icon].color"
            :disabled="isCheckBtnDisabled(props.row)"
            size="18px"
          >
            <q-tooltip v-if="icons[props.value.icon].tooltip">
              {{ icons[props.value.icon].tooltip }}
            </q-tooltip>
            <q-btn
              v-if="props.value.correction"
              @[mayClickOnLink].stop="goToDocument(props.value.correction.docId)"
              color="grey-7"
              flat
              style="
                width: 23px;
                height: 23px;
                right: -24px;
                position: absolute;
                top: -8px;
              "
            >
              <q-icon
                name="o_announcement"
                color="grey-7"
                style="position: relative; top: -6px; right: 5px; font-size: 19px"
              />
              <q-tooltip>
                <div class="text-center">
                  {{ props.value.correction.comment }}
                </div>
                <div class="text-center">
                  {{ props.value.correction.fileName }}
                </div>
              </q-tooltip>
            </q-btn>
          </q-btn>
          <q-tooltip v-if="isCheckBtnDisabled(props.row)">
            {{
              isResponsiblePerson
                ? $t('base.decisionTable.editForbidden')
                : $t('base.decisionTable.noResponsible')
            }}
          </q-tooltip>
        </span>
      </q-td>
    </template>
  </q-table>
</template>

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

<style scoped lang="sass">
.sticky-column-table

  tr th
    position: sticky
    z-index: 3
    background: #fff

  thead tr:last-child th
    top: 48px
    z-index: 4

  thead tr:first-child th
    top: 0
    z-index: 4
    min-width: 400px

  tr:first-child th:first-child
    z-index: 5

  td:first-child
    background-color: white
    z-index: 2

  td:first-child, th:first-child
    position: sticky
    left: 0
</style>
