<!--
 * @Author: chris
 * @Date: 2025-10-23 09:33:22
 * @LastEditors: chris
 * @LastEditTime: 2025-10-23 11:20:35
-->
<script setup lang="ts">
// 定义预警信息接口
interface WarningItem {
  id: string
  type: string
  title: string
  description: string
  location: string
  time: string
  recommendedAction: string
}

// 模拟预警数据 - 增加更多条数据以展示布局效果
const warningData = ref<WarningItem[]>([
  {
    id: '1',
    type: '荔枝蒂蛀虫',
    title: '荔枝蒂蛀虫爆发预警',
    description: '监测到果园东区荔枝蒂蛀虫密度异常增高，预计48小时内可能大规模爆发可能大规模爆发可能大规模爆发123123123123',
    location: '果园东区',
    time: '2小时前',
    recommendedAction: '立即使用高效低毒农药进行全园防治',
  },
  {
    id: '2',
    type: '尺蠖',
    title: '尺蠖活动增加',
    description: '南部区域尺蠖数量呈上升趋势，需要密切关注',
    location: '果园南区',
    time: '5小时前',
    recommendedAction: '加强监测，准备防治措施',
  },
  {
    id: '3',
    type: '气象提醒',
    title: '降雨预警',
    description: '未来24小时有降雨，请注意防治药物的施用时间',
    location: '全园',
    time: '10小时前',
    recommendedAction: '合理安排农药施用时间，避开降雨',
  },
  {
    id: '4',
    type: '蚜虫',
    title: '蚜虫轻度发生',
    description: '西北区域发现少量蚜虫活动，当前密度较低',
    location: '果园西区',
    time: '1天前',
    recommendedAction: '定期监测，暂不需要防治',
  },
  {
    id: '5',
    type: '红蜘蛛',
    title: '红蜘蛛密度上升',
    description: '部分果树枝叶发现红蜘蛛，密度呈上升趋势',
    location: '果园北区',
    time: '12小时前',
    recommendedAction: '准备生物防治措施，控制蔓延',
  },
])

// 处理预警项点击
function handleWarningClick(warning: WarningItem) {
  console.log('查看预警详情:', warning)
  // 实际项目中可以跳转到详情页
  uni.navigateTo({
    url: `/pages/pest/detail?id=${warning.id}`,
  })
}
</script>

<template>
  <wd-card class="warning-card">
    <view class="warning-list">
      <view v-for="warning in warningData" :key="warning.id" class="warning-item">
        <wd-text color="#333" :lines="2" :text="warning.description" />
        <view class="warning-time">
          <wd-text size="12px" :text="warning.time" />
        </view>
      </view>
    </view>
  </wd-card>
</template>

<style lang="scss" scoped>
.warning-list {
  @apply py-15px;

  .warning-item {
    + .warning-item {
      @apply mt-10px;
    }

    .warning-time {
      @apply text-right mt-5px;
    }
  }
}
</style>
