// Vue 3 NPM 包使用示例
// 安装: npm install hxy-stencil-ai-chat@1.0.13 vue@3.4.0

import { createApp, ref } from 'vue';
import { defineCustomElements } from 'hxy-stencil-ai-chat/loader';

// 注册 Web Components
defineCustomElements();

// Vue 3 Composition API 组件
const App = {
  setup() {
    const messages = ref([
      {
        id: '1',
        type: 'text',
        content: '你好！这是 Vue 3 中的 AI 聊天组件！',
        timestamp: Date.now(),
        isUser: false
      },
      {
        id: '2',
        type: 'markdown',
        content: '# Vue 3 支持\n\n- **Composition API** 组合式 API\n- *响应式* 数据\n- `Teleport` 传送门',
        timestamp: Date.now(),
        isUser: false
      },
      {
        id: '3',
        type: 'echarts',
        content: {
          title: { text: 'Vue 3 图表' },
          xAxis: { data: ['Jan', 'Feb', 'Mar', 'Apr', 'May'] },
          yAxis: {},
          series: [{ 
            data: [50, 80, 120, 100, 90], 
            type: 'pie',
            radius: '50%'
          }]
        },
        timestamp: Date.now(),
        isUser: false
      }
    ]);

    const onMessageSend = (event) => {
      const { content, timestamp } = event.detail;
      const newMessage = {
        id: Date.now().toString(),
        type: 'text',
        content,
        timestamp,
        isUser: true
      };
      messages.value.push(newMessage);
      
      // 模拟 AI 回复
      setTimeout(() => {
        const aiReply = {
          id: (Date.now() + 1).toString(),
          type: 'text',
          content: `Vue 3 收到：${content}`,
          timestamp: Date.now(),
          isUser: false
        };
        messages.value.push(aiReply);
      }, 1000);
    };

    const onMessageClick = (message) => {
      console.log('Message clicked:', message);
    };

    const onMessageLongPress = (message) => {
      console.log('Message long pressed:', message);
    };

    return {
      messages,
      onMessageSend,
      onMessageClick,
      onMessageLongPress
    };
  },
  template: `
    <div class="app-container">
      <h1>Vue 3 AI Chat 示例</h1>
      <ai-chat
        :messages="messages"
        :show-input="true"
        input-placeholder="在 Vue 3 中输入消息..."
        :multiline-input="true"
        :show-ai-avatar="true"
        :show-user-avatar="true"
        :show-timestamp="true"
        ai-avatar="https://via.placeholder.com/40/4fc08d/ffffff?text=AI"
        user-avatar="https://via.placeholder.com/40/28a745/ffffff?text=U"
        @message-send="onMessageSend"
        @message-click="onMessageClick"
        @message-long-press="onMessageLongPress">
      </ai-chat>
    </div>
  `
};

// 启动 Vue 3 应用
createApp(App).mount('#app');
