<template>
  <div id="showShipMessage"
       class="showShipMessage"
       style="min-width: 6.25rem">
    <div>{{ $t('message.ShipHoverView.shipName') }}&nbsp;{{ shipFloatMes.shipnameEn }}</div>
    <div>{{ $t('message.ShipHoverView.mmsi') }}&nbsp;{{ shipFloatMes.mmsi }}</div>
    <div>{{ $t('message.ShipHoverView.lon') }}&nbsp;{{ shipFloatMes.lon }}</div>
    <div>{{ $t('message.ShipHoverView.lat') }}&nbsp;{{ shipFloatMes.lat }}</div>
    <div>{{ $t('message.ShipHoverView.time') }}&nbsp;{{ formatDate(shipFloatMes.time) }}
    </div>
  </div>
</template>

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

@Component({})
export default class ShipHoverView 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>
