<script setup>
import { ref, computed, onMounted } from 'vue'
import { useDataStore } from '../stores'

const dataStore = useDataStore()
const loading = ref(false)
const error = ref('')

const devices = computed(() => dataStore.devices)
const onlineCount = computed(() => devices.value.filter(d => d.status === 'online').length)
const offlineCount = computed(() => devices.value.filter(d => d.status === 'offline').length)
const maintenanceCount = computed(() => devices.value.filter(d => d.status === 'maintenance').length)

async function refreshData() {
  loading.value = true
  error.value = ''
  
  try {
    console.log('开始获取设备数据...')
    await dataStore.fetchDevices()
    console.log('设备数据获取完成:', devices.value.length)
  } catch (err) {
    console.error('获取设备数据失败:', err)
    error.value = err.message
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  console.log('SimpleDeviceTest组件挂载')
  refreshData()
})
</script>

<style scoped>
.simple-device-test {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin: 10px;
}

button {
  padding: 8px 16px;
  background: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background: #40a9ff;
}

pre {
  background: #f5f5f5;
  padding: 10px;
  border-radius: 4px;
  overflow-x: auto;
}
</style>