<script setup lang="ts">
import _teachers from '~/assets/jsons/teachers.json'
import type { Teacher } from '~/common/interfaces/Teacher'

const teachers = _teachers as Teachers

interface Teachers {
  [key: string]: Teacher[]
}

const icons = {
  语文: 'mdi-ideogram-cjk-variant',
  数学: 'mdi-math-integral',
  英语: 'mdi-alpha-e-box-outline',
  道德与法治: 'mdi-scale-balance',
  历史: 'mdi-pillar',
  物理: 'mdi-cube-outline',
  化学: 'mdi-molecule',
  体育: 'mdi-run',
  音乐: 'mdi-music',
  美术: 'mdi-palette',
  信息技术: 'mdi-desktop-classic',
  地理: 'mdi-map-marker',
  生物: 'mdi-dna',
  综合: 'mdi-tooltip',
  科学: 'mdi-microscope',
} as {
  [key: string]: string
}
</script>

<template>
  <article>
    <h1>在19预科2班任教的老师</h1>

    <v-list lines="three">
      <v-list-item v-for="item in Object.keys(_teachers)" :key="item">
        <v-list-item-title>
          <h2 class="mt-0">
            <v-icon :icon="icons[item]" />{{ item }}
          </h2>
        </v-list-item-title>
        <v-expansion-panels multiple>
          <v-expansion-panel v-for="teacher in teachers[item]" :key="teacher.name" :title="teacher.name">
            <v-expansion-panel-text>
              <div class="flex flex-col sm:flex-row sm:items-start items-center">
                <p class="w-100%" v-html="teacher.description" />
                <v-img class="m-3 w-200px" :src="teacher.image" />
              </div>
            </v-expansion-panel-text>
          </v-expansion-panel>
        </v-expansion-panels>
      </v-list-item>
    </v-list>
  </article>
</template>
