<template>
  <view class="ai-chat-page">
    <!-- 页面头部 -->
    <view class="page-header">
      <view class="header-left">
        <button class="back-btn" @click="goBack">
          <text class="iconfont icon-back"></text>
        </button>
      </view>
      <view class="header-center">
        <text class="header-title">AI智能客服</text>
        <text class="header-subtitle">在线为您服务</text>
      </view>
      <view class="header-right">
        <button class="menu-btn" @click="showMenu">
          <text class="iconfont icon-menu"></text>
        </button>
      </view>
    </view>

    <!-- 聊天内容区域 -->
    <view class="chat-content">
      <!-- AI聊天组件 -->
      <ai-chat-message 
        ref="chat"
        :initial-messages="initialMessages"
        :user-avatar="userAvatar"
        :ai-avatar="aiAvatar"
        @message-sent="onMessageSent"
        @ai-response="onAIResponse"
        @action-click="onActionClick"
        @history-loaded="onHistoryLoaded"
        @file-preview="onFilePreview"
        @audio-play="onAudioPlay"
        @audio-pause="onAudioPause"
        @video-play="onVideoPlay"
        @video-pause="onVideoPause"
        @link-open="onLinkOpen"
        @product-view="onProductView"
        @input-change="onInputChange" />
    </view>
    
    <!-- 底部tabBar占位 -->
    <!-- <view class="page-bottom" :style="{ height: computedTabBarHeight }"></view> -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      initialMessages: [
        {
          id: 1,
          role: 'ai',
          type: 'text',
          content: '您好！我是AI智能客服，很高兴为您服务！\n\n我可以帮您：\n• 解答产品相关问题\n• 处理订单问题\n• 提供技术支持\n• 推荐相关商品\n\n请告诉我您需要什么帮助？',
          timestamp: Date.now() - 60000,
          actions: [
            { type: 'like', count: 0 },
            { type: 'dislike', count: 0 }
          ]
        }
      ],
      userAvatar: '/static/images/user-avatar.png',
      aiAvatar: '/static/images/ai-avatar.png',
      tabBarHeight: '56px'
    }
  },
  
  computed: {
    // 获取底部栏高度
    computedTabBarHeight() {
      return this.tabBarHeight || '56px'
    }
  },

  onLoad() {
    // 页面加载时初始化
    this.initChat()
  },

  methods: {
    // 初始化聊天
    initChat() {
      // 可以在这里加载历史消息
      console.log('AI聊天页面初始化')
    },

    // 返回上一页
    goBack() {
      uni.navigateBack()
    },

    // 显示菜单
    showMenu() {
      uni.showActionSheet({
        itemList: ['清空聊天', '导出记录', '设置', '帮助'],
        success: (res) => {
          switch (res.tapIndex) {
            case 0:
              this.clearChat()
              break
            case 1:
              this.exportChat()
              break
            case 2:
              this.showSettings()
              break
            case 3:
              this.showHelp()
              break
          }
        }
      })
    },

    // 清空聊天
    clearChat() {
      uni.showModal({
        title: '提示',
        content: '确定要清空聊天记录吗？',
        success: (res) => {
          if (res.confirm) {
            this.$refs.chat.clearMessages()
            // 重新添加欢迎消息
            this.$refs.chat.addMessage({
              id: Date.now(),
              role: 'ai',
              type: 'text',
              content: '聊天记录已清空，有什么可以帮助您的吗？',
              timestamp: Date.now()
            })
          }
        }
      })
    },

    // 导出聊天记录
    exportChat() {
      uni.showToast({
        title: '功能开发中',
        icon: 'none'
      })
    },

    // 显示设置
    showSettings() {
      uni.navigateTo({
        url: '/pages/settings/index'
      })
    },

    // 显示帮助
    showHelp() {
      const helpMessage = {
        id: Date.now(),
        role: 'ai',
        type: 'markdown',
        content: `# 使用帮助

## 基本功能
- **发送消息**: 在输入框中输入文字后发送
- **语音输入**: 点击麦克风图标进行语音输入
- **附件发送**: 点击+号可以发送图片、文件、位置

## 消息类型
- **文本消息**: 普通文字对话
- **Markdown**: 支持格式化的文档内容
- **文件**: 支持各种文件格式预览
- **音频**: 支持语音消息播放
- **视频**: 支持视频播放
- **链接**: 支持网页链接跳转
- **商品**: 支持商品卡片展示

## 操作功能
- **点赞/踩**: 对AI回复进行评价
- **复制**: 长按消息可复制内容
- **转发**: 支持消息转发功能`,
        timestamp: Date.now()
      }
      this.$refs.chat.addMessage(helpMessage)
    },

    // 用户发送消息
    onMessageSent(message) {
      console.log('用户发送消息:', message)
      
      // 模拟AI回复
      setTimeout(() => {
        this.generateAIResponse(message)
      }, 1000)
    },

    // AI回复消息
    onAIResponse(message) {
      console.log('AI回复消息:', message)
    },

    // 生成AI回复
    generateAIResponse(userMessage) {
      const responses = [
        '我理解您的需求，让我为您详细解答。',
        '感谢您的提问，这是一个很好的问题。',
        '根据您的问题，我建议您可以考虑以下几个方面：',
        '这个问题很常见，让我为您提供一些解决方案。',
        '我明白您的困惑，让我帮您分析一下。'
      ]
      
      const randomResponse = responses[Math.floor(Math.random() * responses.length)]
      
      const aiMessage = {
        id: Date.now(),
        role: 'ai',
        type: 'text',
        content: `${randomResponse}\n\n您的问题"${userMessage.content}"我已经收到，正在为您处理中...`,
        timestamp: Date.now(),
        actions: [
          { type: 'like', count: 0 },
          { type: 'dislike', count: 0 }
        ]
      }
      
      this.$refs.chat.addMessage(aiMessage)
      this.$emit('ai-response', aiMessage)
    },

    // 操作按钮点击
    onActionClick({ action, message }) {
      console.log('操作点击:', action, message)
      
      switch (action.type) {
        case 'like':
          uni.showToast({
            title: '感谢您的反馈！',
            icon: 'success'
          })
          break
        case 'dislike':
          uni.showToast({
            title: '我们会改进服务',
            icon: 'none'
          })
          break
      }
    },

    // 历史消息加载完成
    onHistoryLoaded(messages) {
      console.log('历史消息加载完成:', messages.length)
    },

    // 文件预览
    onFilePreview(message) {
      console.log('文件预览:', message)
      uni.showToast({
        title: '打开文件: ' + message.fileName,
        icon: 'none'
      })
    },

    // 音频播放
    onAudioPlay(message) {
      console.log('音频播放:', message)
    },

    // 音频暂停
    onAudioPause(message) {
      console.log('音频暂停:', message)
    },

    // 视频播放
    onVideoPlay(message) {
      console.log('视频播放:', message)
    },

    // 视频暂停
    onVideoPause(message) {
      console.log('视频暂停:', message)
    },

    // 链接打开
    onLinkOpen(message) {
      console.log('链接打开:', message)
      uni.showModal({
        title: '打开链接',
        content: `确定要打开链接：${message.url} 吗？`,
        success: (res) => {
          if (res.confirm) {
            // #ifdef H5
            window.open(message.url, '_blank')
            // #endif
            // #ifdef APP-PLUS
            plus.runtime.openURL(message.url)
            // #endif
          }
        }
      })
    },

    // 商品查看
    onProductView(message) {
      console.log('商品查看:', message)
      uni.showToast({
        title: '查看商品: ' + message.title,
        icon: 'none'
      })
    },

    // 输入内容变化
    onInputChange(value) {
      console.log('输入内容:', value)
    }
  }
}
</script>

<style lang="scss">

/* 引入图标字体 */
@import url('/common/css/iconfont.css');

/* 页面样式 */
.ai-chat-page {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;
  overflow: hidden;
}

/* 聊天内容区域 */
.chat-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: calc(100vh - 120rpx); /* 减去头部高度 */
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background-color: white;
  border-bottom: 2rpx solid #eeeeee;
  
  .header-left, .header-right {
    flex: 1;
    
    .back-btn, .menu-btn {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
      background-color: #f8f8f8;
      display: flex;
      align-items: center;
      justify-content: center;
      
      .iconfont {
        font-size: 32rpx;
        color: #666;
      }
    }
  }
  
  .header-center {
    flex: 2;
    text-align: center;
    
    .header-title {
      display: block;
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
    
    .header-subtitle {
      display: block;
      font-size: 24rpx;
      color: #999;
      margin-top: 5rpx;
    }
  }
  
  .header-right {
    text-align: right;
  }
}

/* 底部tabBar占位样式 */
.page-bottom {
  width: 100%;
  background-color: transparent;
}

</style>