<template>
  <div id="showPortMessage"
       class="showShipMessage"
       style="min-width: 6.25rem">
    <div><span>{{ $t('message.portHoverView.chineseName') }}:&nbsp;</span>{{ shipFloatMes.portNameCn }}</div>
    <div><span>{{ $t('message.portHoverView.englishName') }}:&nbsp;</span>{{ shipFloatMes.portNameEn }}</div>
    <div><span>{{ $t('message.portHoverView.portCode') }}:&nbsp;</span>{{ shipFloatMes.portCode }}</div>
    <div><span>{{ $t('message.portHoverView.portPos') }}:&nbsp;</span>{{ shipFloatMes.portLatLon }}</div>
  </div>
</template>

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

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

  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>
