<app-header #hdr [onlineDevices]="onlineDevices" [stations]="stations" (selectStation)="onSelectStation($event)"></app-header>

<div class="border-b" style="border-color: #ddd;margin-bottom: 1em;">
  <div class="content-narrow mx-auto" style="max-width:1200px;">
    <h1 class="text-xl md:text-3xl font-semibold px-12 my-5" style="margin:0.8em 0; ">英卓气象站</h1>
  </div>
  
</div>

<div class="content-narrow mx-auto px-12" style="max-width:1200px; margin-bottom:3em;">
  <div *ngIf="isLoading" style="position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,0.2);display:flex;align-items:center;justify-content:center;">
    <div class="animate-spin" style="height:40px;width:40px;border:4px solid #e5e7eb;border-top-color:#2563eb;border-radius:9999px;"></div>
  </div>
  <div class="system-info bg-gray-100 p-3 mb-5 rounded text-sm border" style="border-color:#ddd;">
    <strong>在线设备: </strong> {{onlineDevices}} 个 |
    <strong>总设备: </strong>
    <a href="#" class="text-blue-600 hover:text-blue-700 underline-offset-2" (click)="$event.preventDefault(); hdr.open()">{{ wh65lpCount }} 个</a>
  </div>

  <div class="bg-white border rounded p-3 mb-4" style="border-color:#ddd;">
    <div class="flex flex-wrap items-center gap-3 mb-3">
      <label class="text-sm text-gray-600">站点编号</label>
      <input class="px-2 py-1 border rounded w-32 font-mono text-sm" [(ngModel)]="decimalId" placeholder="" />

      <label class="text-sm text-gray-600">地图类型</label>
      <select class="px-2 py-1 border rounded text-sm" [(ngModel)]="mapType" (change)="switchLayer(mapType)">
        <option value="satellite">卫星图</option>
        <option value="vector">矢量图</option>
        <option value="terrain">地形图</option>
        <option value="hybrid">混合地形图</option>
      </select>

      <label class="text-sm text-gray-600">预报源</label>
      <select class="px-2 py-1 border rounded text-sm" [(ngModel)]="provider">
        <option value="">不显示预报</option>
        <option value="imdroid_mix">英卓 V4</option>
        <option value="open-meteo">英卓 V3</option>
        <option value="caiyun">英卓 V2</option>
        <option value="imdroid">英卓 V1</option>
      </select>

      <label class="text-sm text-gray-600">图例</label>
      <select class="px-2 py-1 border rounded text-sm" [(ngModel)]="legendMode">
        <option value="combo_standard">综合</option>
        <option value="verify_all">全部对比</option>
        <option value="temp_compare">温度对比</option>
        <option value="hum_compare">湿度对比</option>
        <option value="rain_all">降水(+1/+2/+3h)</option>
        <option value="pressure_compare">气压对比</option>
        <option value="wind_compare">风速对比</option>
      </select>
    </div>

    <div class="flex flex-wrap items-center gap-3 mb-3">
      <label class="text-sm text-gray-600">数据粒度</label>
      <select class="px-2 py-1 border rounded text-sm" [(ngModel)]="interval">
        <option value="raw">原始(16s)</option>
        <option value="10min">10分钟</option>
        <option value="30min">30分钟</option>
        <option value="1hour">1小时</option>
      </select>

      <label class="text-sm text-gray-600">开始</label>
      <input type="datetime-local" class="px-2 py-1 border rounded text-sm" [(ngModel)]="start" />
      <label class="text-sm text-gray-600">结束</label>
      <input type="datetime-local" class="px-2 py-1 border rounded text-sm" [(ngModel)]="end" />
      <button class="bg-blue-600 text-white px-3 py-1 rounded text-sm" (click)="query()">查看历史数据</button>
    </div>

    <div class="flex flex-wrap items-center gap-3">
      <label class="text-sm text-gray-600">叠加显示</label>
      <select class="px-2 py-1 border rounded text-sm" [(ngModel)]="tileProduct" (change)="onProductChange()">
        <option value="none">不显示</option>
        <option value="radar">水汽含量</option>
        <option value="rain">1h 实际降雨</option>
      </select>

      <label class="text-sm text-gray-600">时间</label>
      <select class="px-2 py-1 border rounded text-sm min-w-[220px]" [(ngModel)]="tileDt" (change)="renderTilesAt(tileDt)">
        <option [ngValue]="''">请选择时间</option>
        <option *ngFor="let t of tileTimes" [ngValue]="t">{{t}}</option>
      </select>
      <button class="px-2 py-1 text-sm border rounded bg-white" (click)="prevTile()">上一时次</button>
      <span class="text-xs text-gray-800">共{{tileTimes.length}}条，第{{tileIndex>=0? (tileIndex+1):0}}条</span>
      <button class="px-2 py-1 text-sm border rounded bg-white" (click)="nextTile()">下一时次</button>
    </div>
  </div>

  <div id="mapContainer" class="rounded border mb-4" [ngClass]="{ 'collapsed': isMapCollapsed }" [style.borderColor]="'#ddd'" style="position:relative; overflow:hidden;" [style.height]="isMapCollapsed ? '38vh' : '60vh'">
    <div id="map" style="width:100%; height:100%;"></div>
    <button class="map-toggle-btn bg-blue-600 hover:bg-blue-700 text-white" style="position:absolute;top:10px;right:10px;z-index:1001;border-radius:4px;padding:5px 10px;font-size:12px;font-weight:bold;" (click)="toggleMap()">{{ isMapCollapsed ? '展开地图' : '折叠地图' }}</button>
    <div id="tileValueTooltip" style="position:absolute;pointer-events:none;z-index:1003;display:none;background:rgba(0,0,0,0.65);color:#fff;font-size:12px;padding:4px 6px;border-radius:4px;"></div>
  </div>
  
  <div *ngIf="showPanels" id="chartSection" class="border rounded p-3 mb-4" style="border-color:#ddd;">
    <div class="font-bold mb-5 mt-5 text-center">{{ selectedTitle }}</div>
    <chart-panel [history]="history" [forecast]="forecast" [legendMode]="legendMode"></chart-panel>
  </div>
  <table-panel *ngIf="showPanels" [history]="history" [forecast]="forecast" [showPastForecast]="showPastForecast" [endDate]="end"></table-panel>
</div>

<div style="height:3vh;"></div>
