import { Component } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-tab2',
  templateUrl: './tab2.page.html',
  styleUrls: ['./tab2.page.scss'],
  standalone: true,
  imports: [IonicModule, CommonModule],
})
export class Tab2Page {
  tabs = ['热门', '推荐', '资讯', '攻略', '评测', '市场分析', '饰品鉴赏'];
  activeTab = '推荐';

  bannerImages = [
    'assets/images/banner1.jpg',
    'assets/images/banner2.jpg',
    'assets/images/banner3.jpg',
    'assets/images/banner4.jpg',
  ];
  bannerDots = [0, 1, 2, 3];
  activeBannerIndex = 0;

  categories = [
    { name: '宝石刀', icon: 'bi-gem' },
    { name: '稀有饰品', icon: 'bi-stars' },
    { name: '全球市场', icon: 'bi-globe' },
    { name: '价格走势', icon: 'bi-graph-up' },
    { name: '赛事饰品', icon: 'bi-trophy' },
    { name: '皮肤设计', icon: 'bi-palette' },
    { name: '收藏指南', icon: 'bi-collection' },
    { name: '交易技巧', icon: 'bi-currency-exchange' },
  ];

  hotItems = [
    { name: 'AWP | 雷击', price: '899.00', img: 'assets/images/hot1.jpg' },
    { name: 'M9刺刀 | 渐变大理石', price: '4299.00', img: 'assets/images/hot2.jpg' },
    { name: 'AK-47 | 火蛇', price: '2599.00', img: 'assets/images/hot3.jpg' },
    { name: '手套 | 潘多拉之盒', price: '3899.00', img: 'assets/images/hot4.jpg' },
    { name: '蝴蝶刀 | 多普勒', price: '5499.00', img: 'assets/images/hot5.jpg' },
  ];

  articles = [
    {
      author: '饰品专家',
      time: '2小时前',
      title: '2024年CS2饰品市场趋势分析：哪些饰品值得投资？',
      img: 'assets/images/article1.jpg',
      readCount: '1.2k',
      likes: 256,
      comments: 89,
    },
    {
      author: '皮肤设计师',
      time: '5小时前',
      title: '如何辨别高品质皮肤？磨损值对价格的影响详解',
      img: 'assets/images/article2.jpg',
      readCount: '856',
      likes: 189,
      comments: 45,
    },
  ];

  onTabClick(tab: string) {
    this.activeTab = tab;
    console.log('当前选中的标签是：', tab);
    // TODO: 根据 tab 加载不同内容
  }

  onSearchClick() {
    console.log('点击了搜索按钮');
    // TODO: 弹出搜索框或跳转搜索页
  }

  onCategoryClick(category: any) {
    console.log('点击了分类：', category.name);
    // TODO: 跳转分类详情页
  }

  onHotItemClick(item: any) {
    console.log('点击了热门饰品：', item.name);
    // TODO: 跳转饰品详情页
  }

  onSectionMoreClick(sectionName: string) {
    console.log('点击了“更多”按钮，模块是：', sectionName);
    // TODO: 跳转更多列表页
  }

  onLike(article: any) {
    article.likes += 1;
    console.log('点赞：', article.title);
  }

  onComment(article: any) {
    console.log('点击评论：', article.title);
    // TODO: 弹出评论输入框
  }

  setActiveBanner(index: number) {
    this.activeBannerIndex = index;
    console.log('切换到轮播图：', index);
  }
}
