<!--
 * @Author: chris
 * @Date: 2025-09-09 15:30:24
 * @LastEditors: chris
 * @LastEditTime: 2025-09-11 17:27:00
-->
<script setup>
import weatherImg from '@/assets/images/devices/weather.png'

const testDataList = [
  {
    id: 1,
    title: '温度',
    type: 'temperature',
    value: '25',
    icon: 'temperature2',
    color: '#FF6B6B',
    unit: '°C',
  },
  {
    id: 2,
    title: '湿度',
    type: 'humidity',
    value: '60',
    icon: 'humidity',
    color: '#4ECDC4',
    unit: '%',
  },
  {
    id: 3,
    title: '光照',
    type: 'light',
    value: '10000',
    icon: 'light',
    color: '#FFD166',
    unit: 'lux',
  },
  {
    id: 4,
    title: '降雨量',
    type: 'rainfall',
    value: '10',
    icon: 'rain',
    color: '#6A0572',
    unit: 'mm',
  },
  {
    id: 5,
    title: '风向',
    type: 'windDirection',
    value: '东南风',
    icon: 'wind',
    color: '#1A535C',
    unit: '°',
  },
  {
    id: 6,
    title: '风速',
    type: 'windSpeed',
    value: '2',
    icon: 'windPower',
    color: '#77DD77',
    unit: 'm/s',
  },
  {
    id: 7,
    title: '气压',
    type: 'pressure',
    value: '1013',
    icon: 'hpa',
    color: '#845EC2',
    unit: 'hPa',
  }
]

const emits = defineEmits([ 'select' ])

function handleSelect(item) {
  console.log('Selected item:', item);
  emits('select', item)
}
</script>

<template>
  <div class="weather-dashboard">
    <!-- 顶部标题区域 -->
    <div class="dashboard-header">
      <h2 class="dashboard-title">气象监测数据</h2>
    </div>
    
    <!-- 数据卡片区域 -->
    <div class="data-cards">
      <div 
        v-for="item in testDataList" 
        :key="item.id" 
        class="data-card"
        :style="{ '--card-color': item.color }"
        @click="handleSelect(item)"
      >
        <div class="card-icon-wrapper">
          <svg-icon :icon-class="item.icon" class="card-icon"></svg-icon>
        </div>
        <div class="card-info">
          <div class="card-label">{{ item.title }}</div>
          <div class="card-value-container">
            <span class="card-value">{{ item.value }}</span>
            <span v-if="item.unit" class="card-unit">{{ item.unit }}</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 图片区域 -->
    <div class="weather-photo">
      <el-image 
        :src="weatherImg" 
        fit="contain" 
        class="weather-photo-img"
        lazy
      />
    </div>
  </div>
</template>

<style lang="scss" scoped>
// 主题颜色变量
$bg-primary: #ffffff;
$bg-secondary: #f5f7fa;
$text-primary: #333333;
$text-secondary: #666666;
$shadow-normal: 0 2px 12px rgba(0, 0, 0, 0.05);
$transition-base: all 0.3s ease;

.weather-dashboard {
  @apply flex flex-col justify-center item-center w-full h-full overflow-hidden;
}

// 顶部标题区域
.dashboard-header {
  @apply text-center mb-24px;
}

.dashboard-title {
  @apply text-24px font-weight-600 m-0 tracking-[0.5px];
  color: $text-primary;
}

// 图片区域样式
.weather-photo {
  @apply w-full h-480px rounded-8px overflow-hidden;
  box-shadow: $shadow-normal;
  transition: $transition-base;
}

.weather-photo:hover {
  @apply translate-y-[-2px] shadow-[0_4px_16px_rgba(0,0,0,0.1)];
}

.weather-photo-img {
  @apply h-full w-full transition-[transform] duration-500 ease;
}

.weather-photo-img:hover {
  transform: scale(1.03);
}

// 数据卡片网格布局
.data-cards {
  @apply grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-16px flex-1 mb-24px;
}

// 数据卡片样式 - 横向排列
.data-card {
  @apply rounded-8px p-16px flex items-center relative border-[1px] border-style-solid border-[transparent] min-h-[100px] cursor-pointer;
  background: $bg-secondary;
  transition: $transition-base;

  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    border-color: var(--card-color);
  }

  // 背景光效点缀
  &::before {
    @apply content-[''] absolute top-[-20px] right-[-20px] w-60px h-60px rounded-[50%] bg-[radial-gradient(circle,rgba(var(--card-color-rgb),0.1)_0%,transparent_70%)] z-0;
    background: radial-gradient(circle, rgba(var(--card-color-rgb), 0.1) 0%, transparent 70%);
  }
}

// 卡片图标样式
.card-icon-wrapper {
  @apply w-48px h-48px rounded-50% flex items-center justify-center flex-shrink-0 mr-16px bg-[rgba(var(--card-color-rgb),0.1)] z-1;
  transition: $transition-base;
}

.data-card:hover .card-icon-wrapper {
  @apply bg-[rgba(var(--card-color-rgb),0.15)] transform scale-105;
}

.card-icon {
  @apply w-36px h-36px color-[var(--card-color)];
}

// 卡片信息样式
.card-info {
  @apply relative z-1 flex-1;
}

.card-label {
  @apply text-14px mb-10px font-500;
  color: $text-secondary;
}

.card-value-container {
  @apply flex items-baseline gap-4px;
}

.card-value {
  @apply text-22px font-600 color-[var(--card-color)] line-height-[1] whitespace-nowrap overflow-hidden text-ellipsis;
}

.card-unit {
  @apply text-14px font-400 whitespace-nowrap;
  color: $text-secondary;
}
</style>
