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

import Vue from 'vue';
import { defineCustomElements } from 'hxy-stencil-ai-chat/loader';

// 注册 Web Components
defineCustomElements();

// Vue 2 组件
const App = {
  data() {
    return {
      messages: [
        {
          id: '1',
          type: 'text',
          content: '你好！这是 Vue 2 中的 AI 聊天组件！',
          timestamp: Date.now(),
          isUser: false
        },
        {
          id: '2',
          type: 'markdown',
          content: '# Vue 2 支持\n\n- **Options API** 选项式 API\n- *响应式* 数据\n- `组件化` 开发',
          timestamp: Date.now(),
          isUser: false
        },
        {
          id: '3',
          type: 'echarts',
          content: {
            title: { text: 'Vue 2 图表' },
            xAxis: { data: ['Q1', 'Q2', 'Q3', 'Q4'] },
            yAxis: {},
            series: [{ 
              data: [100, 150, 200, 180], 
              type: 'line',
              smooth: true
            }]
          },
          timestamp: Date.now(),
          isUser: false
        }
      ]
    }
  },
  methods: {
    onMessageSend(event) {
      const { content, timestamp } = event.detail;
      const newMessage = {
        id: Date.now().toString(),
        type: 'text',
        content,
        timestamp,
        isUser: true
      };
      this.messages.push(newMessage);
      
      // 模拟 AI 回复
      setTimeout(() => {
        const aiReply = {
          id: (Date.now() + 1).toString(),
          type: 'text',
          content: `Vue 2 收到：${content}`,
          timestamp: Date.now(),
          isUser: false
        };
        this.messages.push(aiReply);
      }, 1000);
    },
    onMessageClick(message) {
      console.log('Message clicked:', message);
    },
    onMessageLongPress(message) {
      console.log('Message long pressed:', message);
    }
  },
  template: `
    <div class="app-container">
      <h1>Vue 2 AI Chat 示例</h1>
      <ai-chat
        :messages="messages"
        :show-input="true"
        input-placeholder="在 Vue 2 中输入消息..."
        :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 2 应用
new Vue({
  render: h => h(App)
}).$mount('#app');
