import { Component, EnvironmentInjector, inject } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel, ModalController } from '@ionic/angular/standalone';

@Component({
  selector: 'app-tabs',
  templateUrl: 'tabs.page.html',
  styleUrls: ['tabs.page.scss'],
  standalone: true,
  imports: [IonTabs, IonTabBar, IonTabButton, IonIcon, IonLabel],
})
export class TabsPage {
  public environmentInjector = inject(EnvironmentInjector);
  constructor(private modalCtrl: ModalController,private router: Router, private route: ActivatedRoute) { }

  ngOnInit() {
    // 获取当前激活的 tab
    this.route.url.subscribe(url => {
      const fullPath = this.router.url; // 获取完整的当前路由
      const currentTab = fullPath.split('/').pop(); // 获取最后一部分作为当前 tab
      console.log(currentTab);
      this.changeStatus(currentTab as string);
    });
  }
  /*更改激活图标状态*/
  defaultSrc = {
    index: 'https://s1.imagehub.cc/images/2025/01/10/05e0d3d946096d0de3f98b7675cb7150.png',
    community: 'https://s1.imagehub.cc/images/2025/01/10/8bc1ff138c4982ac236042bb43934105.png',
    my: 'https://s1.imagehub.cc/images/2025/01/10/888ebde8d6866f1f7df8d6b384109bee.png'
  };
  changeStatus(id: string) {
    const element_index = document.getElementById('index') as HTMLImageElement;
    const element_community = document.getElementById('community') as HTMLImageElement;
    const element_my = document.getElementById('my') as HTMLImageElement;
    // 恢复其他元素的 src 为默认值
    if (id !== 'tab1') { element_index.src = this.defaultSrc.index; }
    if (id !== 'tab2') { element_community.src = this.defaultSrc.community; }
    if (id !== 'tab3') { element_my.src = this.defaultSrc.my; }
    // 清除之前的动画类
    element_index.classList.remove('animate');
    element_community.classList.remove('animate');
    element_my.classList.remove('animate');

    // 根据 id 设置当前元素的 src 并添加动画
    if (id === 'tab1') {
      element_index.src = 'https://s1.imagehub.cc/images/2025/01/10/0543f2a000861f7671ffe0afce7c39fe.png';
      element_index.classList.add('animate');
    } else if (id === 'tab2') {
      element_community.src = 'https://s1.imagehub.cc/images/2025/01/10/a3242c545972d383223e843cb8fec27e.png';
      element_community.classList.add('animate');
    } else {
      element_my.src = 'https://s1.imagehub.cc/images/2025/01/10/ce2df038038d90fff4a4c5c821c0ff96.png';
      element_my.classList.add('animate');
    }
  }
}