import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-tab3',
  standalone: true,
  imports: [CommonModule, IonicModule, FormsModule],
  templateUrl: './tab3.page.html',
  styleUrls: ['./tab3.page.scss'],
})
export class Tab3Page implements AfterViewInit {
  @ViewChild('scrollContainer') scrollContainer!: ElementRef;

  editMode = false;

  tabs = ['全部', '武器', '手套', '刀', '贴纸', '音乐盒', '探员', '收藏品', '布章', '涂鸦'];
  activeTab = '武器';

  activeFilter = 'filter';

  items = [
    {
      id: 1,
      name: 'AWP | 二西莫夫 (崭新出厂)',
      wear: '0.012345',
      price: 1299,
      image: 'assets/images/AWP.jpg',
      selected: false,
    },
    {
      id: 2,
      name: 'M4A4 | 二西莫夫 (久经沙场)',
      wear: '0.234567',
      price: 599,
      image: 'assets/images/A4.jpg',
      selected: false,
    },
    {
      id: 3,
      name: 'AK-47 | 燃料喷射器 (略有磨损)',
      wear: '0.123456',
      price: 899,
      image: 'assets/images/AK2.jpg',
      selected: false,
    },
    {
      id: 4,
      name: '手套 | 深红之网 (战痕累累)',
      wear: '0.456789',
      price: 2499,
      image: 'assets/images/Glove.jpg',
      selected: false,
    },
    {
      id: 5,
      name: '蝴蝶刀 | 渐变大理石 (崭新出厂)',
      wear: '0.001234',
      price: 5999,
      image: 'assets/images/Knife.jpg',
      selected: false,
    },
    {
      id: 6,
      name: '沙漠之鹰 | 印花集 (崭新出厂)',
      wear: '0.012345',
      price: 399,
      image: 'assets/images/Degou.jpg',
      selected: false,
    },
  ];

  ngAfterViewInit() {
    // 可以初始化滚动监听等逻辑
  }

  selectTab(tab: string) {
    this.activeTab = tab;
    console.log('选中了标签:', tab);
    // TODO: 根据标签过滤items
  }

  setFilter(type: string) {
    this.activeFilter = type;
    console.log('选中了筛选工具:', type);
    // TODO: 打开对应的筛选/排序/搜索界面
  }

  toggleEditMode() {
    this.editMode = !this.editMode;
    if (!this.editMode) {
      this.items.forEach(item => (item.selected = false));
    }
  }

  onCheckboxChange(item: any, event: Event) {
    // 双向绑定已处理选中状态
  }

  onCardClick(item: any, event: MouseEvent) {
    const target = event.target as HTMLElement;
    if (this.editMode && !target.classList.contains('item-checkbox')) {
      item.selected = !item.selected;
    }
  }

  cancelEdit() {
    this.editMode = false;
    this.items.forEach(item => (item.selected = false));
  }

  batchPutOnSale() {
    const selectedItems = this.items.filter(item => item.selected);
    console.log('批量上架:', selectedItems);
    // TODO: 批量上架逻辑
  }

  batchOperate() {
    const selectedItems = this.items.filter(item => item.selected);
    console.log('批量操作:', selectedItems);
    // TODO: 批量操作逻辑
  }

  onScroll(event: any) {
    const element = event.target;
    if (element.scrollHeight - element.scrollTop === element.clientHeight) {
      console.log('滚动到底部，加载更多饰品');
      this.loadMoreItems();
    }
  }

  loadMoreItems() {
    const newId = this.items.length + 1;
    this.items.push({
      id: newId,
      name: `新饰品 ${newId}`,
      wear: '0.000000',
      price: 100,
      image: 'assets/images/A4.jpg',
      selected: false,
    });
  }
}
