<!--
 * @Author: chris
 * @Date: 2025-09-09 15:30:24
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2026-03-18 11:23:06
-->
<script setup>
import soilImg from '@/assets/images/devices/soil.png'

const props = defineProps({
  items: {
    type: Array,
    default: () => []
  }
})


const testDataList = [
  {
    id: 1,
    title: '土壤温度',
    type: 'temperature',
    value: '22.5',
    icon: 'temperature2',
    color: '#FF6B6B',
    unit: '°C',
  },
  {
    id: 2,
    title: '土壤湿度',
    type: 'humidity',
    value: '65',
    icon: 'humidity',
    color: '#4ECDC4',
    unit: '%',
  },
  {
    id: 3,
    title: 'pH值',
    type: 'ph',
    value: '6.8',
    icon: 'ph-color',
    color: '#FFD166',
    unit: '',
  },
  {
    id: 4,
    title: 'EC',
    type: 'ec',
    value: '1.2',
    icon: 'ec',
    color: '#6A0572',
    unit: 'mS/cm',
  },
  {
    id: 5,
    title: '氮含量',
    type: 'nitrogen',
    value: '250',
    icon: 'nitrogen',
    color: '#1A535C',
    unit: 'mg/kg',
  },
  {
    id: 6,
    title: '磷含量',
    type: 'phosphorus',
    value: '45',
    icon: 'phosphorus',
    color: '#77DD77',
    unit: 'mg/kg',
  },
  {
    id: 7,
    title: '钾含量',
    type: 'potassium',
    value: '180',
    icon: 'potassium',
    color: '#845EC2',
    unit: 'mg/kg',
  }
]

const emits = defineEmits([ 'select' ])

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

<template>
  <div class="soil-dashboard">
    <!-- 顶部标题区域 -->
    <div class="dashboard-header">
      <h2 class="dashboard-title">土壤监测数据</h2>
    </div>
    
    <!-- 数据卡片区域 -->
    <div class="data-cards">
      <div 
        v-for="item in items" 
        :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="soil-photo">
      <el-image 
        :src="soilImg" 
        fit="contain" 
        class="soil-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;

.soil-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;
}

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

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

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

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

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

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

  &:hover {
    @apply translate-y-[-3px] shadow-[0_6px_16px_rgba(0,0,0,0.08)] border-[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>
