<template>
  <div class="device-detail">
    <div v-if="device" class="detail-content">
      <!-- 设备基本信息 -->
      <div class="detail-section">
        <h4>基本信息</h4>
        <div class="info-grid">
          <div class="info-item">
            <span class="label">设备编号:</span>
            <span class="value">{{ device.id }}</span>
          </div>
          <div class="info-item">
            <span class="label">设备名称:</span>
            <span class="value">{{ device.name }}</span>
          </div>
          <div class="info-item">
            <span class="label">设备类型:</span>
            <span class="value">{{ device.type }}</span>
          </div>
          <div class="info-item">
            <span class="label">当前状态:</span>
            <a-tag :color="getStatusColor(device.status)" class="status-tag">
              {{ getStatusText(device.status) }}
            </a-tag>
          </div>
        </div>
      </div>

      <!-- 运行状态 -->
      <div class="detail-section">
        <h4>运行状态</h4>
        <div class="status-indicators">
          <div class="indicator temperature">
            <div class="indicator-icon">🌡️</div>
            <div class="indicator-info">
              <div class="indicator-label">温度</div>
              <div class="indicator-value" :class="{ 'warning': device.temperature > 70 }">
                {{ device.temperature }}°C
              </div>
            </div>
          </div>
          <div class="indicator efficiency">
            <div class="indicator-icon">⚡</div>
            <div class="indicator-info">
              <div class="indicator-label">运行效率</div>
              <div class="indicator-value">{{ device.efficiency }}%</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 生产统计 -->
      <div class="detail-section">
        <h4>生产统计</h4>
        <div class="production-stats">
          <div class="stat-item">
            <div class="stat-icon">📦</div>
            <div class="stat-info">
              <div class="stat-label">累计产量</div>
              <div class="stat-value">{{ device.production }}</div>
              <div class="stat-unit">件</div>
            </div>
          </div>
          <div class="stat-item">
            <div class="stat-icon">👷</div>
            <div class="stat-info">
              <div class="stat-label">操作员</div>
              <div class="stat-value">{{ device.operator }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 维护信息 -->
      <div class="detail-section">
        <h4>维护信息</h4>
        <div class="maintenance-info">
          <div class="maintenance-status">
            <span class="label">维护状态:</span>
            <a-badge :status="getMaintenanceStatus(device.maintenance)" :text="device.maintenance" />
          </div>
          <div class="maintenance-schedule">
            <span class="label">下次维护:</span>
            <span class="value">2024-04-15</span>
          </div>
        </div>
      </div>

      <!-- 位置信息 -->
      <div class="detail-section">
        <h4>位置信息</h4>
        <div class="location-info">
          <div class="location-item">
            <span class="label">X坐标:</span>
            <span class="value">{{ device.location.x }}m</span>
          </div>
          <div class="location-item">
            <span class="label">Y坐标:</span>
            <span class="value">{{ device.location.y }}m</span>
          </div>
          <div class="location-item">
            <span class="label">Z坐标:</span>
            <span class="value">{{ device.location.z }}m</span>
          </div>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="detail-actions">
        <a-space>
          <a-button type="primary" @click="handleStart" :disabled="device.status === 'running'">启动设备</a-button>
          <a-button @click="handleStop" :disabled="device.status === 'stopped'">停止设备</a-button>
          <a-button @click="handleMaintenance" :disabled="device.status === 'stopped'">预约维护</a-button>
          <a-button @click="handleExport">导出数据</a-button>
        </a-space>
      </div>
    </div>

    <a-empty v-else description="暂无设备信息" />
  </div>
</template>

<script lang="ts" setup>
  import { message } from 'ant-design-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({
    device: {
      type: Object as PropType<Device | null>,
      default: null,
    },
  });

  const emit = defineEmits(['close']);

  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 getMaintenanceStatus = (maintenance: string) => {
    if (maintenance === '正常') return 'success';
    if (maintenance === '需要检查') return 'warning';
    if (maintenance === '维护中') return 'error';
    return 'default';
  };

  const handleStart = () => {
    message.success('设备启动指令已发送');
    emit('close');
  };

  const handleStop = () => {
    message.success('设备停止指令已发送');
    emit('close');
  };

  const handleMaintenance = () => {
    message.success('维护预约已创建');
    emit('close');
  };

  const handleExport = () => {
    message.success('设备数据导出中...');
  };
</script>

<style scoped>
  .device-detail {
    color: #ffffff;
  }

  .detail-content {
    padding: 8px;
  }

  .detail-section {
    margin-bottom: 20px;
  }

  .detail-section h4 {
    color: #00d4ff;
    margin: 0 0 12px 0;
    font-size: 14px;
    border-bottom: 1px solid rgba(0, 212, 255, 0.3);
    padding-bottom: 8px;
  }

  .info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .info-item .label {
    color: #7ec8e3;
    font-size: 12px;
  }

  .info-item .value {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
  }

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

  .status-indicators {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .indicator {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 40, 80, 0.5);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 8px;
    padding: 12px;
  }

  .indicator-icon {
    font-size: 24px;
  }

  .indicator-info {
    flex: 1;
  }

  .indicator-label {
    font-size: 10px;
    color: #7ec8e3;
    margin-bottom: 4px;
  }

  .indicator-value {
    font-size: 18px;
    font-weight: bold;
    color: #00d4ff;
  }

  .indicator-value.warning {
    color: #f5222d;
  }

  .production-stats {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .stat-item {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(0, 40, 80, 0.5);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 8px;
    padding: 10px;
  }

  .stat-icon {
    font-size: 20px;
  }

  .stat-info {
    flex: 1;
  }

  .stat-label {
    font-size: 10px;
    color: #7ec8e3;
    margin-bottom: 2px;
  }

  .stat-value {
    font-size: 16px;
    font-weight: bold;
    color: #00d4ff;
  }

  .stat-unit {
    font-size: 10px;
    color: #7ec8e3;
    margin-left: 4px;
  }

  .maintenance-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .maintenance-status,
  .maintenance-schedule {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .maintenance-status .label,
  .maintenance-schedule .label {
    color: #7ec8e3;
    font-size: 12px;
  }

  .maintenance-status .value,
  .maintenance-schedule .value {
    color: #ffffff;
    font-size: 12px;
  }

  .location-info {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
  }

  .location-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(0, 40, 80, 0.5);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 8px;
    padding: 8px;
  }

  .location-item .label {
    color: #7ec8e3;
    font-size: 10px;
    margin-bottom: 4px;
  }

  .location-item .value {
    color: #00d4ff;
    font-size: 14px;
    font-weight: bold;
  }

  .detail-actions {
    border-top: 1px solid rgba(0, 212, 255, 0.3);
    padding-top: 16px;
    text-align: center;
  }

  :deep(.ant-btn-primary) {
    background: linear-gradient(135deg, #0066cc, #00d4ff);
    border: none;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
  }

  :deep(.ant-btn) {
    color: #ffffff;
    background: rgba(0, 40, 80, 0.8);
    border: 1px solid #00d4ff;
  }

  :deep(.ant-btn:hover:not(:disabled)) {
    border-color: #00d4ff;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
  }

  :deep(.ant-btn:disabled) {
    border-color: rgba(0, 212, 255, 0.3);
    color: rgba(255, 255, 255, 0.3);
  }

  :deep(.ant-badge-status-text) {
    color: #ffffff;
    margin-left: 8px;
  }
</style>
