<template>
  <el-select v-model="modelValue">
    <template #label="{ label }">
      <div :style="{ fontFamily: `'${label}'` }">{{ label }}</div>
    </template>
    <el-option
      v-for="item in fontOptions"
      :key="item.value"
      :value="item.value"
      :label="item.label"
    >
      <div :style="{ fontFamily: `'${item.label}'` }">
        {{ item.label }}
      </div>
    </el-option>
  </el-select>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useProjectStore } from '@/store/modules/project'
const projectStore = useProjectStore()
// 字体选项
const fontOptions = computed(() => {
  const list = (projectStore.project?.resources.fonts || []).map((font) => {
    return {
      label: font.fileName,
      value: font.id
    }
  })
  return [{ label: 'montserratMedium', value: 'montserratMedium' }, ...list]
})

const modelValue = defineModel<string>('modelValue')
</script>

<style scoped></style>
