<template>
    <Select
        v-model="model"
        :grouped-options="modelGroups"
        class="model-select"
        position="top"
    >
        <template #prefix>
            <img src="@/assets/dialog/model.svg" alt="" style="width: 16px;">
        </template>
    </Select>
</template>

<script setup>
import Select from '@/components/Select/index.vue'
import paintingConfig from '@/config/modelConfig/painting.json'
import videoConfig from '@/config/modelConfig/video.json'

const props = defineProps({
  modelValue: {
    type: String,
    default: 'flux'
  },
  typeValue: {
    type: String,
    default: 'text'
  },
  type: {
    type: String,
    default: 'painting'
  }
})

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

const model = computed({
  get: () => props.modelValue,
  set: (value) => {
    emit('update:modelValue', value)
    const newType = getModelType(value)
    emit('update:typeValue', newType)
  }
})

const getModelsByType = (type) => {
  if (type === 'video') {
    return videoConfig.video || []
  }
  const config = paintingConfig
  return {
    generate: config.generate || [],
    edit: config.edit || [],
    vision: config.vision || []
  }
}

const modelData = computed(() => {
  return getModelsByType(props.type)
})

const isVideo = computed(() => props.type === 'video')

const generateModels = computed(() => modelData.value.generate || [])
const editModels = computed(() => modelData.value.edit || [])
const visionModels = computed(() => modelData.value.vision || [])

const modelGroups = computed(() => {
  if (isVideo.value) {
    return [{
      label: '选择模型',
      options: modelData.value
    }]
  }
  return [
    {
      label: '生成模型',
      options: generateModels.value
    },
    {
      label: '编辑模型',
      options: editModels.value
    },
    {
      label: '视觉理解模型',
      options: visionModels.value
    }
  ]
})

const getModelType = (value) => {
  if (isVideo.value) {
    return 'text'
  }
  if (generateModels.value.find(m => m.value === value)) {
    return 'text'
  }
  if (editModels.value.find(m => m.value === value)) {
    return 'image'
  }
  if (visionModels.value.find(m => m.value === value)) {
    return 'vision'
  }
  return 'text'
}
</script>

<style lang="less" scoped>
.model-select {
    :deep(.select-header) {
        height: 40px;
        padding: 0 15px;
        border-radius: 10px;
        border: 1px solid #E8E9EB;
        background: #f5f6f7;
        
        &:hover {
            background: #e9eaeb;
        }
    }
    
    :deep(.select-text) {
      font-size: 14px;
    }
    
    :deep(.dropdown-menu) {
        max-height: 510px;
        overflow-y: auto;
    }
    
    :deep(.dropdown-item) {
        min-width: 120px;
        
        &.active {
            background: rgba(0, 15, 51, 0.10);
            color: #000F33;
            font-weight: 600;
        }
    }
}
</style>
