import { Component } from '@angular/core';
import { IonHeader, IonToolbar, IonTitle, IonContent, IonSearchbar, IonIcon, IonTabButton, IonTabs, IonTabBar, IonLabel } from '@ionic/angular/standalone';
import { ExploreContainerComponent } from '../explore-container/explore-container.component';

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss'],
  standalone: true,
  imports: [IonHeader, IonToolbar, IonTitle, IonContent, ExploreContainerComponent,
    IonSearchbar, IonIcon, IonTabButton, IonTabs, IonTabBar, IonLabel,],
})
export class Tab3Page {
  ngOnInit() {
    this.red_underline('发现');
  }
  constructor() { }
  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');
    }
  }
}
