classroom-music-activation/miniprogram/pages/chat/chat.ts

interface Message {
  id: string;
  type: 'ai' | 'user' | 'reply';
  contentType: 'text' | 'image' | 'faq';
  content: string;
  questions?: string[];
  timestamp: number;
}

interface FAQItem {
  question: string;
  answer: string;
}

import { api_cozeAgent } from '../../api/login';

const FAQ_LIST: FAQItem[] = [
  { question: '产品价格是多少?', answer: '我们的产品价格根据不同的套餐有所不同。基础版￥99/月，专业版￥199/月，企业版￥499/月。您可以根据自己的需求选择合适的套餐。' },
  { question: '如何购买课程?', answer: '您可以通过以下步骤购买课程：1. 在首页浏览课程列表；2. 点击心仪的课程进入详情页；3. 点击"立即购买"按钮；4. 选择支付方式完成支付。' },
  { question: '支持哪些设备?', answer: '我们的产品支持多种设备：iOS设备（iPhone、iPad）、Android设备（手机、平板）、Windows电脑、Mac电脑，以及主流的智能电视。' },
  { question: '有没有试用版本?', answer: '有的！我们为所有新用户提供7天免费试用期。试用期间您可以体验全部专业版功能，无需绑定支付方式。试用期结束后，您可以选择是否订阅。' },
  { question: '售后服务政策', answer: '我们提供完善的售后服务：1. 7天无理由退款；2. 产品问题30天内免费换新；3. 终身技术支持；4. 专属客服一对一服务。如有任何问题，请随时联系我们。' },
  { question: '开具发票', answer: '我们可以为您开具增值税普通发票或专用发票。请在购买后30天内，在"我的订单"页面点击"申请开票"，填写相关信息后，我们会在5个工作日内将发票发送至您的邮箱。' },
];

Page({
  data: {
    messages: [] as Message[],
    inputValue: '',
    scrollToMessage: '',
    userAvatar: '',
    isLoading: false,
    avatarError: false,
    keyboardHeight: 0,
  },

  onLoad() {
    this.loadUserInfo();
    this.initWelcomeMessages();
  },

  // 加载用户信息
  loadUserInfo() {
    const userInfo = wx.getStorageSync('userInfo');
    if (userInfo) {
      this.setData({
        userAvatar: userInfo.avatarUrl || ''
      });
    }
  },

  // 初始化欢迎消息
  initWelcomeMessages() {
    const messages: Message[] = [];

    // 第一条欢迎消息
    messages.push({
      id: this.generateId(),
      type: 'ai',
      contentType: 'text',
      content: '您好!欢迎来到音乐数字AI客服中心。我是您的专属客服小助手，很高兴为您服务!请问有什么可以帮助您的吗?',
      timestamp: Date.now()
    });

    // 第二条常见问题卡片
    messages.push({
      id: this.generateId(),
      type: 'ai',
      contentType: 'faq',
      content: '常见问题',
      questions: FAQ_LIST.map(item => item.question),
      timestamp: Date.now() + 1
    });

    this.setData({ messages }, () => {
      this.scrollToBottom();
    });
  },

  // 生成唯一ID
  generateId(): string {
    return Date.now().toString(36) + Math.random().toString(36).substr(2);
  },

  // 滚动到底部
  scrollToBottom() {
    this.setData({
      scrollToMessage: 'last-message'
    });
  },

  // 头像加载失败
  onAvatarError() {
    this.setData({ avatarError: true });
  },

  // 输入框变化
  onInput(e: WechatMiniprogram.Input) {
    this.setData({
      inputValue: e.detail.value
    });
  },

  onKeyboardHeightChange(e: WechatMiniprogram.InputKeyboardHeightChange) {
    const keyboardHeight = e.detail.height || 0;

    if (keyboardHeight === this.data.keyboardHeight) return;

    this.setData({ keyboardHeight }, () => {
      this.scrollToBottom();
    });
  },

  // 发送文字消息
  sendTextMessage() {
    const { inputValue, isLoading } = this.data;

    if (!inputValue.trim() || isLoading) return;

    const content = inputValue.trim();

    // 添加用户消息
    this.addUserMessage('text', content);

    // 清空输入框
    this.setData({ inputValue: '' });

    // 发送到服务器
    this.sendMessageToServer(content, 'text');
  },

  // 添加用户消息
  addUserMessage(contentType: 'text' | 'image', content: string) {
    const { messages } = this.data;
    const newMessage: Message = {
      id: this.generateId(),
      type: 'user',
      contentType,
      content,
      timestamp: Date.now()
    };

    this.setData({
      messages: [...messages, newMessage]
    }, () => {
      this.scrollToBottom();
    });
  },

  // 选择图片
  chooseImage() {
    wx.chooseMedia({
      count: 1,
      mediaType: ['image'],
      sourceType: ['album', 'camera'],
      success: (res) => {
        const tempFilePath = res.tempFiles[0].tempFilePath;
        this.uploadImage(tempFilePath);
      },
      fail: (err) => {
        console.error('选择图片失败:', err);
        wx.showToast({
          title: '选择图片失败',
          icon: 'none'
        });
      }
    });
  },

  // 上传图片
  uploadImage(filePath: string) {
    // 先显示本地图片
    this.addUserMessage('image', filePath);

    // 获取全局配置
    const app = getApp<IAppOption>();
    const baseUrl = app.globalData?.baseUrl || 'https://test.kt.colexiu.com';

    // 上传图片到服务器
    wx.uploadFile({
      url: `${baseUrl}/edu-app/ai/chat/upload`,
      filePath: filePath,
      name: 'file',
      header: {
        'Authorization': wx.getStorageSync('token') || ''
      },
      success: (res) => {
        try {
          const data = JSON.parse(res.data);
          if (data.code === 200) {
            // 上传成功，发送图片URL到聊天
            this.sendMessageToServer(data.data.url, 'image');
          } else {
            throw new Error(data.msg || '上传失败');
          }
        } catch (err) {
          console.error('解析上传响应失败:', err);
          this.addReplyMessage('图片上传失败，请重试');
        }
      },
      fail: (err) => {
        console.error('上传图片失败:', err);
        // 模拟成功，直接回复
        setTimeout(() => {
          this.addReplyMessage('我已收到您的图片，请问有什么可以帮助您的吗？');
        }, 1000);
      }
    });
  },

  // 发送消息到服务器
  async sendMessageToServer(content: string, contentType: 'text' | 'image') {
    this.setData({ isLoading: true });

    // 获取用户ID（优先使用openid，其次使用token中的用户ID）
    const userInfo = wx.getStorageSync('userInfo') || {};
    const userId = userInfo.openId || userInfo.userId || wx.getStorageSync('openId');

    // 构建消息内容（图片发送固定提示语）
    const messageContent = contentType === 'image' ? '我发送了一张图片' : content;

    try {
      // 调用客服消息接口
      const {data}: any = await api_cozeAgent({
        message: messageContent,
        userId: userId
      });
      if (data.code === 200 && data.data) {
        // 使用接口返回的回复内容
        const reply =data.data || '您好，我已经收到您的问题。';
        this.addReplyMessage(reply);
      } else {
        // 接口返回错误，使用默认回复
        this.handleDefaultReply(contentType);
      }
    } catch (err) {
      console.error('客服接口调用失败:', err);
      // 接口调用失败，使用默认回复
      this.handleDefaultReply(contentType);
    } finally {
      this.setData({ isLoading: false });
    }
  },

  // 处理默认回复（当接口调用失败时使用）
  handleDefaultReply(contentType: 'text' | 'image') {
    let reply = '';
    if (contentType === 'image') {
      reply = '我已收到您的图片，请问有什么可以帮助您的吗？';
    } else {
      reply = '您好，我已经收到您的问题。我们的客服人员会尽快为您解答。如果您有其他问题，也可以继续提问。';
    }
    this.addReplyMessage(reply);
  },

  // 添加AI回复消息
  addReplyMessage(content: string) {
    const { messages } = this.data;
    const replyMessage: Message = {
      id: this.generateId(),
      type: 'reply',
      contentType: 'text',
      content,
      timestamp: Date.now()
    };

    this.setData({
      messages: [...messages, replyMessage]
    }, () => {
      this.scrollToBottom();
    });
  },

  // 点击常见问题
  onFaqTap(e: WechatMiniprogram.Tap) {
    const index = e.currentTarget.dataset.index;
    const faq = FAQ_LIST[index];

    if (faq) {
      // 添加用户选择的问题
      this.addUserMessage('text', faq.question);

      // 直接回复固定内容
      setTimeout(() => {
        this.addReplyMessage(faq.answer);
      }, 500);
    }
  },

  // 点击图片预览
  onImageTap(e: any) {
    const url = e.currentTarget.dataset.url;
    if (url) {
      wx.previewImage({
        urls: [url],
        current: url
      });
    }
  }
});