<template>
  <div id="showPathPointMessage"
       class="showShipMessage"
       style="min-width: 6.25rem">
    <div>{{ $t('message.TrackHoverView.course') }}&nbsp;{{ shipFloatMes.heading }}°</div>
    <div>{{ $t('message.TrackHoverView.Speed') }}&nbsp;{{ shipFloatMes.sog }}knot</div>
    <div>{{ $t('message.TrackHoverView.time') }}&nbsp;{{ formatDate(shipFloatMes.time) }}</div>
  </div>
</template>

<script lang="ts">
import {Vue, Component} from 'vue-property-decorator'
import store from "@/util/store";
import {getTimeForLong} from "@/util/date";

@Component({})
export default class TrackHoverView extends Vue {
  private shipFloatMes: any = {}

  private formatDate(time: any) {
    return getTimeForLong(time * 1000, 'YYYY-MM-DD hh:mm:ss')
  }

  public mounted() {
    this.$nextTick(() => {
      (store.getMapFun() as any).showShipPathMessage(store.getMapInstance(), this)
    })
  }
}
</script>

<style scoped lang="scss">
.showShipMessage {
  position: absolute;
  padding: 0.625rem;
  background-color: white;
  font-size: 0.75rem;
  border-radius: 0.625rem;
  text-align: left;
  top: 0.625rem;
  left: 0.625rem;
  white-space: nowrap;

  div {
    height: 1.25rem;
    line-height: 1.25rem;
  }
}
</style>
