<template>
  <div class="ship-type-box" id="ship-type-box">
    <ul>
      <li v-for="(item,index) in shipTypes" :key="index">
        <div :style="'background-color:'+ item.color"></div>
        <span>{{ language === 'zh' ? item.name : item.tran }}</span>
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import {Vue, Component} from 'vue-property-decorator'

@Component({})
export default class MapBottomShipType extends Vue {
  private language = window.localStorage.getItem('language')
  private shipTypes: any[] = [
    {
      name: '货船',
      tran: 'Cargo Ship',
      color: '#BD3154'
    },
    {
      name: '游艇',
      tran: 'Fishing vessel',
      color: '#FFC24D'
    }
  ]

  public mounted() {
    window.addEventListener('setItemEvent', (e: any) => {
      if (e.key === 'language') {
        this.language = e.newValue
      }
    })
  }
}
</script>

<style scoped lang="scss">
.ship-type-box {
  position: absolute;
  display: flex;
  align-items: center;
  height: 2.5rem;
  z-index: 999;
  right: 1.25rem;
  bottom: 1.25rem;
  border-radius: 0.25rem;
  background-color: #FFFFFF;
  color: #333333;
  padding: 0 0 0 1.25rem;

  ul {
    width: 100%;
    display: flex;
    margin-right: 0.625rem;
    padding: 0 0.3125rem;
    line-height: 0.625rem;
    justify-content: space-between;

    li {
      :first-child {
        display: inline-block;
        border-radius: 0.5625rem;
        width: 0.5625rem;
        height: 0.5625rem;
        margin-right: 0.25rem;
      }

      font-size: 0.75rem;
      display: inline-block;
      margin-right: 0.625rem;
    }
  }
}
</style>
