<template>
  <div class="d-flex flex-column mt-4 pt-4 border-top">
    <div class="d-flex flex-row justify-content-between">
      <h5><translate>Data Availability/Accuracy</translate></h5>
    </div>
    <div class="mt-1">
      <h6 class="font-weight-bold">
        <translate>Currency of Bottleneck Surveys</translate>
      </h6>

      <div class="d-flex text-center">
        <div class="card rounded-left">
          <div class="card-header text-white bg-success">OK</div>
          <div
            class="card-body d-flex align-items-center justify-content-center"
          >
            Last survey within revisiting time.
          </div>
        </div>
        <div class="card border-left-0 border-right-0 rounded-0">
          <div class="card-header text-white bg-warning rounded-0">Warning</div>
          <div
            class="card-body d-flex flex-column align-items-center justify-content-center"
          >
            <div>Last survey within revisiting time</div>
            <div>
              x
              <input
                type="number"
                step="0.1"
                min="1"
                class="form-control form-control-sm d-inline"
                style="width: 70px"
                v-model="bn_revtime_multiplier"
              />
            </div>
          </div>
        </div>
        <div class="card rounded-right">
          <div class="card-header text-white bg-danger">Critical</div>
          <div
            class="card-body d-flex align-items-center justify-content-center"
          >
            <div>
              Last survey older than revisiting time x
              <b>{{ Number(bn_revtime_multiplier).toLocaleString() }}</b>
            </div>
          </div>
        </div>
      </div>

      <h6 class="mt-4 font-weight-bold">
        <translate>Availability of Gauge Measurements</translate>
      </h6>

      <div class="d-flex text-center">
        <div class="card rounded-left">
          <div class="card-header text-white bg-success">OK</div>
          <div
            class="card-body d-flex align-items-center justify-content-center"
          >
            <div>
              Latest measurement not older than
              <b>{{ Number(gm_latest_hours).toLocaleString() }}</b> hours and at
              least
              <b>{{ Number(gm_min_values_14d).toLocaleString() }}</b>
              measurements in the last 14 days
            </div>
          </div>
        </div>
        <div class="card border-left-0 border-right-0 rounded-0">
          <div class="card-header text-white bg-warning rounded-0">Warning</div>
          <div
            class="card-body d-flex flex-column align-items-center justify-content-center"
          >
            <div>Minimum number of measurements in the last 14 days:</div>
            <div>
              <input
                type="number"
                step="1"
                min="1"
                class="form-control form-control-sm d-inline"
                style="width: 90px"
                v-model="gm_min_values_14d"
              />
            </div>
          </div>
        </div>
        <div class="card rounded-right">
          <div class="card-header text-white bg-danger">Critical</div>

          <div
            class="card-body d-flex flex-column align-items-center justify-content-center"
          >
            <div>Latest measurement older than</div>
            <div>
              <input
                type="number"
                step="1"
                min="1"
                class="form-control form-control-sm d-inline"
                style="width: 70px"
                v-model="gm_latest_hours"
              />
              hours
            </div>
          </div>
        </div>
      </div>

      <h6 class="mt-4 font-weight-bold">
        <translate>Gauge Forecast Confidence</translate>
      </h6>

      <div class="d-flex text-center">
        <div class="card rounded-left">
          <div class="card-header text-white bg-success">OK</div>
          <div
            class="card-body d-flex align-items-center justify-content-center"
          >
            <div>
              Confidence offset within last 24 hours less than
              <b>{{ Number(gm_forecast_offset_24h).toLocaleString() }} cm</b>
              and within last 72 hours less than
              <b>{{ Number(gm_forecast_offset_72h).toLocaleString() }} cm</b>
            </div>
          </div>
        </div>
        <div class="card border-left-0 border-right-0 rounded-0">
          <div class="card-header text-white bg-warning rounded-0">Warning</div>
          <div
            class="card-body d-flex flex-column align-items-center justify-content-center"
          >
            <div>Confidence offset within last 24 hours greater than:</div>
            <div>
              <input
                type="number"
                step="1"
                min="1"
                class="form-control form-control-sm d-inline"
                style="width: 70px"
                v-model="gm_forecast_offset_24h"
              />
              cm
            </div>
          </div>
        </div>
        <div class="card rounded-right">
          <div class="card-header text-white bg-danger">Critical</div>

          <div
            class="card-body d-flex flex-column align-items-center justify-content-center"
          >
            <div>Confidence offset within last 72 hours greater than:</div>
            <div>
              <input
                type="number"
                step="1"
                min="1"
                class="form-control form-control-sm d-inline"
                style="width: 70px"
                v-model="gm_forecast_offset_72h"
              />
              cm
            </div>
          </div>
        </div>
      </div>

      <h6 class="mt-4 font-weight-bold">
        <translate>Gauge Forecast vs. Reality</translate>
      </h6>

      <div class="d-flex text-center">
        <div class="card rounded-left">
          <div class="card-header text-white bg-success">OK</div>
          <div
            class="card-body d-flex align-items-center justify-content-center"
          >
            <div>
              Nash-Sutcliffe-Coefficient for last 24 hours greater than
              <b>{{
                Number(gm_forecast_vs_reality_nsc_24h).toLocaleString()
              }}</b>
              and for last 72 hours greater than
              <b
                >{{
                  Number(gm_forecast_vs_reality_nsc_72h).toLocaleString()
                }}
                cm</b
              >
            </div>
          </div>
        </div>
        <div class="card border-left-0 border-right-0 rounded-0">
          <div class="card-header text-white bg-warning rounded-0">Warning</div>
          <div
            class="card-body d-flex flex-column align-items-center justify-content-center"
          >
            <div>Nash-Sutcliffe-Coefficient for last 24 hours less than:</div>
            <div>
              <input
                type="number"
                step="1"
                class="form-control form-control-sm d-inline"
                style="width: 70px"
                v-model="gm_forecast_vs_reality_nsc_24h"
              />
            </div>
          </div>
        </div>
        <div class="card rounded-right">
          <div class="card-header text-white bg-danger">Critical</div>

          <div
            class="card-body d-flex flex-column align-items-center justify-content-center"
          >
            <div>Nash-Sutcliffe-Coefficient for last 72 hours less than:</div>
            <div>
              <input
                type="number"
                step="1"
                class="form-control form-control-sm d-inline"
                style="width: 70px"
                v-model="gm_forecast_vs_reality_nsc_72h"
              />
            </div>
          </div>
        </div>
      </div>

      <div class="mt-4">
        <a @click.prevent="submit" class="btn btn-info text-white">
          <translate>Send</translate>
        </a>
      </div>
    </div>
  </div>
</template>

<style lang="sass" scoped>
.card
  width: 33%
.rounded-left,
.rounded-left .card-header
  border-top-right-radius: 0
  border-bottom-right-radius: 0
.rounded-right
.rounded-right .card-header
  border-top-left-radius: 0
  border-bottom-left-radius: 0
.card-header
  padding: 0.25rem
.card-body
  padding: 0.5rem
</style>

<script>
/* This is Free Software under GNU Affero General Public License v >= 3.0
 * without warranty, see README.md and license for details.
 *
 * SPDX-License-Identifier: AGPL-3.0-or-later
 * License-Filename: LICENSES/AGPL-3.0.txt
 *
 * Copyright (C) 2018 by via donau
 *   – Österreichische Wasserstraßen-Gesellschaft mbH
 * Software engineering by Intevation GmbH
 *
 * Author(s):
 * Markus Kottländer <markus@intevation.de>
 */

export default {
  data() {
    return {
      bn_revtime_multiplier: 1.5,
      gm_min_values_14d: 1124,
      gm_latest_hours: 24,
      gm_forecast_offset_24h: 15,
      gm_forecast_offset_72h: 15,
      gm_forecast_vs_reality_nsc_24h: -12.5,
      gm_forecast_vs_reality_nsc_72h: -12.5
    };
  },
  methods: {
    submit() {
      console.log(this.bottleneck_surveys_revtime_multiplier);
    }
  }
};
</script>