<script setup lang="ts">
import SelectInput from 'src/components/shared/SelectInput.vue';

defineProps<{
  readonly?: boolean;
}>();

const reason = defineModel<string>('reason');
const detail = defineModel<string>('detail');
</script>
<template>
  <q-expansion-item
    dense
    :default-opened="true"
    class="overflow-hidden bordered full-width"
    switch-toggle-side
    style="border-radius: var(--radius-2)"
    expand-icon="mdi-chevron-down-circle"
    header-class="surface-1 q-py-sm text-medium text-body1"
  >
    <template #header>
      <span>
        {{ $t('debitNote.label.debitNoteInformation') }}
      </span>
    </template>

    <main class="q-px-md q-py-sm surface-1 row q-col-gutter-sm">
      <SelectInput
        :readonly
        for="select-debit-note-specify-reason"
        :label="$t('debitNote.label.specifyReasonForDebit')"
        class="col-md col-12"
        v-model="reason"
        :option="[
          { label: $t('debitNote.label.reasonReturn'), value: 'Return' },
          { label: $t('debitNote.label.reasonCanceled'), value: 'Canceled' },
        ]"
      ></SelectInput>
      <q-input
        :readonly
        for="input-debit-note-additional-detail"
        :label="$t('debitNote.label.additionalDetail')"
        outlined
        dense
        class="col"
        v-model="detail"
      ></q-input>
    </main>
  </q-expansion-item>
</template>
<style scoped></style>
