<template>
  <view 
    class="detail-card" 
    :class="[cardClass, { 'disconnected': connectionStatus === 0 }]" 
    @click="$emit('click')"
  >
    <view class="detail-header">
      <view class="detail-icon-container">
        <view class="detail-icon">{{ icon }}</view>
        <text class="detail-label">{{ label }}</text>
      </view>
      <view class="detail-value-container">
        <view class="value-unit-wrapper">
          <text 
            class="detail-value"
            :class="valueClass"
          >{{ displayNumber }}</text>
          <text class="detail-unit">{{ displayUnit }}</text>
        </view>
        <!-- <view 
          class="detail-status" 
          :class="getStatusClass()"
        ></view> -->
      </view>
    </view>
    <view class="detail-progress-bar">
      <view 
        class="detail-progress-fill" 
        :class="progressClass"
        :style="{ width: progress + '%' }"
      ></view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'EnvironmentCard',
  props: {
    // 卡片类型
    type: {
      type: String,
      required: true,
      validator: value => ['temperature', 'humidity', 'cleanliness'].includes(value)
    },
    // 数值
    value: {
      type: Number,
      default: 0
    },
    // 连接状态 (0: 未连接, 1: 连接成功, 2: 异常)
    connectionStatus: {
      type: Number,
      default: 0
    },
    // 进度百分比 (0-100)
    progress: {
      type: Number,
      default: 0
    },
    // 是否超限
    isOutOfRange: {
      type: Boolean,
      default: false
    },
    // 是否数据异常
    isAbnormal: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    // 根据类型返回图标
    icon() {
      const iconMap = {
        temperature: '🌡️',
        humidity: '💧',
        cleanliness: '✨'
      }
      return iconMap[this.type]
    },
    // 根据类型返回标签
    label() {
      const labelMap = {
        temperature: '温度',
        humidity: '湿度',
        cleanliness: '洁净度'
      }
      return labelMap[this.type]
    },
    // 显示的数值
    displayNumber() {
      if (this.type === 'cleanliness' && this.value <= 0) {
        return '-';
      }
      return this.value;
    },
    // 显示的单位
    displayUnit() {
      const unitMap = {
        temperature: '°C',
        humidity: '%',
        cleanliness: 'μg/m³'
      };
      return unitMap[this.type];
    },
    // 根据类型返回卡片类名
    cardClass() {
      const classMap = {
        temperature: 'temperature-detail-card',
        humidity: 'humidity-detail-card',
        cleanliness: 'cleanliness-detail-card'
      }
      return classMap[this.type]
    },
    // 根据类型返回进度条类名
    progressClass() {
      const classMap = {
        temperature: 'temperature-progress',
        humidity: 'humidity-progress',
        cleanliness: 'cleanliness-progress'
      }
      return classMap[this.type]
    },
    // 数值的类
    valueClass() {
      if (this.isOutOfRange) {
        return 'out-of-range';
      }
      if (this.isAbnormal || this.connectionStatus === 2) {
        return 'abnormal';
      }
      return '';
    }
  },
  methods: {
    // 获取状态点类名
    getStatusClass() {
      if (this.connectionStatus === 1) {
        return 'active'
      } else if (this.connectionStatus === 2) {
        return 'warning'
      } else {
        return 'inactive'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
// 卡片基础样式 - 严格按照原样式恢复
.detail-card {
  background: #ffffff;
  border-radius: 8rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
  border: 1rpx solid #e1e5e9;
  transition: box-shadow 0.2s ease;
  cursor: pointer;
  
  &:hover {
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.12);
  }
  
  /* 断线状态样式 */
  &.disconnected {
    border-color: #95a5a6 !important;
    border-left-color: #95a5a6 !important;
    opacity: 0.7;
  }
}

// 头部样式
.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.detail-icon-container {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.detail-icon {
  font-size: 32rpx;
}

.detail-label {
  font-size: 28rpx;
  color: #2c3e50;
  font-weight: 600;
}

.detail-value-container {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.value-unit-wrapper {
  display: flex;
  align-items: baseline;
  justify-content: space-between; /* 改为 space-between */
  gap: 4rpx;
  flex-grow: 1; /* 让其填充剩余空间 */
  // min-width: 120rpx;
}

.detail-value {
  font-size: 28rpx;
  font-weight: 600;
  
  &.out-of-range {
    color: #e74c3c;
  }
  
  &.abnormal {
    color: #f1c40f;
  }
}

.detail-unit {
  font-size: 24rpx;
  color: #7f8c8d;
  width: 60rpx;
}

// 状态指示器
.detail-status {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  
  &.active {
    background: #27ae60;
  }
  
  &.inactive {
    background: #bdc3c7;
  }
  
  &.warning {
    background: #f1c40f;
  }
}

// 进度条样式
.detail-progress-bar {
  height: 16rpx;
  background: #ecf0f1;
  border-radius: 8rpx;
  overflow: hidden;
}

.detail-progress-fill {
  height: 100%;
  border-radius: 8rpx;
  transition: width 0.3s ease;
  
  &.temperature-progress {
    background: #e74c3c;
  }
  
  &.humidity-progress {
    background: #3498db;
  }
  
  &.cleanliness-progress {
    background: #f39c12;
  }
}

// 特定卡片样式 - 左侧边框颜色
.temperature-detail-card {
  border-left: 4rpx solid #e74c3c;
}

.humidity-detail-card {
  border-left: 4rpx solid #3498db;
}

.cleanliness-detail-card {
  border-left: 4rpx solid #f39c12;
}

// 断线状态下的文字颜色
.detail-card.disconnected .detail-label {
  color: #95a5a6;
}

.detail-card.disconnected .detail-value {
  color: #95a5a6;
}

.detail-card.disconnected .detail-progress-fill {
  background: #95a5a6 !important;
}
</style>