<!--WebSocket连接测试页面-->
<view class="container">
  <!-- 标题栏 -->
  <view class="header">
    <view class="header-left" bindtap="onBack">
      <text class="back-icon">←</text>
    </view>
    <view class="header-title">WebSocket测试</view>
    <view class="header-right" bindtap="onShowDetails">
      <text class="detail-icon">ⓘ</text>
    </view>
  </view>

  <!-- 连接状态 -->
  <view class="status-section">
    <view class="status-card">
      <view class="status-indicator {{isConnected ? 'connected' : 'disconnected'}}"></view>
      <view class="status-text">{{connectionStatus}}</view>
      <view class="status-info">
        <text class="info-item">Token: {{hasToken ? '✓' : '✗'}}</text>
        <text class="info-item">发送: {{messagesSent}}</text>
        <text class="info-item">接收: {{messagesReceived}}</text>
      </view>
    </view>
  </view>

  <!-- 操作按钮 -->
  <view class="action-section">
    <view class="button-row">
      <button class="action-btn connect-btn" bindtap="onConnect" disabled="{{isConnecting}}">
        {{isConnecting ? '连接中...' : '连接'}}
      </button>
      <button class="action-btn disconnect-btn" bindtap="onDisconnect" disabled="{{!isConnected}}">
        断开
      </button>
    </view>
    
    <view class="button-row">
      <button class="action-btn heartbeat-btn" bindtap="onSendHeartbeat" disabled="{{!isConnected}}">
        发送心跳
      </button>
      <button class="action-btn clear-btn" bindtap="onClearLogs">
        清空日志
      </button>
    </view>
  </view>

  <!-- 消息发送 -->
  <view class="message-section">
    <view class="section-title">发送测试消息</view>
    <view class="input-row">
      <input 
        class="message-input" 
        placeholder="输入测试消息" 
        value="{{testMessage}}"
        bindinput="onInputChange"
      />
      <button class="send-btn" bindtap="onSendMessage" disabled="{{!isConnected}}">
        发送
      </button>
    </view>
    
    <!-- 🔥 添加聊天消息测试按钮 -->
    <view class="button-row" style="margin-top: 10px;">
      <button class="action-btn chat-btn" bindtap="onSendChatMessage" disabled="{{!isConnected}}">
        发送聊天消息
      </button>
    </view>
  </view>

  <!-- 日志区域 -->
  <view class="log-section">
    <view class="section-header">
      <view class="section-title">连接日志</view>
      <text class="copy-btn" bindtap="onCopyLogs">复制</text>
    </view>
    
    <scroll-view class="log-container" scroll-y="true">
      <view class="log-item" wx:for="{{logs}}" wx:key="index">
        {{item}}
      </view>
      <view wx:if="{{logs.length === 0}}" class="empty-logs">
        暂无日志
      </view>
    </scroll-view>
  </view>

  <!-- 统计信息 -->
  <view class="stats-section">
    <view class="section-title">统计信息</view>
    <view class="stats-grid">
      <view class="stat-item">
        <view class="stat-value">{{connectionAttempts}}</view>
        <view class="stat-label">连接尝试</view>
      </view>
      <view class="stat-item">
        <view class="stat-value">{{messagesSent}}</view>
        <view class="stat-label">发送消息</view>
      </view>
      <view class="stat-item">
        <view class="stat-value">{{messagesReceived}}</view>
        <view class="stat-label">接收消息</view>
      </view>
      <view class="stat-item">
        <view class="stat-value">{{lastConnectTime || '-'}}</view>
        <view class="stat-label">最后连接</view>
      </view>
    </view>
  </view>
</view>
