<template>
  <view class="device-card" @tap="handleSync">
    <view class="device-icon">{{ icon }}</view>
    <view class="device-info">
      <text class="device-name">{{ deviceName }}</text>
      <text class="device-status" :class="statusClass">{{ statusLabel }}</text>
      <text v-if="lastSyncAt" class="last-sync">最近同步: {{ lastSyncAt }}</text>
    </view>
    <view class="sync-btn">同步</view>
  </view>
</template>

<script setup lang="ts">
import { computed } from 'vue'

const DEVICE_ICONS: Record<string, string> = {
  blood_pressure: '🩺',
  blood_glucose: '💉',
  heart_rate: '❤️',
  blood_oxygen: '🫁',
}

const props = defineProps<{
  deviceName: string
  deviceType: string
  lastSyncAt?: string
  status: 'connected' | 'disconnected' | 'never'
}>()

const icon = computed(() => DEVICE_ICONS[props.deviceType] || '📱')
const statusLabel = computed(() => {
  const map: Record<string, string> = { connected: '已连接', disconnected: '未连接', never: '未配对' }
  return map[props.status] || props.status
})
const statusClass = computed(() => props.status === 'connected' ? 'connected' : 'idle')

function handleSync() {
  uni.navigateTo({ url: '/pages-sub/device-sync/index' })
}
</script>

<style lang="scss" scoped>
.device-card {
  display: flex;
  align-items: center;
  background: $card;
  border-radius: $r;
  padding: 20px 24px;
  box-shadow: $shadow-sm;
}

.device-icon {
  font-size: 40px;
  margin-right: 20px;
}

.device-info {
  flex: 1;
}

.device-name {
  display: block;
  font-size: var(--tk-font-body);
  font-weight: 600;
  color: $tx;
  margin-bottom: 4px;
}

.device-status {
  font-size: var(--tk-font-cap);
  margin-bottom: 2px;

  &.connected { color: $acc; }
  &.idle { color: $tx3; }
}

.last-sync {
  font-size: var(--tk-font-micro);
  color: $tx3;
}

.sync-btn {
  background: $pri;
  color: $white;
  border-radius: $r-pill;
  padding: 8px 24px;
  font-size: var(--tk-font-body-sm);
}
</style>
