<template>
  <view class="demo-container">
    <view class="demo-header">
      <text class="demo-title">AI智能客服组件演示</text>
    </view>
    
    <ai-chat-message 
      ref="chat"
      :initial-messages="demoMessages"
      user-avatar="/static/images/demo-user.png"
      ai-avatar="/static/images/demo-ai.png"
      @message-sent="onMessageSent"
      @ai-response="onAIResponse"
      @action-click="onActionClick"
      @file-preview="onFilePreview"
      @audio-play="onAudioPlay"
      @video-play="onVideoPlay"
      @link-open="onLinkOpen"
      @product-view="onProductView" />
      
    <view class="demo-controls">
      <button class="control-btn" @click="addTextMessage">添加文本消息</button>
      <button class="control-btn" @click="addMarkdownMessage">添加Markdown</button>
      <button class="control-btn" @click="addFileMessage">添加文件</button>
      <button class="control-btn" @click="addAudioMessage">添加音频</button>
      <button class="control-btn" @click="addVideoMessage">添加视频</button>
      <button class="control-btn" @click="addLinkMessage">添加链接</button>
      <button class="control-btn" @click="addProductMessage">添加商品</button>
      <button class="control-btn" @click="clearMessages">清空消息</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      demoMessages: [
        {
          id: 1,
          role: 'ai',
          type: 'text',
          content: '您好！我是AI智能客服演示程序，我可以展示多种消息类型。请点击下方的按钮体验不同功能！',
          timestamp: Date.now() - 300000,
          actions: [
            { id: 1, text: '开始体验', type: 'like' }
          ]
        }
      ]
    }
  },
  
  methods: {
    // 添加文本消息
    addTextMessage() {
      const message = {
        id: Date.now(),
        role: 'ai',
        type: 'text',
        content: '这是一个文本消息示例，支持**粗体**、*斜体*和`代码`格式。也可以包含换行符\n这是第二行内容。',
        timestamp: Date.now(),
        actions: [
          { id: 1, text: '有帮助', type: 'like' },
          { id: 2, text: '没帮助', type: 'dislike' }
        ]
      }
      this.$refs.chat.messages.push(message)
    },
    
    // 添加Markdown消息
    addMarkdownMessage() {
      const message = {
        id: Date.now(),
        role: 'ai',
        type: 'markdown',
        content: `# Markdown文档示例

## 二级标题

这是一个支持**粗体**、*斜体*和\`代码\`的Markdown消息。

### 功能特性
- ✅ 支持标题层级
- ✅ 支持列表展示
- ✅ 支持代码高亮
- ✅ 支持链接跳转

[查看详细文档](https://example.com)\n\n**注意：** 这是一个演示内容，实际使用时可以集成真实的文档系统。`,
        timestamp: Date.now(),
        actions: [
          { id: 1, text: '查看文档', type: 'like' }
        ]
      }
      this.$refs.chat.messages.push(message)
    },
    
    // 添加文件消息
    addFileMessage() {
      const message = {
        id: Date.now(),
        role: 'ai',
        type: 'file',
        fileName: '产品介绍文档.pdf',
        fileSize: 2048000,
        url: 'https://example.com/document.pdf',
        timestamp: Date.now()
      }
      this.$refs.chat.messages.push(message)
    },
    
    // 添加音频消息
    addAudioMessage() {
      const message = {
        id: Date.now(),
        role: 'ai',
        type: 'audio',
        title: '产品功能介绍',
        duration: 89,
        url: 'https://example.com/audio.mp3',
        timestamp: Date.now(),
        playing: false,
        currentTime: 0
      }
      this.$refs.chat.messages.push(message)
    },
    
    // 添加视频消息
    addVideoMessage() {
      const message = {
        id: Date.now(),
        role: 'ai',
        type: 'video',
        title: '产品演示视频',
        duration: 180,
        url: 'https://example.com/video.mp4',
        cover: '/static/images/video-cover.jpg',
        timestamp: Date.now()
      }
      this.$refs.chat.messages.push(message)
    },
    
    // 添加链接消息
    addLinkMessage() {
      const message = {
        id: Date.now(),
        role: 'ai',
        type: 'link',
        title: '帮助中心',
        description: '详细的产品使用说明和常见问题解答',
        url: 'https://example.com/help',
        image: '/static/images/link-thumbnail.jpg',
        timestamp: Date.now()
      }
      this.$refs.chat.messages.push(message)
    },
    
    // 添加商品消息
    addProductMessage() {
      const message = {
        id: Date.now(),
        role: 'ai',
        type: 'product',
        title: '智能手表 X1',
        price: 1299,
        description: '全新一代智能手表，支持心率监测、运动追踪、消息提醒等功能',
        image: '/static/images/product-demo.jpg',
        timestamp: Date.now(),
        actions: [
          { id: 1, text: '立即购买', type: 'like' },
          { id: 2, text: '查看详情', type: 'dislike' }
        ]
      }
      this.$refs.chat.messages.push(message)
    },
    
    // 清空消息
    clearMessages() {
      this.$refs.chat.messages = [
        {
          id: 1,
          role: 'ai',
          type: 'text',
          content: '消息已清空，可以重新开始体验！',
          timestamp: Date.now()
        }
      ]
    },
    
    // 事件处理
    onMessageSent(message) {
      console.log('用户发送消息:', message)
      uni.showToast({
        title: '消息发送成功',
        icon: 'success'
      })
    },
    
    onAIResponse(message) {
      console.log('AI回复消息:', message)
    },
    
    onActionClick({ action, message }) {
      console.log('操作点击:', action, message)
      uni.showToast({
        title: `点击了: ${action.text}`,
        icon: 'none'
      })
    },
    
    onFilePreview(message) {
      console.log('文件预览:', message)
      uni.showToast({
        title: '正在打开文件...',
        icon: 'none'
      })
    },
    
    onAudioPlay(message) {
      console.log('音频播放:', message)
    },
    
    onVideoPlay(message) {
      console.log('视频播放:', message)
    },
    
    onLinkOpen(message) {
      console.log('链接打开:', message)
      uni.showToast({
        title: '正在打开链接...',
        icon: 'none'
      })
    },
    
    onProductView(message) {
      console.log('商品查看:', message)
      uni.showToast({
        title: '正在查看商品...',
        icon: 'none'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.demo-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f5f5;
}

.demo-header {
  background-color: #ff4544;
  color: white;
  padding: 30rpx;
  text-align: center;
  
  .demo-title {
    font-size: 32rpx;
    font-weight: bold;
  }
}

.demo-controls {
  background-color: white;
  padding: 20rpx;
  border-top: 2rpx solid #eeeeee;
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  
  .control-btn {
    flex: 1;
    min-width: 150rpx;
    height: 60rpx;
    background-color: #f8f8f8;
    border-radius: 30rpx;
    font-size: 24rpx;
    color: #333;
    border: none;
    
    &:active {
      background-color: #eeeeee;
    }
  }
}
</style>