<template>
  <view class="sos-wrapper-demo">
    <view class="demo-header">
      <text class="demo-title">SOS SDK 包装器测试</text>
    </view>
    
    <view class="demo-content">
      <!-- 状态显示 -->
      <view class="status-section">
        <text class="status-title">SDK状态</text>
        <text class="status-value" :class="sdkStatus.class">
          {{ sdkStatus.text }}
        </text>
      </view>
      
      <!-- 控制按钮 -->
      <view class="control-section">
        <button 
          class="control-btn" 
          @click="initSDK"
          :disabled="isInitialized"
        >
          {{ isInitialized ? '已初始化' : '初始化SDK' }}
        </button>
        
        <button 
          class="control-btn" 
          @click="getDeviceList"
          :disabled="!isInitialized"
        >
          获取设备列表
        </button>
        
        <button 
          class="control-btn" 
          @click="startAudioSpeak"
          :disabled="!isInitialized || isSpeaking"
        >
          {{ isSpeaking ? '对讲中...' : '开始对讲' }}
        </button>
        
        <button 
          class="control-btn" 
          @click="stopAudioSpeak"
          :disabled="!isSpeaking"
        >
          停止对讲
        </button>
        
        <button 
          class="control-btn" 
          @click="destroySDK"
          :disabled="!isInitialized"
        >
          销毁SDK
        </button>
      </view>
      
      <!-- 设备列表 -->
      <view class="device-section" v-if="deviceList.length > 0">
        <text class="section-title">设备列表</text>
        <view 
          class="device-item" 
          v-for="(device, index) in deviceList" 
          :key="index"
        >
          <text class="device-name">{{ device.name || '未知设备' }}</text>
          <text class="device-id">ID: {{ device.id }}</text>
        </view>
      </view>
      
      <!-- 日志显示 -->
      <view class="log-section">
        <text class="log-title">操作日志</text>
        <scroll-view class="log-content" scroll-y>
          <view 
            class="log-item" 
            v-for="(log, index) in logs" 
            :key="index"
          >
            <text class="log-time">{{ log.time }}</text>
            <text class="log-message">{{ log.message }}</text>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'SOSWrapperExample',
  data() {
    return {
      sosWrapper: null,
      isInitialized: false,
      isSpeaking: false,
      sdkStatus: {
        text: '未初始化',
        class: 'disconnected'
      },
      deviceList: [],
      logs: []
    }
  },
  
  onLoad() {
    this.initSOSWrapper()
  },
  
  onUnload() {
    this.cleanup()
  },
  
  methods: {
    /**
     * 初始化SOS包装器
     */
    initSOSWrapper() {
      try {
        // 加载SOS包装器
        const sosModule = require('@/utils/sos-wrapper.js')
        
        this.addLog('SOS包装器加载成功')
        
        // 检查SDK是否可用
        if (sosModule.SDK) {
          this.addLog('SOS.SDK构造函数可用')
        } else {
          this.addLog('SOS.SDK构造函数不可用')
        }
        
      } catch (error) {
        this.addLog(`SOS包装器加载失败: ${error.message}`)
        console.error('SOS包装器加载失败:', error)
      }
    },
    
    /**
     * 初始化SDK
     */
    async initSDK() {
      try {
        const sosModule = require('@/utils/sos-wrapper.js')
        
        if (!sosModule.SDK) {
          throw new Error('SOS.SDK构造函数不可用')
        }
        
        // 创建SDK实例
        this.sosWrapper = new sosModule.SDK({
          // 这里可以添加配置参数
          // 根据实际需求配置
        })
        
        // 初始化SDK
        await this.sosWrapper.init()
        
        this.isInitialized = true
        this.sdkStatus = {
          text: '已初始化',
          class: 'initialized'
        }
        
        this.addLog('SDK初始化成功')
        
        // 添加事件监听器
        this.setupEventListeners()
        
        uni.showToast({
          title: 'SDK初始化成功',
          icon: 'success'
        })
        
      } catch (error) {
        this.addLog(`SDK初始化失败: ${error.message}`)
        uni.showToast({
          title: 'SDK初始化失败',
          icon: 'none'
        })
        console.error('SDK初始化失败:', error)
      }
    },
    
    /**
     * 设置事件监听器
     */
    setupEventListeners() {
      if (!this.sosWrapper) return
      
      // 添加各种事件监听器
      this.sosWrapper.addEventListener('sdk::event::state', (event) => {
        this.addLog(`SDK状态事件: ${JSON.stringify(event)}`)
      })
      
      this.sosWrapper.addEventListener('sdk::event::error', (event) => {
        this.addLog(`SDK错误事件: ${JSON.stringify(event)}`)
      })
      
      this.sosWrapper.addEventListener('sdk::event::success', (event) => {
        this.addLog(`SDK成功事件: ${JSON.stringify(event)}`)
      })
    },
    
    /**
     * 获取设备列表
     */
    getDeviceList() {
      try {
        if (!this.sosWrapper) {
          throw new Error('SDK未初始化')
        }
        
        this.sosWrapper.deviceList((result) => {
          if (result && result.data) {
            this.deviceList = result.data
            this.addLog(`获取到 ${result.data.length} 个设备`)
          } else {
            this.addLog('获取设备列表失败')
          }
        })
        
      } catch (error) {
        this.addLog(`获取设备列表失败: ${error.message}`)
        console.error('获取设备列表失败:', error)
      }
    },
    
    /**
     * 开始音频对讲
     */
    startAudioSpeak() {
      try {
        if (!this.sosWrapper) {
          throw new Error('SDK未初始化')
        }
        
        if (this.deviceList.length === 0) {
          throw new Error('没有可用设备')
        }
        
        // 使用第一个设备进行对讲
        const deviceId = this.deviceList[0].id
        
        this.sosWrapper.audioSpeakStart(deviceId, (result) => {
          if (result && result.success) {
            this.isSpeaking = true
            this.sdkStatus = {
              text: '对讲中',
              class: 'speaking'
            }
            this.addLog(`开始对讲设备: ${deviceId}`)
          } else {
            this.addLog(`开始对讲失败: ${result.message || '未知错误'}`)
          }
        })
        
      } catch (error) {
        this.addLog(`开始对讲失败: ${error.message}`)
        console.error('开始对讲失败:', error)
      }
    },
    
    /**
     * 停止音频对讲
     */
    stopAudioSpeak() {
      try {
        if (!this.sosWrapper || !this.isSpeaking) {
          throw new Error('当前没有对讲')
        }
        
        if (this.deviceList.length === 0) {
          throw new Error('没有可用设备')
        }
        
        const deviceId = this.deviceList[0].id
        
        this.sosWrapper.audioSpeakStop(deviceId, (result) => {
          if (result && result.success) {
            this.isSpeaking = false
            this.sdkStatus = {
              text: '已初始化',
              class: 'initialized'
            }
            this.addLog(`停止对讲设备: ${deviceId}`)
          } else {
            this.addLog(`停止对讲失败: ${result.message || '未知错误'}`)
          }
        })
        
      } catch (error) {
        this.addLog(`停止对讲失败: ${error.message}`)
        console.error('停止对讲失败:', error)
      }
    },
    
    /**
     * 销毁SDK
     */
    destroySDK() {
      try {
        if (this.sosWrapper) {
          this.sosWrapper.destroy()
          this.sosWrapper = null
        }
        
        this.isInitialized = false
        this.isSpeaking = false
        this.sdkStatus = {
          text: '已销毁',
          class: 'disconnected'
        }
        this.deviceList = []
        
        this.addLog('SDK已销毁')
        
        uni.showToast({
          title: 'SDK已销毁',
          icon: 'success'
        })
        
      } catch (error) {
        this.addLog(`销毁SDK失败: ${error.message}`)
        console.error('销毁SDK失败:', error)
      }
    },
    
    /**
     * 清理资源
     */
    cleanup() {
      this.destroySDK()
      this.addLog('页面卸载，资源已清理')
    },
    
    /**
     * 添加日志
     */
    addLog(message) {
      const now = new Date()
      const time = `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}:${now.getSeconds().toString().padStart(2, '0')}`
      
      this.logs.unshift({
        time,
        message
      })
      
      // 限制日志数量
      if (this.logs.length > 50) {
        this.logs = this.logs.slice(0, 50)
      }
    }
  }
}
</script>

<style scoped>
.sos-wrapper-demo {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.demo-header {
  text-align: center;
  margin-bottom: 40rpx;
}

.demo-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.demo-content {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.status-section {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.status-title {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 15rpx;
  display: block;
}

.status-value {
  font-size: 32rpx;
  font-weight: bold;
  padding: 15rpx 25rpx;
  border-radius: 25rpx;
  display: inline-block;
}

.status-value.disconnected {
  background: #ffebee;
  color: #f44336;
}

.status-value.initialized {
  background: #e3f2fd;
  color: #2196f3;
}

.status-value.speaking {
  background: #e8f5e8;
  color: #4caf50;
}

.control-section {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.control-btn {
  background: #2196f3;
  color: white;
  border: none;
  border-radius: 25rpx;
  padding: 25rpx;
  font-size: 28rpx;
  font-weight: bold;
}

.control-btn:disabled {
  background: #ccc;
  color: #999;
}

.device-section {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.device-item {
  padding: 20rpx;
  border: 1rpx solid #eee;
  border-radius: 10rpx;
  margin-bottom: 15rpx;
}

.device-name {
  font-size: 28rpx;
  color: #333;
  font-weight: bold;
  display: block;
  margin-bottom: 10rpx;
}

.device-id {
  font-size: 24rpx;
  color: #666;
  display: block;
}

.log-section {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.log-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  display: block;
}

.log-content {
  height: 400rpx;
  border: 1rpx solid #eee;
  border-radius: 10rpx;
  padding: 20rpx;
}

.log-item {
  display: flex;
  margin-bottom: 10rpx;
  padding: 10rpx;
  background: #f9f9f9;
  border-radius: 8rpx;
}

.log-time {
  font-size: 24rpx;
  color: #999;
  margin-right: 20rpx;
  min-width: 120rpx;
}

.log-message {
  font-size: 24rpx;
  color: #333;
  flex: 1;
}
</style>