<template>
  <ContentWrap class="w-300px h-full mb-[0!important]">
    <el-radio-group v-model="generateMode" class="mb-15px">
      <el-radio-button value="desc"> 描述模式 </el-radio-button>
      <el-radio-button value="lyric"> 歌词模式 </el-radio-button>
    </el-radio-group>

    <!-- 描述模式/歌词模式 切换 -->
    <component :is="generateMode === 'desc' ? desc : lyric" ref="modeRef" />

    <el-button type="primary" round class="w-full" @click="generateMusic"> 创作音乐 </el-button>
  </ContentWrap>
</template>

<script lang="ts" setup>
// 导入描述模式和歌词模式对应的子组件（用于动态切换）
import desc from './desc.vue'
import lyric from './lyric.vue'

// 定义组件名称（用于调试或模板引用）
defineOptions({ name: 'Index' })

// 声明自定义事件：向父组件传递音乐生成所需的表单数据
const emits = defineEmits(['generate-music'])

// 响应式变量：控制当前选择的生成模式（'desc'为描述模式，'lyric'为歌词模式），默认显示歌词模式
const generateMode = ref('lyric')

// 引用动态组件实例（用于获取子组件内部的表单数据）
// 类型说明：可能为null（组件未挂载时），挂载后包含formData属性（子组件的表单数据）
const modeRef = ref<Nullable<{ formData: Recordable }>>(null)

/*
 *@Description: 根据当前模式子组件的表单数据触发音乐生成事件
 *@MethodAuthor: xiaohong
  // 通过emits触发自定义事件'generate-music'，并传递子组件的formData数据
  // unref(modeRef)：获取ref的原始值（可能为null）
  // ?.formData：安全访问formData属性（避免null时出错）
 *@Date: 2024-06-27 16:40:16
 */
function generateMusic() {
  emits('generate-music', { formData: unref(modeRef)?.formData })
}
</script>
