// page-vibration-monitor.component.ts
import { Component, AfterViewInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Swiper } from 'swiper';
import { Navigation, Pagination, Autoplay } from 'swiper/modules';
import * as echarts from 'echarts';

@Component({
  selector: 'app-page-vibration-monitor',
  standalone: true,
  imports: [CommonModule, FormsModule],
  templateUrl: './page-vibration-monitor.component.html',
  styleUrls: ['./page-vibration-monitor.component.scss']
})
export class PageVibrationMonitorComponent implements AfterViewInit {
  searchQuery = '';
  
  ngAfterViewInit(): void {
    this.initKnowledgeGraph();
    this.initSwiper();
    this.setupEventListeners();
    //jia
    
  }

  private initKnowledgeGraph(): void {
    const graphChart = echarts.init(document.getElementById('knowledge-graph'));
    const graphOption = {
      title: {
        text: '协会组织架构知识图谱',
        subtext: '点击节点查看详细信息',
        left: 'center'
      },
      tooltip: {},
      legend: {
        data: ['部门', '人员'],
        orient: 'vertical',
        right: 10
      },
      series: [{
        name: '协会组织架构',
        type: 'graph',
        layout: 'force',
        data: [
          {id: '1', name: '理事会', category: 0, symbolSize: 50},
          {id: '2', name: '秘书处', category: 0, symbolSize: 40},
          {id: '3', name: '学术委员会', category: 0, symbolSize: 40},
          {id: '4', name: '培训部', category: 0, symbolSize: 35},
          {id: '5', name: '国际交流部', category: 0, symbolSize: 35},
          {id: '6', name: '张明远', category: 1, symbolSize: 30},
          {id: '7', name: '李静怡', category: 1, symbolSize: 25},
          {id: '8', name: '王建国', category: 1, symbolSize: 25},
          {id: '9', name: '赵雨晴', category: 1, symbolSize: 25},
          {id: '10', name: '陈教授', category: 1, symbolSize: 20},
          {id: '11', name: '刘主任', category: 1, symbolSize: 20}
        ],
        links: [
          {source: '1', target: '2'},
          {source: '1', target: '3'},
          {source: '1', target: '4'},
          {source: '1', target: '5'},
          {source: '6', target: '1'},
          {source: '7', target: '1'},
          {source: '8', target: '2'},
          {source: '9', target: '2'},
          {source: '10', target: '3'},
          {source: '11', target: '4'}
        ],
        categories: [
          {name: '部门'},
          {name: '人员'}
        ],
        roam: true,
        label: {
          show: true,
          position: 'right'
        },
        force: {
          repulsion: 100,
          edgeLength: [50, 100]
        },
        emphasis: {
          focus: 'adjacency',
          label: {
            show: true
          }
        },
        lineStyle: {
          width: 1,
          curveness: 0.2
        }
      }],
      color: ['#3498db', '#2ecc71']
    };
    graphChart.setOption(graphOption);

    window.addEventListener('resize', function() {
      graphChart.resize();
    });
  }

  private initSwiper(): void {
    new Swiper('.swiper', {
      modules: [Navigation, Pagination, Autoplay],
      loop: true,
      autoplay: {
        delay: 5000,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });
  }

  private setupEventListeners(): void {
    // AR名片按钮点击效果
    document.querySelectorAll('.ar-card-btn').forEach(btn => {
      btn.addEventListener('click', (e) => {
        const target = e.target as HTMLElement;
        const card = target.closest('.ar-card');
        if (card) {
          card.classList.add('animate__animated', 'animate__pulse');
          setTimeout(() => {
            card.classList.remove('animate__animated', 'animate__pulse');
          }, 1000);
          
          const name = card.querySelector('.ar-card-name')?.textContent;
          const title = card.querySelector('.ar-card-title')?.textContent;
          alert(`请使用手机扫描二维码查看AR名片效果\n\n姓名: ${name}\n职位: ${title}`);
        }
      });
    });
  }

  onSearch(searchInput: HTMLInputElement, searchBtn: HTMLElement): void {
    if (searchInput.value.trim() === '') {
      searchInput.classList.add('animate__animated', 'animate__shakeX');
      setTimeout(() => {
        searchInput.classList.remove('animate__animated', 'animate__shakeX');
      }, 1000);
    } else {
      const originalHtml = searchBtn.innerHTML;
      searchBtn.innerHTML = '<i class="fas fa-spinner fa-spin"></i>';
      setTimeout(() => {
        searchBtn.innerHTML = originalHtml;
        alert(`搜索关键词: ${searchInput.value}\n\n模拟搜索功能，实际应用中会显示真实结果`);
      }, 1000);
    }
  }
}
