baoshi-swms-app-web/src/views/outbound/check/components/BluetoothScan.vue

<template>
  <van-popup
    :show="show"
    position="bottom"
    :style="{ height: '70%' }"
    round
    closeable
    close-icon-position="top-right"
    @update:show="show = $event"
    @close="handleClose"
  >
    <div class="bluetooth-scan">
      <div class="scan-header">
        <h3>蓝牙设备扫描</h3>
        <div class="scan-status">
          <van-loading v-if="isScanning" type="spinner" size="16px" />
          <span v-if="isScanning" class="scan-text">正在扫描FAYA设备... (已发现 {{ devices.length }} 个)</span>
          <span v-else-if="connectedDevice" class="scan-text">已连接设备: {{ connectedDevice.name }}</span>
          <span v-else-if="devices.length > 0" class="scan-text">已发现 {{ devices.length }} 个FAYA设备，点击设备连接</span>
          <span v-else class="scan-text">点击重新扫描开始搜索FAYA设备</span>
        </div>
      </div>

      <div class="scan-actions">
        <van-button
          v-if="isScanning"
          type="warning"
          block
          @click="handleStopScan"
        >
          停止扫描
        </van-button>
        <van-button
          v-else-if="!connectedDevice"
          type="primary"
          block
          @click="handleStartScan"
        >
          重新扫描
        </van-button>
      </div>

      <div class="devices-list">
        <div v-if="devices.length === 0 && !isScanning" class="empty-state">
          <van-empty description="暂无设备，点击重新扫描" />
        </div>
        <div v-else class="device-items">
          <div
            v-for="device in devices"
            :key="device.address"
            class="device-item"
            :class="{ 'device-connected': connectedDevice?.address === device.address }"
            @click="handleConnect(device)"
          >
            <div class="device-info">
              <div class="device-name">{{ device.name || '未知设备' }}</div>
              <div class="device-address">{{ device.address }}</div>
            </div>
            <div class="device-action">
              <van-tag v-if="connectedDevice?.address === device.address" type="success">
                已连接
              </van-tag>
              <van-icon v-else name="arrow" />
            </div>
          </div>
        </div>
      </div>
    </div>
  </van-popup>
</template>

<script setup>
import { ref, watch } from 'vue'
import { showToast, showNotify, closeToast } from 'vant'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue', 'connected', 'disconnected'])

const show = ref(false)
const isScanning = ref(false)
const devices = ref([])
const connectedDevice = ref(null)

watch(() => props.modelValue, (val) => {
  show.value = val
})

watch(show, (val) => {
  emit('update:modelValue', val)
  // 弹窗打开时，如果未连接设备，自动开始扫描
  if (val && !connectedDevice.value && !isScanning.value) {
    // 延迟一下确保弹窗已完全打开
    setTimeout(() => {
      handleStartScan()
    }, 100)
  } else if (!val) {
    // 弹窗关闭时
    closeToast() // 清除所有 toast
    // 如果正在扫描，停止扫描
    if (isScanning.value) {
      handleStopScan()
    }
    // 如果正在连接，清除连接状态
    if (connectingDevice.value) {
      connectingDevice.value = null
    }
  }
})

// 开始扫描
const handleStartScan = () => {
  if (!window.AndroidScale) {
    showNotify({ type: 'danger', message: '未找到 AndroidScale 接口' })
    return
  }
  
  // 检查缓存和设备状态，如果缓存中没有但组件状态有，清除组件状态
  const saved = localStorage.getItem('bluetooth-device')
  if (!saved && connectedDevice.value) {
    console.log('检测到状态不一致，清除连接状态')
    connectedDevice.value = null
    connectingDevice.value = null
  }
  
  // 如果组件状态显示已连接设备，不允许扫描
  if (connectedDevice.value) {
    showNotify({ type: 'warning', message: '请先断开当前连接' })
    return
  }
  
  isScanning.value = true
  devices.value = []
  
  try {
    window.AndroidScale.startScan()
  } catch (error) {
    console.error('开始扫描失败:', error)
    showNotify({ type: 'danger', message: '扫描失败，请重试' })
    isScanning.value = false
  }
}

// 停止扫描
const handleStopScan = () => {
  if (!window.AndroidScale) {
    showNotify({ type: 'danger', message: '未找到 AndroidScale 接口' })
    return
  }
  
  try {
    // 如果支持停止扫描方法，调用它
    if (window.AndroidScale.stopScan) {
      window.AndroidScale.stopScan()
    }
    isScanning.value = false
    closeToast() // 关闭扫描提示
  } catch (error) {
    console.error('停止扫描失败:', error)
    isScanning.value = false
    closeToast()
    showNotify({ type: 'danger', message: '停止扫描失败' })
  }
}

// 处理扫描结果回调
const handleScanResult = (deviceStr) => {
  try {
    let deviceData
    if (typeof deviceStr === 'string') {
      deviceData = JSON.parse(deviceStr)
    } else {
      deviceData = deviceStr
    }
    
    // 只处理名称为"FAYA"的设备
    const deviceName = deviceData.name || ''
    if (deviceName !== 'FAYA') {
      return // 忽略非FAYA设备
    }
    
    // 检查设备是否已存在
    const exists = devices.value.some(d => d.address === deviceData.address)
    if (!exists && deviceData.address) {
      devices.value.push({
        name: deviceData.name || '未知设备',
        address: deviceData.address
      })
      
      // 扫描到FAYA设备后自动停止扫描
      if (isScanning.value) {
        handleStopScan()
      }
    }
  } catch (error) {
    console.error('解析扫描结果失败:', error)
  }
}
// 当前正在连接的设备
const connectingDevice = ref(null)

// 连接设备
const handleConnect = async (device) => {
  // 如果设备已连接，提示已连接
  if (connectedDevice.value?.address === device.address) {
    showToast({ type: 'success', message: '设备已连接' })
    return
  }
  
  if (!window.AndroidScale) {
    showNotify({ type: 'danger', message: '未找到 AndroidScale 接口' })
    return
  }
  
  // 如果正在扫描，先停止扫描
  if (isScanning.value) {
    handleStopScan()
  }
  
  try {
    connectingDevice.value = device
    window.AndroidScale.connect(device.address)
  } catch (error) {
    closeToast()
    connectingDevice.value = null
    console.error('连接失败:', error)
    showNotify({ type: 'danger', message: '连接失败，请重试' })
  }
}

// 处理连接状态变化
const handleConnectionState = (isConnected) => {
  closeToast()
  console.log(isConnected,'isConnected')
  
  if (isConnected) {
    // 连接成功
    if (connectingDevice.value) {
      connectedDevice.value = connectingDevice.value
      // 保存到缓存
      localStorage.setItem('bluetooth-device', JSON.stringify(connectedDevice.value))
      emit('connected', connectedDevice.value)
      connectingDevice.value = null
      // 连接成功后自动关闭弹窗（不显示额外 toast）
      setTimeout(() => {
        closeToast() // 确保关闭所有 toast
        show.value = false
      }, 300)
    }
  } else {
    // 断开连接
    // 清除缓存
    localStorage.removeItem('bluetooth-device')
    connectedDevice.value = null
    connectingDevice.value = null
    emit('disconnected')
    // 断开连接时也确保关闭 toast
    closeToast()
  }
}

// 关闭弹窗
const handleClose = () => {
  // 清除所有 toast
  closeToast()
  // 如果正在扫描，先停止扫描
  if (isScanning.value) {
    handleStopScan()
  }
  // 如果正在连接，清除连接状态
  if (connectingDevice.value) {
    connectingDevice.value = null
  }
  show.value = false
}

// 初始化回调
const initCallbacks = () => {
  // 扫描结果回调
  window.onScaleScanResult = handleScanResult
  
  // 连接状态回调
  window.onScaleConnectionState = handleConnectionState
}

// 加载已保存的设备
const loadSavedDevice = () => {
  try {
    const saved = localStorage.getItem('bluetooth-device')
    if (saved) {
      const device = JSON.parse(saved)
      connectedDevice.value = device
      // 检查设备是否在列表中，如果不在则添加到列表
      const exists = devices.value.some(d => d.address === device.address)
      if (!exists) {
        devices.value.push(device)
      }
      emit('connected', device)
    }
  } catch (error) {
    console.error('加载保存的设备失败:', error)
  }
}

// 断开连接
const disconnect = () => {
  // 立即清除连接状态（不等待回调）
  const wasConnected = !!connectedDevice.value
  connectedDevice.value = null
  connectingDevice.value = null
  localStorage.removeItem('bluetooth-device')
  
  if (wasConnected) {
    emit('disconnected')
  }
  
  if (window.AndroidScale) {
    try {
      window.AndroidScale.disconnect()
      console.log('已调用 AndroidScale.disconnect()')
    } catch (error) {
      console.error('断开连接失败:', error)
      showNotify({ type: 'danger', message: '断开连接失败' })
    }
  }
}


// 清除已连接设备状态（供外部调用）
const clearConnectedDevice = () => {
  connectedDevice.value = null
  connectingDevice.value = null
  // 同时清除缓存
  localStorage.removeItem('bluetooth-device')
  console.log('已清除连接设备状态')
}

// 暴露方法
defineExpose({
  handleConnectionState,
  loadSavedDevice,
  disconnect,
  startScan: handleStartScan,
  stopScan: handleStopScan,
  clearConnectedDevice
})

// 初始化
initCallbacks()
loadSavedDevice()
</script>

<style scoped lang="sass">
.bluetooth-scan
  padding: 20px
  height: 100%
  display: flex
  flex-direction: column
  background: #fff

  .scan-header
    margin-bottom: 20px
    text-align: center

    h3
      margin: 0 0 10px 0
      font-size: 18px
      font-weight: 600
      color: #333

    .scan-status
      display: flex
      align-items: center
      justify-content: center
      gap: 8px
      font-size: 14px
      color: #666

      .scan-text
        color: #999

  .scan-actions
    margin-bottom: 20px

  .devices-list
    flex: 1
    overflow-y: auto

    .empty-state
      display: flex
      align-items: center
      justify-content: center
      height: 100%
      min-height: 200px

    .device-items
      display: flex
      flex-direction: column
      gap: 12px

      .device-item
        display: flex
        align-items: center
        justify-content: space-between
        padding: 16px
        background: #f7f8fa
        border-radius: 8px
        cursor: pointer
        transition: all 0.3s ease

        &:active
          background: #ebedf0
          transform: scale(0.98)

        &.device-connected
          background: #e8f5e9
          border: 1px solid #4caf50

        .device-info
          flex: 1

          .device-name
            font-size: 16px
            font-weight: 500
            color: #333
            margin-bottom: 4px

          .device-address
            font-size: 12px
            color: #999
            font-family: monospace

        .device-action
          display: flex
          align-items: center
</style>