<script setup lang="ts">
import { ref, onMounted } from 'vue';
import {computed} from 'vue';

const quarters = ['Q1', 'Q2', 'Q3', 'Q4'];
//const selectedQuarter = ref(Math.floor((new Date().getMonth() + 3) / 3));

const props = defineProps({'modelValue':{type: Object, required:true}});
const emit = defineEmits(['update:modelValue']);

const value = computed({
  get(){ return props.modelValue; },
  set(val){ emit('update:modelValue', value.value); }
});
</script>

<template>
  <div class="quarter-selector">
    <select v-model="value.data" class="select-input">
      <option v-for="quarter in quarters" :key="quarter" :value="quarter">
        {{ quarter }}
      </option>
    </select>
  </div>
</template>

<style scoped>
.select-input {
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 200px;
}
</style>