<template>
  <div>
    <div v-if="loading">
      <q-linear-progress indeterminate size="xs" color="black" />
    </div>
    <div v-else class="container">
      <div
        v-for="reportType of reportTypes"
        class="item"
        v-ripple
        @click="handleClick(reportType.id)"
      >
        <div class="row full-height">
          <span class="col title">{{ reportType.name }}</span>
          <div class="col-shrink flex items-center">
            <q-icon size="32px" name="pgs-shevron-right-off" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.loading {
  color: black;
}

.container {
  display: flex;
  flex-direction: column;
  //grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

.item {
  position: relative;
  color: #1491cf;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid rgba(1, 72, 116, 0.11);
  border-radius: 8px;
  background-color: white;

  .title {
    padding: 6px 0 6px 12px;
    color: rgba(2, 12, 18, 0.9);
    font-family: 'Golos UI', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 20px; /* 125% */
    letter-spacing: -0.24px;
  }

  &:hover {
    cursor: pointer;
    border: 1px solid #1491cf;
    box-shadow: 0 0.6px 1.8px rgba(7, 46, 71, 0.12),
      0 3.2px 8px rgba(7, 46, 71, 0.15);
    .title {
      color: #1491cf;
    }
  }
}

//@media (max-width: 1280px) {
//  .container {
//    grid-template-columns: 1fr;
//  }
//}

// @media (max-width: 768px) {
// }
</style>

<script lang="ts">
import {Component, Vue} from 'vue-property-decorator';
import {fetchBaseReports} from './definitions';

@Component({})
export default class Reports extends Vue {
  public reportTypes: any = null;
  public loading = false;

  async loadReports() {
    this.loading = true;
    try {
      this.reportTypes = await fetchBaseReports();
    } catch (error) {
      console.error('Ошибка при загрузки видов отчетов', error);
    } finally {
      this.loading = false;
    }
  }

  created() {
    this.loadReports();
  }

  public handleClick(reportTypeId: string) {
    // TODO: переключиться со старого на новый
    // this.$router.push({ name: 'reports-list', params: { parentId: reportTypeId }});
    this.$router.push({ name: 'reports-manual', params: { id: reportTypeId } });
  }
}
</script>
