import { Component } from '@angular/core';
import { IonicModule } from '@ionic/angular'; 
import { CommonModule } from '@angular/common'; 
import { ExploreContainerComponent } from '../explore-container/explore-container.component';
import { addIcons } from 'ionicons';
import { search, ellipsisHorizontal, timeOutline, downloadOutline, cartOutline, walletOutline, heartOutline, bookmarkOutline, imageOutline, imagesOutline, documentTextOutline } from 'ionicons/icons';

@Component({
  selector: 'app-tab3',
  templateUrl: 'tab3.page.html',
  styleUrls: ['tab3.page.scss'],
  standalone: true,
  imports: [
    IonicModule, 
    CommonModule, 
    ExploreContainerComponent 
  ]
})
export class Tab3Page {
  profile = {
    name: '派大星',
    level: 'Lv.17等级 | 才华横溢',
    vipStatus: true,
    buttons: [
      { icon: 'time-outline', text: '浏览记录' },
      { icon: 'download-outline', text: '我的下载' },
      { icon: 'cart-outline', text: '我的购买' },
      { icon: 'wallet-outline', text: '我的钱包' }
    ],
    tabs: [
      { icon: 'images-outline', text: '全部' },
      { icon: 'image-outline', text: '图文' },
      { icon: 'document-text-outline', text: '文章' }
    ]
  };

  showTabs = false; // 控制显示的按钮
  activeTab: string = 'all'; // 默认激活的按钮

  constructor() {
    addIcons({search, ellipsisHorizontal, timeOutline, downloadOutline, cartOutline, walletOutline, heartOutline, bookmarkOutline, imageOutline, imagesOutline, documentTextOutline});
  }

  toggleTabs(action: string) {
    this.showTabs = true; // 显示全部、图文、文章按钮
    this.activeTab = action === 'like' ? 'all' : 'collect'; // 更新当前激活的按钮
  }

  setActiveTab(tab: string) {
    this.activeTab = tab; // 更新当前激活的标签
  }
}