<template>
  <div class="q-pa-lg row q-gutter-md" style="padding: 0; margin: 0">
    <div class="box gauge--1">
      <div class="mask">
        <div class="semi-circle" :style="gaugeStyle"></div>
        <div class="semi-circle--mask" :style="gaugeMaskStyle"></div>
      </div>
      <div class="value">
        <div class="dku-extralarge-title-sb">{{ this.value }}%</div>
        <div class="dku-small-title-sb">Failure Risk</div>
      </div>
    </div>

    <div class="q-pl-lg self-end">
      <!-- <div class="dku-small-title">
        Those batch parameters usually lead to a {{ this.next_failure_rate }}%
        failure rate in the following batch.
      </div> -->
      <div class="dku-small-title q-mt-sm">
        The model detected
        <span class="dku-small-title-sb">
          {{ this.nb_features }} suspicious sensor values
        </span>
        in the previous batch
        <span>
          <q-icon
            name="info"
            size="xs"
            color="grey"
            style="margin-bottom: 5px"
          />
          <BsTooltip
            anchor="center right"
            self="center left"
            class="grey"
            style="font-size: 11px"
          >
            Previous batch description :
            <div v-for="attr in this.batch_attributes">
              - {{ attr["name"] }} : {{ attr["value"] }}
            </div>
          </BsTooltip>
        </span>
      </div>
      <div class="dku-small-title">
        These values are are ranked by significance and compared to average
        values leading to successful batches :
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "RiskGauge",
  props: {
    value: {
      type: Number,
    },
    nb_features: {
      type: Number,
    },
    batch_attributes: {
      type: Array,
    },
    next_failure_rate: {
      type: Number,
    },
  },
  computed: {
    gaugeStyle() {
      var backgroundColor = "#27a300";
      if (this.value > 20) {
        backgroundColor = "#ff7f00";
      }
      if (this.value > 40) {
        backgroundColor = "#E45545";
      }
      return {
        background: backgroundColor,
      };
    },
    gaugeMaskStyle() {
      return {
        transform: "rotate(" + (this.value * 180) / 100 + "deg)",
      };
    },
  },
};
</script>

<style scoped>
.gauge--1 {
  position: relative;
}

.value {
  position: absolute;
  bottom: 0%;
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 5;
}

.mask {
  position: relative;
  overflow: hidden;

  display: block;
  width: 200px;
  height: 100px;
}
.semi-circle {
  position: relative;

  display: block;
  width: 200px;
  height: 100px;

  border-radius: 50% 50% 50% 50% / 100% 100% 0% 0%;
}

.semi-circle:before {
  content: "";

  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 2;

  display: block;
  width: 140px;
  height: 70px;
  margin-left: -70px;

  background: #fff;

  border-radius: 50% 50% 50% 50% / 100% 100% 0% 0%;
}

.semi-circle--mask {
  position: absolute;
  top: 0;
  left: 0;

  width: 200px;
  height: 200px;

  background: transparent;

  transform: rotate(120deg) translate3d(0, 0, 0);
  transform-origin: center center;
  backface-visibility: hidden;
  transition: all 0.3s ease-in-out;
}

.semi-circle--mask:before {
  content: "";

  position: absolute;
  top: 0;
  left: 0%;
  z-index: 2;

  display: block;
  width: 202px;
  height: 102px;
  margin: -1px 0 0 -1px;

  background: #f2f2f2;

  border-radius: 50% 50% 50% 50% / 100% 100% 0% 0%;
}

.gauge--1 .semi-circle {
  background: #fff;
}
</style>
