/**
 * 微信小程序 WebSocket 客户端测试代码
 * 用于测试微信小程序环境下与 WebSocket 服务器的连接和通信
 * 
 * 使用方法：
 * 1. 将此代码复制到微信小程序的页面 JavaScript 文件中
 * 2. 在对应的 WXML 文件中添加测试按钮和消息显示区域
 * 3. 在微信开发者工具中运行测试
 */

// WebSocket 连接实例
let ws = null;

// 页面数据
Page({
  data: {
    wsUrl: 'wss://your-domain.com/ws/aikefu', // 替换为你的 WebSocket 服务器地址
    connectionStatus: '未连接',
    messages: [],
    inputMessage: ''
  },

  // 生命周期函数--监听页面加载
  onLoad: function(options) {
    this.connectWebSocket();
  },

  // 生命周期函数--监听页面卸载
  onUnload: function() {
    this.closeWebSocket();
  },

  // 生命周期函数--监听页面隐藏
  onHide: function() {
    this.closeWebSocket();
  },

  // 连接 WebSocket 服务器
  connectWebSocket: function() {
    const that = this;
    const wsUrl = this.data.wsUrl;

    // 创建 WebSocket 连接
    ws = wx.connectSocket({
      url: wsUrl,
      header: {
        'content-type': 'application/json'
      },
      method: 'GET',
      success: function(res) {
        console.log('WebSocket 连接请求发送成功', res);
        that.updateStatus('连接中...');
      },
      fail: function(err) {
        console.error('WebSocket 连接请求发送失败', err);
        that.updateStatus('连接失败');
        that.addMessage('系统', 'WebSocket 连接请求发送失败: ' + JSON.stringify(err), 'error');
      }
    });

    // 监听 WebSocket 连接打开
    ws.onOpen(function(res) {
      console.log('WebSocket 连接已打开', res);
      that.updateStatus('已连接');
      that.addMessage('系统', 'WebSocket 连接已打开', 'system');
    });

    // 监听 WebSocket 接收到服务器的消息
    ws.onMessage(function(res) {
      console.log('收到服务器消息', res.data);
      that.addMessage('服务器', res.data, 'received');
    });

    // 监听 WebSocket 连接关闭
    ws.onClose(function(res) {
      console.log('WebSocket 连接已关闭', res);
      that.updateStatus('已断开');
      that.addMessage('系统', 'WebSocket 连接已关闭', 'system');
    });

    // 监听 WebSocket 错误
    ws.onError(function(res) {
      console.error('WebSocket 连接发生错误', res);
      that.updateStatus('连接错误');
      that.addMessage('系统', 'WebSocket 连接发生错误: ' + JSON.stringify(res), 'error');
    });
  },

  // 关闭 WebSocket 连接
  closeWebSocket: function() {
    if (ws) {
      wx.closeSocket();
      ws = null;
    }
  },

  // 发送 Ping 消息
  sendPing: function() {
    this.sendMessage(JSON.stringify({ action: 'ping' }));
  },

  // 发送测试消息
  sendTestMessage: function() {
    this.sendMessage(JSON.stringify({ 
      message: '你好，这是微信小程序的测试消息！', 
      action: 'test' 
    }));
  },

  // 发送自定义消息
  sendCustomMessage: function() {
    const message = this.data.inputMessage.trim();
    if (!message) {
      wx.showToast({
        title: '请输入消息内容',
        icon: 'none'
      });
      return;
    }

    try {
      // 尝试解析为 JSON，如果不是 JSON 则包装为 JSON
      JSON.parse(message);
      this.sendMessage(message);
    } catch (error) {
      // 不是 JSON，作为普通文本发送
      this.sendMessage(JSON.stringify({ message: message }));
    }

    // 清空输入框
    this.setData({
      inputMessage: ''
    });
  },

  // 发送消息
  sendMessage: function(message) {
    if (!ws) {
      wx.showToast({
        title: 'WebSocket 未连接',
        icon: 'none'
      });
      return;
    }

    // 检查 WebSocket 连接状态
    wx.getSocketTask().then(task => {
      if (task.readyState === 1) { // 连接已打开
        wx.sendSocketMessage({
          data: message,
          success: () => {
            this.addMessage('我', message, 'sent');
          },
          fail: (err) => {
            console.error('发送消息失败', err);
            this.addMessage('系统', '发送消息失败: ' + JSON.stringify(err), 'error');
          }
        });
      } else {
        wx.showToast({
          title: 'WebSocket 连接未打开',
          icon: 'none'
        });
        this.updateStatus('连接已断开');
      }
    }).catch(err => {
      console.error('获取 SocketTask 失败', err);
      this.updateStatus('连接已断开');
    });
  },

  // 更新输入框内容
  onInputMessage: function(e) {
    this.setData({
      inputMessage: e.detail.value
    });
  },

  // 更新连接状态
  updateStatus: function(status) {
    this.setData({
      connectionStatus: status
    });
  },

  // 添加消息到消息列表
  addMessage: function(sender, content, type) {
    const messages = this.data.messages;
    const now = new Date();
    const time = now.toLocaleTimeString();

    // 尝试美化 JSON 格式
    let formattedContent = content;
    try {
      const parsed = JSON.parse(content);
      formattedContent = JSON.stringify(parsed, null, 2);
    } catch (error) {
      // 不是 JSON，保持原样
    }

    messages.push({
      id: Date.now(),
      sender: sender,
      content: formattedContent,
      type: type,
      time: time
    });

    this.setData({
      messages: messages
    });

    // 滚动到最新消息
    this.scrollToBottom();
  },

  // 滚动到消息底部
  scrollToBottom: function() {
    wx.createSelectorQuery().select('#message-list').boundingClientRect(function(rect) {
      if (rect) {
        wx.pageScrollTo({
          scrollTop: rect.height,
          duration: 300
        });
      }
    }).exec();
  },

  // 重连 WebSocket
  reconnectWebSocket: function() {
    this.closeWebSocket();
    setTimeout(() => {
      this.connectWebSocket();
    }, 1000);
  }
});

// 对应的 WXML 文件示例
/*
<view class="container">
  <view class="header">
    <text class="title">WebSocket 测试</text>
    <text class="status {{connectionStatus === '已连接' ? 'connected' : connectionStatus === '连接中...' ? 'connecting' : 'disconnected'}}">
      {{connectionStatus}}
    </text>
  </view>

  <view class="settings">
    <input class="url-input" placeholder="请输入 WebSocket 服务器地址" value="{{wsUrl}}" bindinput="onInputUrl" />
    <button class="btn" bindtap="connectWebSocket" type="primary" size="mini">连接</button>
    <button class="btn" bindtap="closeWebSocket" type="default" size="mini">断开</button>
    <button class="btn" bindtap="reconnectWebSocket" type="warn" size="mini">重连</button>
  </view>

  <view class="message-area">
    <scroll-view id="message-list" scroll-y="true" class="message-list">
      <block wx:for="{{messages}}" wx:key="id">
        <view class="message-item {{item.type}}">
          <view class="message-header">
            <text class="sender">{{item.sender}}</text>
            <text class="time">{{item.time}}</text>
          </view>
          <view class="message-content">{{item.content}}</view>
        </view>
      </block>
    </scroll-view>
  </view>

  <view class="input-area">
    <textarea class="message-input" placeholder="请输入消息..." value="{{inputMessage}}" bindinput="onInputMessage" />
    <view class="btn-group">
      <button class="btn" bindtap="sendPing" type="default" size="mini">发送 Ping</button>
      <button class="btn" bindtap="sendTestMessage" type="default" size="mini">测试消息</button>
      <button class="btn" bindtap="sendCustomMessage" type="primary" size="mini">发送</button>
    </view>
  </view>
</view>
*/

// 对应的 WXSS 样式文件示例
/*
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 20rpx;
  background-color: #f5f5f5;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
}

.status {
  padding: 8rpx 16rpx;
  border-radius: 8rpx;
  font-size: 24rpx;
  font-weight: bold;
}

.status.connected {
  background-color: #d4edda;
  color: #155724;
}

.status.connecting {
  background-color: #fff3cd;
  color: #856404;
}

.status.disconnected {
  background-color: #f8d7da;
  color: #721c24;
}

.settings {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  padding: 20rpx;
  background-color: white;
  border-radius: 10rpx;
}

.url-input {
  flex: 1;
  height: 80rpx;
  padding: 20rpx;
  margin-right: 20rpx;
  border: 1px solid #ddd;
  border-radius: 10rpx;
  font-size: 28rpx;
}

.btn {
  margin-right: 10rpx;
}

.message-area {
  flex: 1;
  margin-bottom: 20rpx;
  background-color: white;
  border-radius: 10rpx;
  overflow: hidden;
}

.message-list {
  height: 100%;
  padding: 20rpx;
}

.message-item {
  margin-bottom: 20rpx;
  padding: 15rpx;
  border-radius: 10rpx;
  max-width: 80%;
}

.message-item.sent {
  align-self: flex-end;
  margin-left: auto;
  background-color: #d4edda;
  border-right: 4rpx solid #28a745;
}

.message-item.received {
  align-self: flex-start;
  background-color: #e9ecef;
  border-left: 4rpx solid #007bff;
}

.message-item.system {
  align-self: center;
  background-color: #fff3cd;
  border-left: 4rpx solid #856404;
  max-width: 90%;
}

.message-item.error {
  align-self: center;
  background-color: #f8d7da;
  border-left: 4rpx solid #dc3545;
  max-width: 90%;
}

.message-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10rpx;
  font-size: 24rpx;
  color: #666;
}

.message-content {
  font-size: 28rpx;
  line-height: 1.5;
  word-break: break-all;
}

.input-area {
  background-color: white;
  padding: 20rpx;
  border-radius: 10rpx;
}

.message-input {
  width: 100%;
  height: 120rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
  border: 1px solid #ddd;
  border-radius: 10rpx;
  font-size: 28rpx;
  background-color: #f9f9f9;
}

.btn-group {
  display: flex;
  justify-content: flex-end;
}
*/