<template>
  <div>
    <Title title="音乐/歌词说明" desc="描述您想要的音乐风格和主题，使用流派和氛围而不是特定的艺术家和歌曲">
      <el-input
        v-model="formData.prompt"
        :autosize="{ minRows: 6, maxRows: 6}"
        resize="none"
        type="textarea"
        maxlength="1200"
        show-word-limit
        placeholder="一首关于糟糕分手的欢快歌曲"
      />
    </Title>

    <Title title="纯音乐" desc="创建一首没有歌词的歌曲">
      <template #extra>
        <el-switch v-model="formData.makeInstrumental" size="small"/>
      </template>
    </Title>

    <Title title="平台" desc="选择平台">
      <el-select
        v-model="formData.platform"
        placeholder="Select"
        @change="handlerPlatformChange"
      >
        <el-option
          v-for="item in AiMusicOtherPlatformEnum"
          :key="item.key"
          :label="item.name"
          :value="item.key"
        />
      </el-select>
    </Title>

    <Title title="模型" desc="选择模型">
      <el-select v-model="formData.model" placeholder="Select" >
        <el-option
          v-for="item in platformModels"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </Title>

    <Title title="版本" desc="描述您想要的音乐风格和主题，使用流派和氛围而不是特定的艺术家和歌曲">
      <el-select v-model="formData.version" placeholder="请选择">
        <el-option
          v-for="item in [{
            value: '3',
            label: 'V3'
          }, {
            value: '2',
            label: 'V2'
          }]"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </Title>
  </div>
</template>

<script lang="ts" setup>
import Title from '../title/index.vue'
import { ModelApi, ModelVO } from '@/api/ai/model/model'
import { AiPlatformEnum, AiMusicOtherPlatformEnum, AiModelTypeEnum } from '@/views/ai/utils/constants'

defineOptions({ name: 'Desc' })

const otherPlatform = ref<string>(AiPlatformEnum.SUNO) // 平台
const platformModels = ref<ModelVO[]>([]) // 模型列表

const formData = reactive({
  platform: undefined,
  modelId: undefined,
  generateMode: 1,
  model: undefined,
  prompt: '',
  makeInstrumental: false,
  version: '3'
})

/** 平台切换 */
const handlerPlatformChange = async (platform: string) => {
  console.log(platform)
  // 根据选择的平台筛选模型
  let models = platformModels.value.filter((item: ModelVO) => item.platform === platform)

  // 切换平台，默认选择一个模型
  if (models.length > 0) {
    formData.modelId = models[0].id // 使用 model 属性作为值
    formData.model = models[0].model // 使用 model 属性作为值
  } else {
    formData.modelId = undefined
    formData.model = undefined
  }
}

/** 监听 models 变化 */
watch(
  () => formData.platform,
  () => {
    handlerPlatformChange(otherPlatform.value)
  },
  { immediate: true, deep: true }
)


/** 组件挂载的时候 */
onMounted(async () => {
  // 获取模型列表
  platformModels.value = await ModelApi.getModelSimpleList(AiModelTypeEnum.VOICE)
})

defineExpose({
  formData
})

</script>
