// page-home.component.ts
import { Component, AfterViewInit, ViewChild, ElementRef, OnDestroy } from '@angular/core';
import Swiper from 'swiper';
import * as echarts from 'echarts';

@Component({
  selector: 'app-page-home',
  standalone: true,
  imports: [],
  templateUrl: './page-home.html',
  styleUrls: ['./page-home.scss']
})
export class PageHome implements AfterViewInit, OnDestroy {
  @ViewChild('swiperContainer') swiperContainer!: ElementRef;
  @ViewChild('galleryChart') galleryChart!: ElementRef;
  @ViewChild('xrChart') xrChart!: ElementRef;
  @ViewChild('dashboardChart') dashboardChart!: ElementRef;

  private swiper: any;
  private galleryChartInstance: any;
  private xrChartInstance: any;
  private dashboardChartInstance: any;

  // 示例数据 - 实际应用中可以从服务获取
  news = [
    { date: '06-25', title: '"数字赋能非遗传承"研讨会在南昌成功举办' },
    { date: '06-22', title: '江西文旅厅推出"云游江西"智慧旅游平台' },
    { date: '06-18', title: '景德镇陶瓷数字化博物馆正式对外开放' },
    { date: '06-15', title: '赣南采茶戏数字化保护工程启动' },
    { date: '06-12', title: '庐山智慧景区建设取得阶段性成果' }
  ];

  files = [
    { date: '06-24', title: '《江西省数字文化产业发展规划》正式发布' },
    { date: '06-20', title: '关于征集2023年度文化数字化项目的通知' },
    { date: '06-17', title: '非遗数字化保护技术标准（试行版）' },
    { date: '06-10', title: '文化数据资产登记与交易管理办法' },
    { date: '06-05', title: '智慧旅游景区建设指南（2023版）' }
  ];

  research = [
    { date: '06-23', title: '基于知识图谱的江西红色文化资源挖掘研究' },
    { date: '06-19', title: 'VR技术在古村落数字化保护中的应用探索' },
    { date: '06-16', title: '区块链在非遗传承人认证体系中的实践' },
    { date: '06-11', title: 'AIGC在地方文化IP创作中的创新应用' },
    { date: '06-08', title: '数字孪生技术在历史文化建筑保护中的实践' }
  ];

  ipList = [
    '景德镇陶瓷青年计划',
    '婺源油菜花艺术节',
    '庐山云雾茶文化IP',
    '赣南脐橙助农计划',
    '鄱阳湖生态旅游IP',
    '井冈山红色研学IP'
  ];

  ngAfterViewInit(): void {
    this.initSwiper();
    this.initCharts();
    window.addEventListener('resize', this.handleResize);
  }

  ngOnDestroy(): void {
    if (this.swiper) {
      this.swiper.destroy();
    }
    if (this.galleryChartInstance) {
      this.galleryChartInstance.dispose();
    }
    if (this.xrChartInstance) {
      this.xrChartInstance.dispose();
    }
    if (this.dashboardChartInstance) {
      this.dashboardChartInstance.dispose();
    }
    window.removeEventListener('resize', this.handleResize);
  }

  private initSwiper(): void {
    this.swiper = new Swiper(this.swiperContainer.nativeElement, {
      loop: true,
      autoplay: {
        delay: 5000,
        disableOnInteraction: false,
      },
      pagination: {
        el: '.swiper-pagination',
        clickable: true,
      },
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      on: {
        init: () => {
          this.swiperContainer.nativeElement.addEventListener('mouseenter', () => {
            this.swiper.autoplay.stop();
          });
          this.swiperContainer.nativeElement.addEventListener('mouseleave', () => {
            this.swiper.autoplay.start();
          });
        }
      }
    });
  }

  private initCharts(): void {
    this.galleryChartInstance = echarts.init(this.galleryChart.nativeElement);
    this.galleryChartInstance.setOption({
      tooltip: { trigger: 'axis' },
      legend: { data: ['作品数量', '用户访问量'] },
      grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
      xAxis: {
        type: 'category',
        data: ['陶瓷', '书画', '剪纸', '刺绣', '竹编', '漆器']
      },
      yAxis: { type: 'value' },
      series: [
        {
          name: '作品数量',
          type: 'bar',
          data: [45, 32, 28, 36, 22, 18],
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#2a5daa' },
              { offset: 1, color: '#4a86e8' }
            ])
          }
        },
        {
          name: '用户访问量',
          type: 'line',
          data: [120, 85, 92, 108, 75, 60],
          symbol: 'circle',
          symbolSize: 8,
          lineStyle: { color: '#e8c34d', width: 3 },
          itemStyle: { color: '#e8c34d', borderColor: '#fff', borderWidth: 2 }
        }
      ]
    });

    this.xrChartInstance = echarts.init(this.xrChart.nativeElement);
    this.xrChartInstance.setOption({
      tooltip: { trigger: 'item' },
      legend: { orient: 'horizontal', bottom: 'bottom' },
      series: [{
        name: '访问来源',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: { borderRadius: 10, borderColor: '#fff', borderWidth: 2 },
        label: { show: false, position: 'center' },
        emphasis: { label: { show: true, fontSize: '18', fontWeight: 'bold' } },
        labelLine: { show: false },
        data: [
          { value: 1048, name: '景德镇陶瓷馆' },
          { value: 735, name: '庐山云海' },
          { value: 580, name: '婺源古村落' },
          { value: 484, name: '井冈山革命博物馆' },
          { value: 300, name: '滕王阁' }
        ]
      }]
    });

    this.dashboardChartInstance = echarts.init(this.dashboardChart.nativeElement);
    this.dashboardChartInstance.setOption({
      tooltip: { trigger: 'axis' },
      legend: { data: ['会员数量', '项目数量', '资源总量'] },
      grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['1月', '2月', '3月', '4月', '5月', '6月']
      },
      yAxis: { type: 'value' },
      series: [
        {
          name: '会员数量',
          type: 'line',
          stack: 'Total',
          data: [120, 132, 201, 234, 290, 330],
          smooth: true,
          lineStyle: { width: 3, color: '#2a5daa' },
          symbol: 'circle',
          symbolSize: 8,
          itemStyle: { color: '#2a5daa', borderColor: '#fff', borderWidth: 2 },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(42, 93, 170, 0.5)' },
              { offset: 1, color: 'rgba(42, 93, 170, 0.1)' }
            ])
          }
        },
        {
          name: '项目数量',
          type: 'line',
          stack: 'Total',
          data: [45, 52, 70, 83, 95, 115],
          smooth: true,
          lineStyle: { width: 3, color: '#e8c34d' },
          symbol: 'circle',
          symbolSize: 8,
          itemStyle: { color: '#e8c34d', borderColor: '#fff', borderWidth: 2 },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(232, 195, 77, 0.5)' },
              { offset: 1, color: 'rgba(232, 195, 77, 0.1)' }
            ])
          }
        },
        {
          name: '资源总量',
          type: 'line',
          stack: 'Total',
          data: [320, 382, 491, 574, 663, 795],
          smooth: true,
          lineStyle: { width: 3, color: '#4a6b3d' },
          symbol: 'circle',
          symbolSize: 8,
          itemStyle: { color: '#4a6b3d', borderColor: '#fff', borderWidth: 2 },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: 'rgba(74, 107, 61, 0.5)' },
              { offset: 1, color: 'rgba(74, 107, 61, 0.1)' }
            ])
          }
        }
      ]
    });
  }

  private handleResize = () => {
    if (this.galleryChartInstance) this.galleryChartInstance.resize();
    if (this.xrChartInstance) this.xrChartInstance.resize();
    if (this.dashboardChartInstance) this.dashboardChartInstance.resize();
  }
}