<script lang="ts" setup>
import type { Nullable, Recordable } from '@vben/types';

import { ref, unref } from 'vue';

import { Button, Card, Radio } from 'ant-design-vue';

import desc from './desc.vue';
import lyric from './lyric.vue';

defineOptions({ name: 'AiMusicModeIndex' });

const emits = defineEmits(['generateMusic']);

const generateMode = ref('lyric');

const modeRef = ref<Nullable<{ formData: Recordable<any> }>>(null);

function generateMusic() {
  emits('generateMusic', { formData: unref(modeRef)?.formData });
}
</script>

<template>
  <Card class="!mb-0 h-full w-80">
    <Radio.Group v-model:value="generateMode" class="mb-4">
      <Radio.Button value="desc"> 描述模式 </Radio.Button>
      <Radio.Button value="lyric"> 歌词模式 </Radio.Button>
    </Radio.Group>

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

    <Button type="primary" shape="round" class="w-full" @click="generateMusic">
      创作音乐
    </Button>
  </Card>
</template>
