<template>
  <div class="d-flex flex-column">
    <div class="px-2 d-flex justify-content-between">
      <div class="d-flex">
        <div @click="show = !show" class="my-auto text-left">
          <UISpinnerButton
            :state="show"
            :icons="['angle-right', 'angle-down']"
            classes="text-info"
          />
        </div>
        <div>
          {{ line["fk-gauge-id"] }}
          <sup v-if="isNew(line)" class="text-success">
            (<translate>New</translate>)
          </sup>
        </div>
      </div>
      <div>{{ line["measure-date"] | dateTime }}</div>
    </div>
    <div v-if="show" class="compare-table">
      <div class="row no-gutters px-4 text-left font-weight-bold">
        <div :class="isNew(line) ? 'col-6' : 'col-4'">
          <translate>Value</translate>
        </div>
        <div v-if="isOld(line)" class="col-4">
          <translate>Old</translate>
        </div>
        <div :class="isNew(line) ? 'col-6' : 'col-4'">
          <translate>New</translate>
        </div>
      </div>
      <div
        class="row no-gutters px-4 text-left"
        v-for="(entry, index) in Object.keys(line.versions[0])"
        :key="index"
        v-if="isNew(line) || isDifferent(line, entry)"
      >
        <div :class="isNew(line) ? 'col-6' : 'col-4'">
          {{ entry }}
        </div>
        <div :class="isNew(line) ? 'col-6' : 'col-4'">
          {{ line.versions[0][entry] }}
        </div>
        <div
          v-if="isOld(line) && isDifferent(line, entry)"
          :class="isNew(line) ? 'col-6' : 'col-4'"
        >
          {{ line.versions[1][entry] }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["line", "index", "showDiff"],
  data() {
    return {
      show: this.index == this.showDiff
    };
  },
  methods: {
    isNew(result) {
      return result && result.versions && result.versions.length === 1;
    },
    isOld(result) {
      return !this.isNew(result);
    },
    isDifferent(result, entry) {
      return (
        this.isOld(result) &&
        result.versions[0][entry] != result.versions[1][entry]
      );
    }
  }
};
</script>

<style lang="sass" scoped>
.diffs
  width: 100%
  overflow-y: auto
  > div
    border-top: dashed 1px #dee2e6
    &:first-child
      border-top: none
    .compare-table
      position: relative
      overflow: hidden
      &::after
        content: ''
        position: absolute
        top: 0
        right: -5px
        bottom: 0
        left: -5px
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.4)
      > div
        font-size: 0.7rem
        &:nth-child(odd)
          background-color: #f8f9fa

.split
  max-height: 35vh

.full
  max-height: 70vh
</style>