<div
  class="screen"
  [class.alert-on]="alertLevel === 'orange'"
  [class.alert-red]="alertLevel === 'red'"
>
  <div class="left">
    <div class="chart-container" id="chartContainer">
      <div id="stationInfoTitle" class="station-info-title">{{ selectedTitle }}</div>
      <div class="chart-wrapper">
        <chart-panel [history]="history" [forecast]="forecast" [legendMode]="legendMode"></chart-panel>
      </div>
    </div>
    <div class="map-container" id="mapContainer">
      <div id="map"></div>
      <div
        id="tileValueTooltip"
        class="map-tooltip"
        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>
  <div class="right">
    <div class="controls">
      <label for="stationInput">站点:</label>
      <input
        id="stationInput"
        type="text"
        placeholder=""
        [(ngModel)]="hexId"
        style="width:7.5rem;"
      />

      <label for="interval">粒度:</label>
      <select id="interval" [(ngModel)]="interval">
        <option value="raw">原始(16s)</option>
        <option value="10min">10分钟</option>
        <option value="30min">30分钟</option>
        <option value="1hour">1小时</option>
      </select>

      <label for="forecastProvider">预报源:</label>
      <select id="forecastProvider" [(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 for="startDate">开始:</label>
      <input type="datetime-local" id="startDate" [(ngModel)]="start" />

      <label for="endDate">结束:</label>
      <input type="datetime-local" id="endDate" [(ngModel)]="end" />

      <button type="button" (click)="query()">查询</button>

      <label for="tileProduct">叠加:</label>
      <select id="tileProduct" [(ngModel)]="tileProduct" (change)="onProductChange()">
        <option value="none">不显示</option>
        <option value="rain">1h 实际降雨</option>
        <option value="radar">水汽含量</option>
      </select>

      <button type="button" (click)="prevTile()">上一时次</button>
      <span id="tileCountInfo">{{ tileCountInfo }}</span>
      <button type="button" (click)="nextTile()">下一时次</button>

      <label for="tileTimeSelect">时间:</label>
      <select
        id="tileTimeSelect"
        style="min-width:12rem"
        [(ngModel)]="tileDt"
        (ngModelChange)="renderTilesAt($event)"
      >
        <option [ngValue]="''">请选择时间</option>
        <option *ngFor="let t of tileTimes" [ngValue]="t">{{ t }}</option>
      </select>
    </div>

    <div
      id="summaryPanel"
      class="summary-panel"
      [class.alert-on]="alertLevel === 'orange'"
      [class.alert-red]="alertLevel === 'red'"
    >
      <div id="futureRainSummary" class="summary-title">{{ futureRainText }}</div>
      <div id="pastAccuracySummary" class="summary-sub">{{ pastAccuracyText }}</div>
    </div>

    <div class="table-container" id="tableContainer">
      <div class="table-scroll">
        <table-panel
          [history]="history"
          [forecast]="forecast"
          [showPastForecast]="false"
          [endDate]="end"></table-panel>
      </div>
    </div>
  </div>
</div>

<div class="loading-overlay" *ngIf="isLoading">
  <div class="spinner"></div>
</div>
