<template>
  <q-table
    v-bind="$attrs"
    :columns="fullColumns"
    :data="dataCast"
    class="no-shadow text-grey-9 overflow-hidden"
    separator="cell"
    wrap-cells
    bordered
    style="border-radius: 0"
    :pagination.sync="pagination"
    hide-bottom
    binary-state-sort
    v-on="$listeners"
  >
    <template #header="props">
      <q-tr key="h1" :props="props">
        <q-th
          :key="props.cols[0].name"
          :props="props"
          rowspan="2"
          style="font-size: 18px; text-align: center; color: #757575"
        >
          {{ checkTitle }}
        </q-th>
        <th
          :colspan="props.cols.length"
          style="font-size: 18px; text-align: center; color: #757575"
        >
          {{ columnsTitle }}
        </th>
      </q-tr>
      <q-tr key="h2" :props="props">
        <q-th
          v-for="col in props.cols.slice(1)"
          :key="col.name"
          :props="props"
          :class="{ 'table-cell-error': col.error !== -1 }"
          style="border-left: 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 #body-cell="props">
      <q-td
        v-if="props.row.isTitle"
        :props="props"
        style="
          border-left: none;
          border-right: none;
          font-size: 18px;
          text-align: center;
        "
        class="bg-grey-3 text-grey-8"
      >
        {{ props.value }}
      </q-td>
      <q-td
        v-else
        :props="props"
        :style="
          props.col.name === 'title' &&
          (props.col.i < props.row.error || props.col.error >= props.rowIndex)
            ? 'border-left: 2px solid red;'
            : ''
        "
      >
        <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
              :icon="
                expands[props.rowIndex].val ? 'expand_less' : 'expand_more'
              "
              @click="
                expands[props.rowIndex].val = !expands[props.rowIndex].val
              "
            />
            <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[props.value]">
          {{ props.value }}
        </template>
        <q-icon
          v-else
          :name="icons[props.value].name"
          :color="icons[props.value].color"
          size="30px"
        >
          <q-tooltip v-if="icons[props.value].tooltip">
            {{ icons[props.value].tooltip }}
          </q-tooltip>
          <q-btn
            v-if="props.row.correction"
            color="positive"
            flat
            style="width: 23px; height: 23px; position: relative; top: -18px"
            @click="goToDocument(props.row.correction.docId)"
          >
            <q-icon
              name="o_announcement"
              color="grey-7"
              style="
                font-size: 19px;
                position: relative;
                top: -10px;
                left: -16px;
              "
            />
            <q-tooltip>
              <div class="text-center">{{ props.row.correction.comment }}</div>
              <div class="text-center">{{ props.row.correction.fileName }}</div>
            </q-tooltip>
          </q-btn>
        </q-icon>
      </q-td>
    </template>
  </q-table>
</template>

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

<style scoped></style>
