import { Component, OnInit } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

interface Article {
  id: string;
  title: string;
  summary: string;
  content: string;
  image: string;
  category: string;
  date: string;
  views: number;
}

@Component({
  selector: 'app-music',
  templateUrl: './music.component.html',
  styleUrls: ['./music.component.scss'],
  standalone: true,
  imports: [
    IonicModule,
    CommonModule,
    FormsModule,
  ],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class MusicComponent implements OnInit {
  selectedCategory = 'all';

  slideOpts = {
    initialSlide: 0,
    speed: 400,
    autoplay: {
      delay: 3000,
    },
    loop: true,
    pagination: true
  };

  featuredArticles: Article[] = [
    {
      id: '1',
      title: '2024年音乐产业发展趋势分析',
      summary: '探讨AI技术对音乐创作的影响及未来发展方向',
      content: '',
      image: 'assets/img/music_information1.png',
      category: '新闻',
      date: '2024-01-15',
      views: 1234
    },
    // 添加更多精选文章
  ];

  articles: Article[] = [
    {
      id: '2',
      title: '新一代音乐人如何在数字时代突围',
      summary: '探讨年轻音乐人在当今市场的机遇与挑战',
      content: '',
      image: 'assets/img/music_information.png',
      category: '评测',
      date: '2024-01-14',
      views: 856
    },
    // 添加更多文章
  ];

  constructor() { }

  ngOnInit() {
    this.loadArticles();
  }

  loadArticles() {
    // 从服务器加载文章列表
  }

  openArticle(article: Article) {
    // 打开文章详情页
    console.log('Opening article:', article.id);
  }

  async loadMoreArticles(event: any) {
    // 实现加载更多逻辑
    setTimeout(() => {
      // 模拟加载更多文章
      event.target.complete();

      // 如果没有更多文章，禁用无限滚动
      // event.target.disabled = true;
    }, 1000);
  }
}