import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-pest-intro',
  templateUrl: './pest-intro.page.html',
  styleUrls: ['./pest-intro.page.scss'],
})
export class PestIntroPage {
  currentSegment = 'all';
  pests = [
    {
      id: 1,
      name: '小麦赤霉病',
      image: 'assets/images/wheat-disease.jpg',
      type: 'disease',
      crop: '小麦',
      level: 'high',
      details: '小麦赤霉病是由真菌引起的病害...'
    },
    {
      id: 2,
      name: '稻飞虱',
      image: 'assets/images/rice-pest.jpg',
      type: 'pest',
      crop: '水稻',
      level: 'medium',
      details: '稻飞虱是水稻主要害虫之一...'
    },
    {
      id: 3,
      name: '玉米螟',
      image: 'assets/images/corn-pest.jpg',
      type: 'pest',
      crop: '玉米',
      level: 'high',
      details: '玉米螟是玉米主要害虫...'
    }
  ];

  get filteredItems() {
    if (this.currentSegment === 'all') {
      return this.pests;
    }
    return this.pests.filter(item => item.type === this.currentSegment);
  }

  constructor(private router: Router) {}

  segmentChanged(ev: any) {
    this.currentSegment = ev.detail.value;
  }

  openPestDetail(pest: any) {
    this.router.navigate(['/pest-detail', pest.id]);
  }
}