<script setup lang="ts">
import { mdiBroom, mdiMagnify } from '@mdi/js'

interface GradeOption {
  title: string
  value: number
}

interface SearchState {
  studentId: string
  name: string
  department: string
  grade: number | null
  status: string
}

defineProps<{
  departments: string[]
  gradeOptions: GradeOption[]
  statuses: string[]
}>()

const search = defineModel<SearchState>({ required: true })

defineEmits<{
  (e: 'reset'): void
}>()
</script>

<template>
  <v-col cols="12" md="2">
    <div id="search-student-id-label" class="text-body-2 text-medium-emphasis pl-2">學號</div>
    <v-text-field
      id="search-student-id"
      v-model="search.studentId"
      aria-labelledby="search-student-id-label"
      density="compact"
      hide-details
      name="searchStudentId"
      placeholder="例如：S2024001"
      variant="outlined"
    />
  </v-col>
  <v-col cols="12" md="2">
    <div id="search-name-label" class="text-body-2 text-medium-emphasis pl-2">姓名</div>
    <v-text-field
      id="search-name"
      v-model="search.name"
      aria-labelledby="search-name-label"
      density="compact"
      hide-details
      name="searchName"
      placeholder="例如：王小明"
      variant="outlined"
    />
  </v-col>
  <v-col cols="12" md="2">
    <div id="search-department-label" class="text-body-2 text-medium-emphasis pl-2">系所</div>
    <v-select
      id="search-department"
      v-model="search.department"
      aria-labelledby="search-department-label"
      density="compact"
      hide-details
      :items="departments"
      name="searchDepartment"
      variant="outlined"
    />
  </v-col>
  <v-col cols="12" md="2">
    <div id="search-grade-label" class="text-body-2 text-medium-emphasis pl-2">年級</div>
    <v-select
      id="search-grade"
      v-model="search.grade"
      aria-labelledby="search-grade-label"
      density="compact"
      hide-details
      item-title="title"
      item-value="value"
      :items="gradeOptions"
      name="searchGrade"
      variant="outlined"
    />
  </v-col>
  <v-col cols="12" md="2">
    <div id="search-status-label" class="text-body-2 text-medium-emphasis pl-2">狀態</div>
    <v-select
      id="search-status"
      v-model="search.status"
      aria-labelledby="search-status-label"
      density="compact"
      hide-details
      :items="statuses"
      name="searchStatus"
      variant="outlined"
    />
  </v-col>
  <v-col class="d-flex justify-end align-end flex-grow-1 ga-2" cols="12" md="auto">
    <v-btn :prepend-icon="mdiBroom" variant="text" @click="$emit('reset')">清除</v-btn>
    <v-btn color="primary" disabled :prepend-icon="mdiMagnify" variant="tonal">查詢</v-btn>
  </v-col>
</template>
