import { CommonModule } from '@angular/common';
import { Component, EventEmitter, Input, Output, SimpleChanges } from '@angular/core';
import { SvgGroup } from '../../../classes/d3/d3.utils';
import { Station } from '../../../classes/d3/station.class';
import { LineD3Model, StationEvent } from './../../../classes/d3/line.class';

@Component({
  selector: 'line-airport',
  standalone: true,
  imports: [CommonModule],
  template: '<div class="line-airport"></div>',
  styles: [
    `
      .line-airport {
        width: 100%;
        height: 100%;
      }
    `,
  ],
})
export class LineAirportComponent extends LineD3Model {
  @Output() stationEvent = new EventEmitter<StationEvent>();

  @Input() data?: Datav.BoardInfo;
  // 主线路路径
  /**
   * <line x1="112.3" y1="46.3" x2="112.3" y2="34.2" style="fill: none; stroke: #276883; stroke-miterlimit: 10; stroke-width: 6px;"/>
  <path d="M87.1,134v-56.3c0-2.2,0-3,2.1-5.1l21-21c1.2-1.3,2.1-2.7,2.1-5.3v-12.9" style="fill: none; stroke: #276883; stroke-miterlimit: 10; stroke-width: 6px;"/>
  <path d="M286,339.3H100.3c-8.5,0-13.2-5.7-13.3-11.9v-193.4" style="fill: none; stroke: #276883; stroke-miterlimit: 10; stroke-width: 6px;"/>
  <line x1="334.8" y1="339.3" x2="286.6" y2="339.3" style="fill: none; stroke: #276883; stroke-miterlimit: 10; stroke-width: 6px;"/>
  <line x1="454.6" y1="339.3" x2="334.8" y2="339.3" style="fill: none; stroke: #276883; stroke-miterlimit: 10; stroke-width: 6px;"/>
  <line x1="818.9" y1="339.3" x2="454.6" y2="339.3" style="fill: none; stroke: #276883; stroke-miterlimit: 10; stroke-width: 6px;"/>
  <line x1="886.5" y1="339.3" x2="818.9" y2="339.3" style="fill: none; stroke: #276883; stroke-miterlimit: 10; stroke-width: 6px;"/>
  <path d="M1086,381.2v-35.6c0-3.7-2.8-6.2-7.5-6.2h-191.9" style="fill: none; stroke: #276883; stroke-miterlimit: 10; stroke-width: 6px;"/>
   */
  enableLinePaths = [
    `M112.3,46.3H112.3`,
    `M87.1,134v-56.3c0-2.2,0-3,2.1-5.1l21-21c1.2-1.3,2.1-2.7,2.1-5.3v-12.9`,
    `M286,339.3H100.3c-8.5,0-13.2-5.7-13.3-11.9v-193.4`,
    `M334.8,339.3H286.6`,
    `M454.6,339.3H334.8`,
    `M818.9,339.3H454.6`,
    `M886.5,339.3H818.9`,
    `M1086,381.2v-35.6c0-3.7-2.8-6.2-7.5-6.2h-191.9`,
  ];
  /**
   * <path d="M1020.4,413h57.6c4.5,0,8.1-3.6,8.1-8.1v-23.7" style="fill: none; stroke: #b3b3b3; stroke-miterlimit: 10; stroke-width: 6px;"/>
  <path d="M923.6,413h96.7" style="fill: none; stroke: #b3b3b3; stroke-miterlimit: 10; stroke-width: 6px;"/>
   */
  disableLinePaths: string[] = [`M1020.4,413h57.6c4.5,0,8.1-3.6,8.1-8.1v-23.7`, `M923.6,413h96.7`];

  // 所有站点信息
  override stationMetaList: Station[] = [
    { x: 111.9, y: 31.3, labelX: 51.1, labelY: 10.8, name: '虹桥2号航站楼站', endpoint: '', type: 'complex' },
    { x: 87.1, y: 127, labelX: 2, labelY: 131.5, name: '中春路站', endpoint: '', type: 'complex' },
    { x: 298, y: 339.3, labelX: 267.1, labelY: 373.6, name: '景洪路站', endpoint: '', type: 'complex' },
    { x: 466.9, y: 339.3, labelX: 435.1, labelY: 373.6, name: '三林南站', endpoint: '', type: 'simple' },
    { x: 831.2, y: 339.3, labelX: 796.1, labelY: 373.6, name: '康桥东站', endpoint: '', type: 'complex' },
    {
      x: 898.9,
      y: 339.3,
      labelX: 850.9,
      labelY: 286.2,
      name: '上海国际旅游',
      type: 'simple',
      subLabel: { x: 851.6, y: 307.5, text: '度假区站' },
      endpoint: '上海国际旅游度假区站',
    },
    {
      x: 1086,
      y: 381.2,
      labelX: 1118.7,
      labelY: 377.4,
      name: '浦东1号2号',
      subLabel: { x: 1118.7, y: 397.4, text: '航站楼站' },
      endpoint: '浦东1号2号航站楼站',
      type: 'complex',
    },
    {
      x: 1020.4,
      y: 413,
      labelX: 988.4,
      labelY: 448.1,
      name: '浦东3号',
      subLabel: { x: 988.4, y: 467.1, text: '航站楼站' },
      endpoint: '浦东3号航站楼站',
      type: 'simple',
      disabled: true,
    },
    {
      x: 923.6,
      y: 413,
      labelX: 883.6,
      labelY: 448.1,
      name: '上海东站站',
      endpoint: '上海东站站',
      type: 'simple',
      disabled: true,
    },
  ];

  mainLineSvg?: SvgGroup;

  constructor() {
    super();
  }
  ngOnChanges(changes: SimpleChanges) {
    if (changes['data']) {
      if (this.data) {
        this.setStationsData(this.data);
      }
    }
  }
  ngAfterViewInit() {
    this.initializeSvg();
    this.initializeZoom(); // 添加初始化缩放
    // 绘制主线路
    this.renderMainLine(this.rootGroup!);
    // 绘制站点
    this.renderStations();

    this.renderZoomTool();

    this.stationEventSubject.subscribe(event => {
      this.stationEvent.emit(event);
    });
  }

  renderMainLine(rootGroup: SvgGroup) {
    const g = rootGroup.append('g');
    this.enableLinePaths.forEach(path => {
      g.attr('opacity', 0.2);
      g.append('path').attr('d', path).attr('fill', 'none').attr('stroke', '#f7f2ff').attr('stroke-width', 12);
      rootGroup
        .append('g')
        .append('path')
        .attr('d', path)
        .attr('fill', 'none')
        .attr('stroke', '#276883')
        .attr('stroke-width', 6);
    });
    this.disableLinePaths.forEach(path => {
      g.attr('opacity', 0.2);
      g.append('path').attr('d', path).attr('fill', 'none').attr('stroke', '#f7f2ff').attr('stroke-width', 12);
      rootGroup
        .append('g')
        .append('path')
        .attr('d', path)
        .attr('fill', 'none')
        .attr('stroke', '#b3b3b3')
        .attr('stroke-width', 6);
    });

    this.mainLineSvg = g;
  }
}
