import { Component } from '@angular/core';
import { IonHeader, IonToolbar, IonTitle, IonContent, IonSearchbar, IonIcon, IonTabButton, IonTabs, IonTabBar, IonLabel, IonMenu, IonList, IonItem, IonMenuButton } from '@ionic/angular/standalone';
import { Router } from '@angular/router';

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss'],
  standalone: true,
  imports: [
    IonHeader, IonToolbar, IonTitle, IonContent,
    IonSearchbar, IonIcon, IonTabButton, IonTabs, IonTabBar, IonLabel,
    IonMenu, IonList, IonItem, IonMenuButton
  ],
})
export class Tab3Page {
  artworks = [
    {
      id: '1',
      image: 'assets/img/xingkong.png',
      title: '梵高-星空高清画作',
      description: '致敬梵高 #艺术品 #星空',
      avatarUrl: 'assets/img/book1.png',
      userName: '星空艺术家',
      date: '12-01',
      likes: 1687,
      category: 'art'
    },
    {
      id: '2',
      image: 'assets/img/xiangrikui.png',
      title: '梵高《向日葵》',
      description: '经典中的经典，笔触很牛！#花',
      avatarUrl: 'assets/img/book2.png',
      userName: '艺术鉴赏家',
      date: '11-30',
      likes: 2341,
      category: 'art'
    },
    {
      id: '3',
      image: 'assets/img/fangao.png',
      title: '梵高自画像',
      description: '梵高生平自画像之其中🔟副👩‍🎨 #艺术欣赏 #美',
      avatarUrl: 'assets/img/book3.png',
      userName: '艺术探索者',
      date: '11-29',
      likes: 1892,
      category: 'art'
    },
    {
      id: '4',
      image: 'assets/img/cunzhuang.png',
      title: '阿尔小镇',
      description: '走吧，梵高，去你最爱的阿尔看看，阿尔小镇',
      avatarUrl: 'assets/img/book4.png',
      userName: '风景画师',
      date: '11-28',
      likes: 2156,
      category: 'art'
    }
  ];

  ngOnInit() {
    this.red_underline('发现');
  }
  constructor(private router: Router) { }
  red_underline(text: string) {
    const prevUnderlined = document.querySelectorAll('span[underline="true"]') as NodeListOf<HTMLElement>;
    prevUnderlined.forEach((el: HTMLElement) => {
      el.style.textDecoration = 'none';
      el.removeAttribute('underline');
    });
    const target = document.querySelector(`span[data-id="${text}"]`) as HTMLElement;
    if (target) {
      // target.style.textDecoration = 'underline';
      // target.style.textDecorationColor = 'red';
      target.setAttribute('underline', 'true');
    }
  }

  goToDetail(artId: string) {
    console.log('Navigating to artwork:', artId);
    this.router.navigate(['/tabs/art-detail', artId], {
      state: { artwork: this.artworks.find(art => art.id === artId) }
    });
  }

  goToCategory(category: string) {
    this.router.navigate(['/tabs/category', category]);
  }
}