<template>
  <v-row density="compact">
    <v-col cols="12" md="3">
      <v-text-field
        id="field-studentId"
        v-model="form.studentId"
        density="comfortable"
        :disabled="props.isFormLocked"
        :error-messages="props.fieldErrors.studentId"
        label="學號"
        placeholder="例如：S2024008"
        :readonly="props.isFormReadonly"
        variant="outlined"
        @update:model-value="emit('clear-field', 'studentId')"
      />
    </v-col>
    <v-col cols="12" md="3">
      <v-text-field
        id="field-name"
        v-model="form.name"
        density="comfortable"
        :disabled="props.isFormLocked"
        :error-messages="props.fieldErrors.name"
        label="姓名"
        placeholder="例如：陳怡君"
        :readonly="props.isFormReadonly"
        variant="outlined"
        @update:model-value="emit('clear-field', 'name')"
      />
    </v-col>
    <v-col cols="12" md="3">
      <v-select
        id="field-department"
        v-model="form.department"
        density="comfortable"
        :disabled="props.isFormLocked"
        :error-messages="props.fieldErrors.department"
        :items="props.departments"
        label="系所"
        :readonly="props.isFormReadonly"
        variant="outlined"
        @update:model-value="emit('clear-field', 'department')"
      />
    </v-col>
    <v-col cols="12" md="3">
      <v-select
        id="field-grade"
        v-model="form.grade"
        density="comfortable"
        :disabled="props.isFormLocked"
        :error-messages="props.fieldErrors.grade"
        item-title="title"
        item-value="value"
        :items="props.gradeOptions"
        label="年級"
        :readonly="props.isFormReadonly"
        variant="outlined"
        @update:model-value="emit('clear-field', 'grade')"
      />
    </v-col>
    <v-col cols="12" md="3">
      <v-select
        id="field-enrollYear"
        v-model="form.enrollYear"
        density="comfortable"
        :disabled="props.isFormLocked"
        :error-messages="props.fieldErrors.enrollYear"
        :items="props.enrollYears"
        label="入學年度"
        :readonly="props.isFormReadonly"
        variant="outlined"
        @update:model-value="emit('clear-field', 'enrollYear')"
      />
    </v-col>
    <v-col cols="12" md="3">
      <v-select
        id="field-status"
        v-model="form.status"
        density="comfortable"
        :disabled="props.isFormLocked"
        :error-messages="props.fieldErrors.status"
        :items="props.statuses"
        label="狀態"
        :readonly="props.isFormReadonly"
        variant="outlined"
        @update:model-value="emit('clear-field', 'status')"
      />
    </v-col>
    <v-col cols="12" md="3">
      <v-text-field
        id="field-email"
        v-model="form.email"
        density="comfortable"
        :disabled="props.isFormLocked"
        :error-messages="props.fieldErrors.email"
        label="Email"
        :readonly="props.isFormReadonly"
        variant="outlined"
        @update:model-value="emit('clear-field', 'email')"
      />
    </v-col>
  </v-row>
</template>

<script setup lang="ts">
import type { StudentFormState } from '@/composables/maint/useStudentMaintenanceForm'
import { toRef } from 'vue'

interface GradeOption {
  title: string
  value: number
}

const props = defineProps<{
  departments: string[]
  enrollYears: number[]
  fieldErrors: Record<string, string[]>
  form: StudentFormState
  gradeOptions: GradeOption[]
  isFormLocked: boolean
  isFormReadonly: boolean
  statuses: string[]
}>()

const form = toRef(props, 'form')

const emit = defineEmits<{
  (event: 'clear-field', field: keyof StudentFormState): void
}>()
</script>
