<template>
  <div class="q-pa-md">
    <DefaultHeaderPage />
    <q-table
      :pagination-label="getPaginationLabel"
      :columns="columns"
      :rows="versions"
      :grid="$q.screen.lt.sm"
      hide-pagination
      virtual-scroll
      flat
      class="softpar-table q-pa-sm q-mt-md"
    >
      <template #no-data>
        <div class="q-mx-auto q-pa-md text-body2">
          {{ $t("http.errors.no_records_found") }}
        </div>
      </template>

      <template #body="props">
        <q-tr :props="props" class="text-body2">
          <q-td key="versao" :props="props">
            {{ props.row.version }}
          </q-td>
          <q-td key="atualizacoes" :props="props">
            <div
              v-for="change in props.row.changes"
              :key="change"
              class="flex q-my-auto q-pt-sm"
            >
              <div v-if="change.changes.length > 0">
                <div
                  class="text-bold bg-page q-mb-xs"
                  style="
                    height: 20px;
                    width: fit-content;
                    margin-left: 5px;
                    border-radius: 5px;
                    padding-left: 5px;
                    padding-right: 5px;
                  "
                >
                  {{ change.type }} :
                </div>
                <ul>
                  <li
                    v-for="changePerType in change.changes"
                    :key="changePerType"
                  >
                    {{ changePerType.description }}
                  </li>
                </ul>
              </div>
            </div>
          </q-td>
          <q-td key="data" :props="props">
            {{ props.row.date }}
          </q-td>
        </q-tr>
      </template>

      <template #item="{ row }">
        <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3">
          <q-card bordered flat class="q-pa-sm full-height">
            <div class="row justify-between items-center q-mb-sm">
              <div class="text-subtitle1 text-bold">
                Versão {{ row.version }}
              </div>
              <div class="text-caption text-grey">{{ row.date }}</div>
            </div>

            <q-separator />

            <div class="q-mt-sm text-body2">
              <div class="text-caption text-grey q-mb-xs">Atualizações:</div>

              <div
                v-for="change in row.changes"
                :key="change"
                class="flex q-my-auto q-pt-sm"
              >
                <div v-if="change.changes.length > 0">
                  <div
                    class="text-bold bg-page q-mb-xs"
                    style="
                      height: 20px;
                      width: fit-content;
                      margin-left: 5px;
                      border-radius: 5px;
                      padding-left: 5px;
                      padding-right: 5px;
                    "
                  >
                    {{ change.type }} :
                  </div>
                  <ul>
                    <li
                      v-for="changePerType in change.changes"
                      :key="changePerType"
                    >
                      {{ changePerType.description }}
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </q-card>
        </div>
      </template>
    </q-table>
  </div>
</template>

<script setup>
import versions from "./data/versions.js";
import DefaultHeaderPage from "src/components/layout/DefaultHeaderPage.vue";

const columns = [
  {
    name: "versao",
    label: "Versão do sistema",
    field: "versao",
    align: "center",
    style: "width: 5%; ",
  },
  {
    name: "atualizacoes",
    label: "Atualizações",
    field: "atualizacoes",
    align: "left",
    style: "width: 75%;",
  },
  {
    name: "data",
    label: "Data da atualização",
    field: "data",
    align: "center",
    style: "width: 10%",
  },
];

const getPaginationLabel = (from, to, last) => {
  return `${from}-${to} de ${last}`;
};
</script>

<style lang="scss">
@import "src/css/table.scss";
</style>
