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

<template>
  <div class="q-pa-md q-gutter-y-md">
    <div class="bg-white q-pb-xl rounded-borders">
      <q-btn-toggle
          v-model="viewCalendar"
          class="q-ma-sm"
          :options="[
      { value: true, slot: 'one' },
      { value: false, slot: 'two' },
    ]"
      >
        <template #one>
          <div class="row items-center no-wrap">
            <q-icon name="calendar_today" />
          </div>
        </template>

        <template #two>
          <div class="row items-center no-wrap">
            <q-icon name="sort" />
          </div>
        </template>
      </q-btn-toggle>
      <div v-show="!viewCalendar">
        <BaseTable
            :title="$t('tickets.listLabel')"
            :columns="columns"
            :data="model.records"
            :loading="model.loading"
            :pagination.sync="model.pagination"
            :visible-columns="model.visibleColumns"
            @requestTable="init"
            @update="init"
        >
          <template #search>
            <tickets-search-bar @query="fetch" />
          </template>
        </BaseTable>
      </div>
      <div v-show="viewCalendar" class="row q-ma-md">
        <div :key="selectedMonth + '-title'" class="col-5">
          <div class="row justify-center calendar-width">
            <div class="col-12 row justify-center items-center">
              <q-btn flat icon="keyboard_arrow_left" @click="prevMonth" />
              {{ translateMonth }} {{ translateYear }}
              <q-btn flat icon="keyboard_arrow_right" @click="nextMonth" />
            </div>
            <div :key="selectedMonth + '-body'" class="col-12">
              <div class="row full-width justify-center">
                <div class="calendar-col-header col-auto text-center">Пн</div>
                <div class="calendar-col-header col-auto text-center">Вт</div>
                <div class="calendar-col-header col-auto text-center">Ср</div>
                <div class="calendar-col-header col-auto text-center">Чт</div>
                <div class="calendar-col-header col-auto text-center">Пт</div>
                <div class="calendar-col-header col-auto text-center">Сб</div>
                <div class="calendar-col-header col-auto text-center">Вс</div>
              </div>
              <div
                  v-for="(week, index) in monthData"
                  :key="selectedMonth + index"
                  class="row full-width justify-center"
              >
                <template v-for="(calendarDay, index) in week">
                  <template v-if="index === 0 && calendarDay.dayOfWeek > 0">
                    <div
                        v-for="num of calendarDay.dayOfWeek"
                        :key="num"
                        class="calendar-col col-auto"
                    >
                      &nbsp;
                    </div>
                  </template>
                  <div
                      :key="calendarDay.date"
                      class="calendar-col col-auto text-center"
                  >
                    <q-btn-toggle
                        :key="calendarDay.date"
                        v-model="selectedDate"
                        class="q-ma-sm calendar-item"
                        :color="
                          !dayBeforeToday(calendarDay.date) ? 'grey-6' : 'grey-4'
                        "
                        :disable="dayBeforeToday(calendarDay.date)"
                        :options="[
                          {
                            label: calendarDay.dayOfMonth,
                            value: calendarDay.date,
                          },
                        ]"
                        @click="clickDay(calendarDay.date)"
                    ></q-btn-toggle>
                  </div>
                </template>
                <template
                    v-if="week.length < 7 && week[week.length - 1].dayOfWeek < 6"
                >
                  <div
                      v-for="num of 7 - week.length"
                      :key="num"
                      class="calendar-col col-auto"
                  ></div>
                </template>
              </div>
            </div>
          </div>
        </div>

        <div class="col-7">
          <template v-if="activeTicketsList && activeTicketsList.length">
            <div class="row full-width items-center">
              <div class="col-4">Талон</div>
              <div class="col-2">Время начала</div>
              <div class="col-2">Время окончания</div>
              <div class="col">Услуга</div>
            </div>
            <q-scroll-area style="height: 100%" class="row full-width">
              <div
                  v-for="ticket in activeTicketsList"
                  :key="ticket.id"
                  class="row full-width"
              >
                <div class="row full-width items-center">
                  <div class="col-4">
                    <q-chip
                        clickable
                        class="q-ml-none"
                        @click="openTicketCardPage(ticket.raw.bookId)"
                    >
                      {{ ticket.id }}
                    </q-chip>
                  </div>
                  <div class="col-2">
                    {{ ticket.startTime }}
                  </div>
                  <div class="col-2">
                    {{ ticket.endTime }}
                  </div>
                  <div class="col">
                    {{ ticket.service }}
                  </div>
                </div>
              </div>
            </q-scroll-area>
          </template>
          <div v-else class="row full-width justify-center items-center">
            Записей нет
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.registries-table {
  &__descr-col {
    width: 758px;
    white-space: normal !important;
  }
}
.calendar-item,
.calendar-item button {
  width: 70px;
  height: 70px;
}
.calendar-width {
  width: 600px !important;
}
.calendar-col {
  width: 80px !important;
  height: 80px !important;
}

.calendar-col-header {
  width: 80px !important;
}
</style>
