<!--
 * @Author: chris
 * @Date: 2025-01-13 16:31:26
 * @LastEditors: chris
 * @LastEditTime: 2025-10-30 14:40:38
-->
<template>
  <div class="device-info" v-if="device">
    <div class="card-header">
      <div class="header-content">
        <el-icon :size="20" class="icon-folder"><Folder /></el-icon>
        <h3 class="device-name">{{ device.deviceNo }}</h3>
      </div>
      <el-tag :type="device.onlineStatus ? 'success' : 'danger'" size="small" class="status-tag">
        {{ device.onlineStatus ? '在线' : '离线' }}
      </el-tag>
    </div>

    <div class="card-body">
      <div class="info-left">
        <div class="info-item">
          <span class="info-label">设备型号:</span>
          <span class="info-value">{{ device.model }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">设备地址码:</span>
          <span class="info-value">{{ device.deviceAddr }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">设备经纬度:</span>
          <span class="info-value">{{ device.installPointDes }}</span>
        </div>
        <!-- <el-button type="primary" class="detail-button" @click="handleViewDetail(device)">
          查看详情
        </el-button> -->
      </div>
      <div class="info-right">
        <el-image class="device-image" :src="deviceImage" fit="contain" />
      </div>
    </div>
  </div>
  <div v-else class="empty-container">
    <el-empty :image-size="200" />
  </div>
</template>

<script setup>
import { Folder } from '@element-plus/icons-vue';
import { deviceImageDict } from '@/dict/index.js';


const props = defineProps({
  device: {
    type: Object,
    required: true,
    default: () => ({})
  }
});

defineEmits(['viewDetail']);

const deviceImage = computed(() => {

  return import.meta.env.VITE_APP_BASE_API + props.device.imgUrl;

});

const handleViewDetail = (device) => {
  emit('viewDetail', device);
};
</script>

<style lang="scss" scoped>
// 设备信息容器
.device-info {
  @apply h-full transition-all duration-300;
}

// 卡片头部
.card-header {
  @apply pb-2 border-b border-gray-100 flex items-center justify-between;
}

.header-content {
  @apply flex items-center;
}

.icon-folder {
  @apply mr-3 text-orange-500;
}

.device-name {
  @apply font-semibold text-lg text-ellipsis overflow-hidden whitespace-nowrap;
}

.status-tag {
  @apply ml-2;
}

// 卡片主体
.card-body {
  @apply text-sm mt-4 flex;
}

.info-left {
  @apply flex-1;
}

.info-right {
  @apply flex items-center justify-center;

  .device-image { 
    @apply max-w-300px h-400px;

  }
}

// 信息项
.info-item {
  @apply flex items-center mb-2;
}

.info-label {
  @apply w-24 text-gray-500 font-medium;
}

.info-value {
  @apply flex-1 break-all;
}

// 卡片底部
.card-footer {
  @apply pt-3 border-t border-gray-100 mt-4 flex justify-end;
}

.detail-button {
  @apply transition-all duration-300 mt-20px;
}

// 空数据容器
.empty-container {
  @apply flex items-center justify-center h-full;
}
</style>