<!--
 * @Author: chris
 * @Date: 2025-02-06 16:43:54
 * @LastEditors: chris
 * @LastEditTime: 2025-12-03 09:06:25
--> 
<template>
  <div class="device-list-container">
    <div class="device-list">
      <div
        v-for="device in props.list"
        :key="device.deviceAddr"
        @click="handleDeviceClick(device)"
      >
        <div class="device-item" :class="{ 'device-item-selected': selectedDevice === device.deviceAddr }">
          <Icon :icon="getDeviceIcon(device.type)" class="device-icon mr-5px" />
          <div class="device-details">
            <div class="device-name font-medium">{{ device.deviceNo }}</div>
            <div class="device-model">{{ device.model }}</div>
            <el-tag :type="device.onlineStatus ? 'success' : 'danger'" size="small">
              {{ device.onlineStatus ? '在线' : '离线' }}
            </el-tag>
          </div>
        </div>
      </div>
    </div>
    <div v-if="props.list.length === 0" class="empty-state text-center py-10">
      <Icon icon="carbon:error" class="text-gray-300 text-4xl mb-2" />
      <p class="text-gray-400">暂无设备数据</p>
    </div>
  </div>
</template>

<script setup name="DeviceFlatList">
import { ref, defineEmits } from 'vue'
import { Icon } from '@iconify/vue'
// import { deviceData } from '@/views/indexComponents/testData'

// 设备类型图标映射
const deviceIconDict = {
  1: 'carbon:pest',        // 病虫害监测器carbon:radar-weather', // 气象站
  2: 'carbon:soil-moisture', // 土壤监测器
  3: 'carbon:radar-weather', // 气象站'
}

const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
})

const emit = defineEmits(['change'])
const selectedDevice = ref('')

// 获取设备图标
function getDeviceIcon(deviceType) {
  return deviceIconDict[deviceType] || deviceIconDict.default
}

// 处理设备点击事件
function handleDeviceClick(device) {
  emit('change', device)
  selectedDevice.value = device.deviceAddr
  // 可以在这里添加更多的处理逻辑，比如导航到设备详情页
}
</script>

<style lang="scss" scoped>
.device-list {
  @apply max-h-[100%] overflow-y-auto;
}

.device-item {
  @apply flex items-center cursor-pointer transition-all duration-200 hover:bg-blue-50 my-4px py-10px px-6px border-rounded-6px;

  &-selected {
    @apply bg-blue-100;
  }
}

.device-icon {
  @apply text-blue-500 w-26px h-26px;
}

.device-details {
  @apply ml-3;
}

.device-name {
  @apply text-gray-800;
}


.device-model {
  @apply text-xs color-#9ca3af;
}

.device-id {
  @apply text-xs;
}

.device-status {
  @apply flex items-center;
}

.empty-state {
  @apply text-center py-10;
}
</style>