# 详细日志调试指南

## 🎯 已添加的调试功能

### 1. 详细日志级别
```javascript
TUICallKitAPI.setLogLevel(1);  // 启用详细日志
```

### 2. 多状态监听
现在会监听以下状态变化：
- 通话状态（CALL_STATUS）
- 是否群组通话（IS_GROUP）
- 通话角色（CALL_ROLE）
- 通话类型（CALL_MEDIA_TYPE）

### 3. 完整状态输出
登录成功后会输出完整的状态信息。

## 📋 测试步骤

### 步骤 1：清除缓存并重启
```
1. 微信开发者工具 → 工具 → 清除缓存 → 全部清除
2. 关闭微信开发者工具
3. 重新打开微信开发者工具
4. 重新编译项目
```

### 步骤 2：小程序端登录
1. 输入患者ID：`2`
2. 点击"登录"
3. 等待登录成功

**预期日志（按顺序）：**
```
=== 页面已挂载 ===
=== 已设置详细日志级别 ===
获取签名成功: { userId: "patient_2", sdkAppId: "1400xxxxxx", ... }
=== 小程序端登录信息 ===
sdkAppId: 1400xxxxxx
userId: patient_2
userSig 长度: xxx
TUICallKit 初始化成功, userId: patient_2
=== TUICallKit 初始化完成，等待来电 ===
=== TUICallKit 组件已挂载 ===
当前通话状态: IDLE
完整状态信息: {
  callStatus: "idle",
  isGroup: false,
  callRole: null,
  callMediaType: null,
  localUserInfo: { userId: "patient_2" }
}
```

### 步骤 3：Web 端发起呼叫
1. Web 端打开患者详情页
2. 点击"视频通话"按钮

**预期日志（小程序端）：**
```
[tuikit engine wasm] [im_event_channel_wasm.cc:71] js notify Native OnJSEvent, [event_id:onNewMessageReceived]

=== 通话状态变化 === waiting (或其他状态)
CallStatus.IDLE: idle
CallStatus.WAITING: waiting
CallStatus.CONNECTED: connected

=== 通话角色 === callee
=== 通话类型 === video
=== 是否群组通话 === false
```

### 步骤 4：观察界面变化
- 界面上的"通话状态"应该从 `IDLE` 变为其他状态
- TUICallKit 组件应该自动显示来电界面

## 🔍 关键日志说明

### 日志 1：onNewMessageReceived
```
[tuikit engine wasm] [im_event_channel_wasm.cc:71] js notify Native OnJSEvent, [event_id:onNewMessageReceived]
```
**含义：** 收到了新消息（来电信号）
**状态：** ✅ 正常

### 日志 2：通话状态变化
```
=== 通话状态变化 === waiting
```
**含义：** 通话状态从 IDLE 变为 WAITING（等待接听）
**状态：** ✅ 正常

### 日志 3：通话角色
```
=== 通话角色 === callee
```
**含义：** 当前角色是被叫方（接听方）
**状态：** ✅ 正常

### 日志 4：通话类型
```
=== 通话类型 === video
```
**含义：** 视频通话
**状态：** ✅ 正常

## ⚠️ 可能的问题

### 问题 1：收到消息但状态不变化

**症状：**
```
[tuikit engine wasm] onNewMessageReceived  ✅
=== 通话状态变化 ===  ❌ 没有这条日志
```

**原因：** 消息处理失败或状态更新失败

**解决：**
1. 查看是否有其他错误日志
2. 检查 userId 格式是否正确
3. 尝试重新登录

### 问题 2：状态变化但界面不显示

**症状：**
```
=== 通话状态变化 === waiting  ✅
界面没有变化  ❌
```

**原因：** TUICallKit 组件显示问题

**解决：**
1. 检查 Wxml 面板中是否有 TUICallKit 组件
2. 检查组件的样式和位置
3. 尝试真机测试

### 问题 3：完全没有日志

**症状：**
```
登录成功后没有任何日志输出
```

**原因：** 代码未正确更新或缓存问题

**解决：**
1. 确认代码已保存
2. 清除缓存
3. 重新编译
4. 重启微信开发者工具

## 📊 日志分析表

| 日志内容 | 状态 | 说明 |
|---------|------|------|
| `=== 页面已挂载 ===` | ✅ | 页面初始化成功 |
| `=== 已设置详细日志级别 ===` | ✅ | 日志级别设置成功 |
| `TUICallKit 初始化成功` | ✅ | SDK 初始化成功 |
| `=== TUICallKit 组件已挂载 ===` | ✅ | 组件挂载成功 |
| `onNewMessageReceived` | ✅ | 收到来电信号 |
| `=== 通话状态变化 ===` | ✅ | 状态正确更新 |
| `=== 通话角色 === callee` | ✅ | 角色识别正确 |
| `=== 通话类型 === video` | ✅ | 类型识别正确 |

## 🎯 成功标准

当你看到以下完整的日志序列时，说明一切正常：

```
1. === 页面已挂载 ===
2. === 已设置详细日志级别 ===
3. 获取签名成功
4. TUICallKit 初始化成功
5. === TUICallKit 组件已挂载 ===
6. 当前通话状态: IDLE

[Web 端发起呼叫后]

7. onNewMessageReceived
8. === 通话状态变化 === waiting
9. === 通话角色 === callee
10. === 通话类型 === video
11. === 是否群组通话 === false
```

如果看到这些日志，但界面仍然没有显示，那就是 TUICallKit 组件的显示问题，需要进一步调试组件样式。

## 🔧 下一步调试

### 如果状态正确变化但界面不显示

1. **检查组件是否存在**
   - 微信开发者工具 → 调试器 → Wxml
   - 查找 `TUICallKit` 组件
   - 查看其样式和位置

2. **检查组件样式**
   ```css
   .call-kit-wrapper {
     position: fixed;
     top: 0;
     left: 0;
     width: 100vw;
     height: 100vh;
     z-index: 9999;
     background-color: rgba(0, 0, 0, 0.8);  /* 添加背景色便于查看 */
   }
   ```

3. **添加可见性测试**
   在 TUICallKit 组件外层添加：
   ```vue
   <view class="call-kit-wrapper" v-if="isLogin">
     <view class="test-marker">TUICallKit 区域</view>
     <TUICallKit></TUICallKit>
   </view>
   
   <style>
   .test-marker {
     position: absolute;
     top: 0;
     left: 0;
     background: red;
     color: white;
     padding: 10px;
     z-index: 10000;
   }
   </style>
   ```

4. **真机测试**
   - 开发者工具可能与真机表现不同
   - 使用真机调试功能
   - 查看真机上的实际效果

## 📞 需要提供的信息

如果问题仍然存在，请提供：

1. **完整的控制台日志**（从登录到收到来电的全部日志）
2. **界面截图**（显示"通话状态"的值）
3. **Wxml 面板截图**（显示 TUICallKit 组件）
4. **是否有其他错误日志**
5. **真机测试结果**（如果可能）

---

**最后更新：** 2024-03-04
**版本：** 1.0