<template>
  <div class="device-status-panel">
    <div class="panel-header">
      <h3>设备状态监控</h3>
      <div class="status-summary">
        <span class="status-tag running">运行中: {{ runningCount }}</span>
        <span class="status-tag warning">警告: {{ warningCount }}</span>
        <span class="status-tag stopped">停止: {{ stoppedCount }}</span>
      </div>
    </div>

    <a-list :data-source="devices" size="small" class="device-list">
      <template #renderItem="{ item }">
        <a-list-item class="device-item" @click="selectDevice(item)">
          <template #actions>
            <a-button type="link" size="small">详情</a-button>
          </template>

          <a-list-item-meta>
            <template #title>
              <div class="device-title">
                <span class="device-name">{{ item.name }}</span>
                <a-tag :color="getStatusColor(item.status)" class="status-badge">
                  {{ getStatusText(item.status) }}
                </a-tag>
              </div>
            </template>
            <template #description>
              <div class="device-info">
                <div class="info-row">
                  <span class="label">类型:</span>
                  <span>{{ item.type }}</span>
                </div>
                <div class="info-row">
                  <span class="label">温度:</span>
                  <span :class="{ 'temp-warning': item.temperature > 70, 'temp-normal': item.temperature <= 70 }">
                    {{ item.temperature }}°C
                  </span>
                </div>
                <div class="info-row">
                  <span class="label">效率:</span>
                  <a-progress
                    :percent="item.efficiency"
                    :stroke-color="getEfficiencyColor(item.efficiency)"
                    size="small"
                    style="width: 80px"
                  />
                </div>
                <div class="info-row">
                  <span class="label">产量:</span>
                  <span>{{ item.production }}</span>
                </div>
                <div class="info-row">
                  <span class="label">操作员:</span>
                  <span>{{ item.operator }}</span>
                </div>
              </div>
            </template>
          </a-list-item-meta>
        </a-list-item>
      </template>
    </a-list>

    <div class="panel-footer">
      <a-statistic-group direction="row">
        <a-statistic title="总设备" :value="devices.length" />
        <a-statistic title="平均效率" :value="averageEfficiency" suffix="%" :precision="1" />
      </a-statistic-group>
    </div>
  </div>
</template>

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

  interface Device {
    id: string;
    name: string;
    type: string;
    status: string;
    temperature: number;
    efficiency: number;
    location: any;
    production: number;
    maintenance: string;
    operator: string;
  }

  const props = defineProps({
    devices: {
      type: Array as PropType<Device[]>,
      required: true,
    },
  });

  const emit = defineEmits(['select-device']);

  const runningCount = computed(() => props.devices.filter((d) => d.status === 'running').length);
  const warningCount = computed(() => props.devices.filter((d) => d.status === 'warning').length);
  const stoppedCount = computed(() => props.devices.filter((d) => d.status === 'stopped').length);

  const averageEfficiency = computed(() => {
    const total = props.devices.reduce((sum, d) => sum + d.efficiency, 0);
    return (total / props.devices.length).toFixed(1);
  });

  const getStatusColor = (status: string) => {
    const colors: Record<string, string> = {
      running: 'success',
      idle: 'warning',
      warning: 'orange',
      stopped: 'error',
    };
    return colors[status] || 'default';
  };

  const getStatusText = (status: string) => {
    const texts: Record<string, string> = {
      running: '运行中',
      idle: '空闲',
      warning: '警告',
      stopped: '停止',
    };
    return texts[status] || status;
  };

  const getEfficiencyColor = (efficiency: number) => {
    if (efficiency >= 90) return '#52c41a';
    if (efficiency >= 70) return '#faad14';
    return '#f5222d';
  };

  const selectDevice = (device: Device) => {
    emit('select-device', device);
  };
</script>

<style scoped>
  .device-status-panel {
    background: rgba(0, 20, 40, 0.9);
    border: 1px solid #00d4ff;
    border-radius: 8px;
    padding: 16px;
    backdrop-filter: blur(10px);
    box-shadow: 0 0 20px rgba(0, 212, 255, 0.3);
    color: #ffffff;
  }

  .panel-header {
    margin-bottom: 16px;
    border-bottom: 1px solid rgba(0, 212, 255, 0.3);
    padding-bottom: 12px;
  }

  .panel-header h3 {
    color: #00d4ff;
    margin: 0 0 12px 0;
    font-size: 18px;
    text-shadow: 0 0 5px rgba(0, 212, 255, 0.5);
  }

  .status-summary {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
  }

  .status-tag {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
  }

  .status-tag.running {
    background: rgba(82, 196, 26, 0.2);
    color: #52c41a;
    border: 1px solid #52c41a;
  }

  .status-tag.warning {
    background: rgba(250, 173, 20, 0.2);
    color: #faad14;
    border: 1px solid #faad14;
  }

  .status-tag.stopped {
    background: rgba(245, 34, 45, 0.2);
    color: #f5222d;
    border: 1px solid #f5222d;
  }

  .device-list {
    margin-bottom: 16px;
  }

  .device-item {
    cursor: pointer;
    transition: all 0.3s;
  }

  .device-item:hover {
    transform: translateX(5px);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.4);
  }

  .device-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }

  .device-name {
    color: #ffffff;
    font-weight: 500;
    font-size: 14px;
  }

  .status-badge {
    font-size: 12px;
  }

  .device-info {
    margin-top: 8px;
  }

  .info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    font-size: 12px;
  }

  .info-row .label {
    color: #7ec8e3;
  }

  .info-row span:not(.label) {
    color: #ffffff;
  }

  .temp-normal {
    color: #52c41a;
  }

  .temp-warning {
    color: #f5222d;
    font-weight: bold;
  }

  .panel-footer {
    border-top: 1px solid rgba(0, 212, 255, 0.3);
    padding-top: 12px;
    text-align: center;
  }

  :deep(.ant-statistic-title) {
    color: #7ec8e3;
    font-size: 12px;
  }

  :deep(.ant-statistic-content) {
    color: #00d4ff;
    font-size: 16px;
  }

  :deep(.ant-list-item-action) {
    display: none;
  }

  :deep(.ant-list-item:hover .ant-list-item-action) {
    display: block;
  }

  :deep(.ant-btn-link) {
    color: #00d4ff;
  }

  :deep(.ant-progress-bg) {
    background: linear-gradient(90deg, #0066cc, #00d4ff);
  }
</style>
