<!--
 * @Author: chris
 * @Date: 2025-09-15 09:51:59
 * @LastEditors: chris
 * @LastEditTime: 2025-10-22 17:03:42
-->
<script setup>
import bug from '@/static/svg/bug.svg'
import jiankongyun from '@/static/svg/jiankongyun.svg'
import tianqiyujing from '@/static/svg/tianqiyujing.svg'
import turangshuishi from '@/static/svg/turangshuishi.svg'

definePage({
  style: {
    navigationBarTitleText: '主页',
  },
})

// 果园基本信息
const itemDict = {
  plantingArea: {
    svg: 'nongshi',
    text: '种植面积（亩）',
    value: 250,
  },
  terrain: {
    svg: 'dixing',
    text: '地形',
    value: '丘陵山地',
  },
  variety: {
    svg: 'dapengzhongmiaoguanli',
    text: '主要品种',
    value: '桂味',
  },
  plantingNum: {
    svg: 'shuguo',
    text: '种植荔枝（棵）',
    value: 8500,
  },
}

// 监控模块数据
const modules = [
  {
    id: 'pest',
    title: '虫情监控',
    icon: bug,
    desc: '实时监测果园病虫害情况',
    route: '/pages/pest/pest',
  },
  {
    id: 'soil',
    title: '土壤墒情',
    icon: turangshuishi,
    desc: '监测土壤湿度、养分等数据',
    route: '/pages/soil/soil',
  },
  {
    id: 'weather',
    title: '气象监测',
    icon: tianqiyujing,
    desc: '温度、湿度、光照等数据',
    route: '/pages/weather/weather',
  },
  {
    id: 'drone',
    title: '无人机巡查',
    icon: jiankongyun,
    desc: '无人机航拍及数据分析',
    route: '/pages/drone/index',
  },
]

// 处理模块点击事件
function handleModuleClick(module) {
  // 在实际项目中，这里应该进行路由跳转
  console.log('跳转到:', module.route)
  // 由于页面可能不存在，先注释掉跳转
  uni.navigateTo({
    url: module.route,
  })
}
</script>

<template>
  <view class="home-page">
    <!-- 页面标题 -->
    <view class="home-title">
      <view class="title-container">
        <text class="title-text">荔枝园监控系统</text>
        <view class="title-accent" />
      </view>
    </view>

    <!-- 首页内容区域 -->
    <view class="home-content">
      <!-- 果园基本信息卡片 -->
      <view class="info-section">
        <wd-card :shadow="false" class="basic-card">
          <!-- 基本信息网格 -->
          <wd-row :gutter="12">
            <wd-col
              v-for="(item, key) in itemDict"
              :key="key"
              :span="12"
            >
              <view class="info-item-wrapper">
                <view class="info-item">
                  <text class="info-label">{{ item.text }}</text>
                  <text class="info-value">{{ item.value }}</text>
                </view>
              </view>
            </wd-col>
          </wd-row>
        </wd-card>
      </view>

      <!-- 监控模块区域 -->
      <view class="monitor-section">
        <text class="section-title">实时监控</text>

        <!-- 模块网格 -->
        <wd-row :gutter="15" class="module-row">
          <wd-col
            v-for="module in modules"
            :key="module.id"
            :span="12"
          >
            <view class="module-item-wrapper">
              <view
                class="module-card"
                @tap="handleModuleClick(module)"
              >
                <view class="module-icon-container" :class="`module-${module.id}`">
                  <image :src="module.icon" mode="aspectFit" class="module-icon" />
                </view>
                <view class="module-info">
                  <text class="module-title">{{ module.title }}</text>
                  <text class="module-desc">{{ module.desc }}</text>
                </view>
              </view>
            </view>
          </wd-col>
        </wd-row>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
// 主题颜色变量 - 轻科技感配色
$primary-color: #00c6ff; // 科技蓝
$primary-color-dark: #0072ff; // 深蓝
$bg-color: #f0f2f5; // 浅灰色背景
$card-bg: #ffffff; // 纯白色卡片背景
$card-bg-glass: rgba(255, 255, 255, 0.85); // 玻璃拟态背景
$text-primary: #0f1419; // 深色主文本
$text-secondary: #333f51; // 次要文本色
$text-tertiary: #6e7683; // 辅助文本色
$border-radius: 16px; // 较大圆角
$box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); // 柔和的阴影
$box-shadow-hover: 0 8px 32px rgba(0, 198, 255, 0.15); // 科技蓝阴影
$transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1); // 平滑过渡效果
$glow-effect: 0 0 15px rgba(0, 198, 255, 0.3); // 发光效果

// 基础样式
.home-page {
  min-height: 100%;
  background-color: $bg-color;
}

// 标题样式
.home-title {
  background: linear-gradient(135deg, $primary-color, $primary-color-dark);
  padding: 22px 0;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 20px rgba($primary-color, 0.35),
    $glow-effect;

  // 添加科技感网格背景
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    background-position: -1px -1px;
    z-index: 1;
  }

  // 发光圆点装饰
  &::after {
    content: '';
    position: absolute;
    top: 20%;
    right: 10%;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    filter: blur(20px);
    z-index: 0;
    animation: glowPulse 4s infinite alternate;
  }

  .title-container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .title-text {
    font-size: 28px;
    font-weight: 600;
    color: $card-bg;
    text-align: center;
    letter-spacing: 0.8px;
    position: relative;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    // 添加科技感下划线效果
    &::after {
      content: '';
      position: absolute;
      bottom: -8px;
      left: 50%;
      transform: translateX(-50%);
      width: 60%;
      height: 2px;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
    }
  }

  .title-accent {
    width: 50px;
    height: 3px;
    background: rgba(255, 255, 255, 0.4);
    border-radius: 3px;
    opacity: 0.9;
    backdrop-filter: blur(2px);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  }
}

// 发光脉冲动画
@keyframes glowPulse {
  0% {
    opacity: 0.6;
    transform: scale(1);
  }
  100% {
    opacity: 0.9;
    transform: scale(1.1);
  }
}

// 内容区域
.home-content {
  padding-top: 15px;
  padding-bottom: 15px;
}

// .info-section,
// .monitor-section {
//   margin: 0 -15px;
// }

// 果园信息部分
.info-section {
  margin-bottom: 24px;
}

// 信息项包装器
.info-item-wrapper {
  height: 100%;
}

// 基本信息卡片样式
.basic-card {
  border-radius: $border-radius;
  box-shadow: $box-shadow;
  overflow: hidden;
  background: $card-bg-glass;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  position: relative;
  padding: 10px !important;
  // 添加科技感边框
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, $primary-color, $primary-color-dark);
  }
}

// 信息项 - 统一样式
.info-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  min-height: 80px;
  justify-content: center;
  text-align: center;
  position: relative;
  padding: 10px;
  // 添加微妙的背景装饰
  &::before {
    content: '';
    position: absolute;
    top: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background: radial-gradient(circle, rgba(0, 198, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    opacity: 0.6;
  }

  .info-label {
    font-size: 14px;
    color: $text-tertiary;
    margin-bottom: 8px;
    letter-spacing: 0.3px;
    position: relative;
    z-index: 1;
  }

  .info-value {
    font-size: 20px;
    font-weight: 600;
    color: $primary-color-dark;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 1;
    // 添加数字科技感效果
    &::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 50%;
      transform: translateX(-50%);
      width: 40%;
      height: 1px;
      background: linear-gradient(90deg, transparent, $primary-color, transparent);
      opacity: 0.6;
    }
  }
}

// 监控模块部分
.monitor-section {
  .section-title {
    font-size: 18px;
    font-weight: 600;
    color: $text-primary;
    display: block;
    padding-left: 15px;
    margin-bottom: 16px;
    position: relative;
    // 添加科技感标题装饰
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 4px;
      height: 16px;
      background: linear-gradient(180deg, $primary-color, $primary-color-dark);
      border-radius: 2px;
      box-shadow: 0 0 8px rgba($primary-color, 0.3);
    }
  }

  // 模块行容器
  .module-row {
    // padding: 0 15px;
  }

  // 模块项包装器
  .module-item-wrapper {
    height: 100%;
  }

  // 模块卡片 - 统一样式
  .module-card {
    padding: 20px 15px;
    margin: 7.5px 0;
    background-color: $card-bg-glass;
    border-radius: $border-radius;
    box-shadow: $box-shadow;
    height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: $transition;
    overflow: hidden;
    position: relative;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);

    // 添加科技感边框光效
    &::before {
      content: '';
      position: absolute;
      top: -1px;
      left: -1px;
      right: -1px;
      bottom: -1px;
      border-radius: $border-radius;
      padding: 1px;
      background: linear-gradient(135deg, rgba(0, 198, 255, 0.2), transparent 50%, rgba(0, 198, 255, 0.2));
      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    // 右下角装饰
    &::after {
      content: '';
      position: absolute;
      bottom: -20px;
      right: -20px;
      width: 60px;
      height: 60px;
      background: radial-gradient(circle, rgba(0, 198, 255, 0.1) 0%, transparent 70%);
      border-radius: 50%;
      opacity: 0.5;
    }
  }

  // 模块图标容器 - 统一样式
  .module-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    width: 64px;
    height: 64px;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease;

    .module-card:hover & {
      transform: scale(1.05);
    }

    &.module-pest {
      background: linear-gradient(135deg, rgba(245, 87, 108, 0.12), rgba(245, 87, 108, 0.05));
      box-shadow: 0 4px 12px rgba(245, 87, 108, 0.1);
    }

    &.module-soil {
      background: linear-gradient(135deg, rgba(82, 196, 26, 0.12), rgba(82, 196, 26, 0.05));
      box-shadow: 0 4px 12px rgba(82, 196, 26, 0.1);
    }

    &.module-weather {
      background: linear-gradient(135deg, rgba(66, 153, 225, 0.12), rgba(66, 153, 225, 0.05));
      box-shadow: 0 4px 12px rgba(66, 153, 225, 0.1);
    }

    &.module-drone {
      background: linear-gradient(135deg, rgba(255, 152, 0, 0.12), rgba(255, 152, 0, 0.05));
      box-shadow: 0 4px 12px rgba(255, 152, 0, 0.1);
    }

    // 科技感光效
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: -50%;
      width: 20%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
      transform: skewX(-20deg);
      animation: shine 3s infinite linear;
    }
  }

  // 图标发光动画
  @keyframes shine {
    0% {
      left: -50%;
    }
    100% {
      left: 150%;
    }
  }

  // 模块图标样式
  .module-icon {
    width: 32px;
    height: 32px;
    transition: filter 0.3s ease;
    .module-card:hover & {
      filter: brightness(1.1);
    }
  }

  // 模块信息样式
  .module-info {
    width: 100%;
    position: relative;
    z-index: 1;
  }

  .module-title {
    font-size: 16px;
    font-weight: 600;
    color: $text-primary;
    margin-bottom: 6px;
    display: block;
    letter-spacing: 0.2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }

  .module-desc {
    font-size: 13px;
    color: $text-tertiary;
    line-height: 1.5;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    letter-spacing: 0.1px;
    // 添加科技感文字效果
    &::after {
      content: '';
      position: absolute;
      bottom: -4px;
      left: 50%;
      transform: translateX(-50%);
      width: 30%;
      height: 1px;
      background: linear-gradient(90deg, transparent, $primary-color, transparent);
      opacity: 0.3;
    }
  }
}
</style>
