import { Component, OnInit } from '@angular/core';
import { IonIcon } from '@ionic/angular';
import { IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonTextarea, IonInput } from '@ionic/angular/standalone';
/** 引用：从fmode-ng库引用FmodeChatCompletion类 */
import { FmodeChatCompletion, MarkdownPreviewModule } from 'fmode-ng';

@Component({
  selector: 'app-short-generator',
  templateUrl: './short-generator.page.html',
  styleUrls: ['./short-generator.page.scss'],
  standalone: true,
  imports: [IonHeader, IonToolbar, IonTitle, IonContent, IonButton, IonTextarea, IonInput,
    // 引入fm-markdown-preview组件模块
    MarkdownPreviewModule
  ],
})
export class ShortGeneratorPage implements OnInit {
  router: any;
  constructor() { }
  ngOnInit() { }
  // 用户输入提示词
  fengge: string = "风格要求"
  fenggeInput(ev: any) {
    this.fengge = ev.detail.value;
  }
  // 用户输入提示词
  userPrompt: string = "请输入人物设定"
  promptInput(ev: any) {
    this.userPrompt = ev.detail.value;
  }
  // 属性：组件内用于展示消息内容的变量
  responseMsg: any = ""
  // 方法：实例化completion对象，传入消息数组，并订阅生成的可观察对象。
  isComplete: boolean = false; // 定义完成状态属性，用来标记是否补全完成
  sendMessage() {
    console.log("create")

    let PromptTemplate = `
    您作为一名专业的${this.fengge}小说作家，请您根据用户描述的小说人物，生成小说大纲。
    以下是用户的口述：${this.userPrompt}
    `

    let completion = new FmodeChatCompletion([
      { role: "system", content: "" },
      { role: "user", content: PromptTemplate }
    ])
    completion.sendCompletion().subscribe((message: any) => {
      console.log(message.content);
      this.responseMsg = message.content;
      if (message?.complete) {
        this.isComplete = true;
        // 跳转到short-novel页面，并传递responseMsg作为参数
        this.router.navigate(['/short-novel'], { state: { outline: this.responseMsg } });
      }
    });
  }
}
