<template>
  <v-main>
    <v-select
      :readonly="!editMode"
      ref="status"
      @blur="$refs.status.blur()"
      v-model="status"
      @change="updateTicket"
      :items="availableStates"
      :label="$t('cs.status')"
      item-text="state"
      item-value="stateValue"
      return-object
      standard>
      <template v-slot:selection="{item, index}">
        <span class="text-capitalize">{{ item }}</span>
      </template>
    </v-select>
  </v-main>
</template>

<script>
export default {
  props: {
    editMode: {
      type: Boolean,
      default: function () {
        return false;
      }
    },
    status: {
      type: String,
      default: function () {
        return null;
      },
    },
    availableStates: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  methods: {
    updateTicket() {
      this.$root.$emit('update-ticket', this.status, null, null, null, false);
    }
  }
};
</script>
