<template>
  <Select
    :model-value="modelValue"
    :options="modelOptions"
    placeholder="选择模型"
    @update:model-value="(v) => emit('update:modelValue', v)"
  >
    <template #prefix>
      <img src="@/assets/dialog/model.svg" alt="" style="width: 16px; height: 16px;">
    </template>
  </Select>
</template>

<script setup>
import { computed } from 'vue'
import Select from '@/components/Select/index.vue'

const props = defineProps({
  modelValue: { type: String, default: '' },
  models: { type: Array, default: () => [] }
})

const emit = defineEmits(['update:modelValue', 'update:typeValue'])

const modelOptions = computed(() => {
  const groups = {}
  props.models.forEach((m) => {
    const tag = m.tags?.[0] || '默认'
    if (!groups[tag]) groups[tag] = []
    groups[tag].push({ value: m.id, label: m.display_name, disabled: m.disabled })
  })
  return Object.entries(groups).map(([label, options]) => ({ label, options }))
})
</script>
