<template>
  <div>
    <q-tabs align="left" v-model="tab" mobile-arrows style="height: 53px">
      <q-tab
        v-for="sch in schedules"
        :key="sch.id"
        :name="sch.areaId"
        :title="$t('RoomSelect.scheduleFor', [sch.areaId])"
        :icon="sch.deleted ? 'delete' : 'date_range'"
        :disable="sch.deleted"
        class="bg-gray"
        color="grey-7"
      >
        {{ sch.areaName }}
      </q-tab>
    </q-tabs>
  </div>
</template>

<script lang="ts">
import { OrgScheduleDTO } from '@openapi/preorder-pgs';
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';

@Component
export default class RoomSelect extends Vue {
  @Prop() schedules: OrgScheduleDTO[];

  tab = '';

  @Watch('tab')
  onTabChange(newTabValue: string) {
    this.$emit('change', newTabValue);
  }
}
</script>

<style scoped>

</style>

<i18n>
{
  "ru": {
    "RoomSelect": {
      "scheduleFor": "Расписание для кабинета №{0}"
    }
  },
  "en": {
    "RoomSelect": {
      "scheduleFor": "Schedule for office number {0}"
    }
  }
}
</i18n>