<template>
  <div class="key-boat-list">
    <span class="dialog-close" @click="handleClose"></span>
    <span class="title-dialog">{{props.listTitle}}</span>
    <template v-if="props.listData.length>0">
      <ul class="boat-list" ref="list">
        <li v-for="item, index in props.listData" class="list-item" @click="handleClick(item)">
          <span>{{ formatIndex(index+1) }}</span>
          <div>
            <span>{{item.boatName}}</span>
            <span>MMSI : {{item.mmsi}}</span>
            <span>{{item.velocity&&+item.velocity>=1?'航行中':'停泊中'}}</span>
          </div>
        </li>
      </ul>
    </template>
    <div class="no-data" v-else>
      无数据
    </div>
  </div>
</template>

<script>
export default {
  name: 'KeyBoatList',
}
</script>

<script setup>
  import { ref } from 'vue'
  import { ueCallPositionByType } from '@/utils/UIInteractions'

  import {locationBoat} from "@/utils/map/Boat";
  import bus from "@/utils/bus";
  const props = defineProps(['list-data', 'list-title'])

  const list = ref(null)

  function handleClick(item) {
    bus.emit('ueRec_BoatClick',{'mmsi':item.mmsi})
    setTimeout(() => {
      handleClose()
    }, 100);
  }

  const emit = defineEmits(['closeBoatList'])

  function handleClose() {
    emit('closeBoatList')
  }

  function formatIndex(index) {
    return index.toString().padStart(2, '0')
  }

</script>

<style lang="scss" scoped>
.key-boat-list {
  position: absolute;
  top: 60px;
  left: 360px;
  box-sizing: border-box;
  padding: 20px;
  width: 393px;
  height: 615px;
  overflow: hidden;
  background: url('@/assets/imgs/page_ssky/bg-popup.png') no-repeat;
  background-size: 100% 100%;

  .no-data {
    position: absolute;
    top: 50%;
    width: calc(100% - 40px);
    text-align: center;
    color: #eee;
  }

  .boat-list {
    height: calc(100% - 42px);
    box-sizing: border-box;
    margin-top: 18px;
    overflow-y: auto;

    .list-item {
      display: flex;
      align-items: center;
      margin: 0 10px 8px 0;
      width: calc(100% - 10px);
      cursor: pointer;

      &>span:nth-child(1) {
        display: inline-block;
        width: 20px;
        margin-right: 14px;
        height: 40px;
        font-size: 18px;
        line-height: 50px;
        font-family: BarlowBold;
        color: #FBFDFF;
        text-shadow: 0px 2px 10px rgba(2,28,34,0.71);
      }
      &>div {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        background: url('@/assets/imgs/page_ssky/bg-popup-line.png') no-repeat;
        background-size: 100% 4px;
        background-position: bottom;
        &>span:nth-child(1) {
          display: inline-block;
          width: 100px;
          font-size: 14px;
          font-weight: 400;
          color: #FBFDFF;
          text-shadow: 0px 2px 10px rgba(2,28,34,0.71);
        }
        &>span:nth-child(2) {
          display: inline-block;
          width: 110px;
          font-size: 14px;
          font-family: BarlowBold;
          color: #FBFDFF;
          text-shadow: 0px 2px 10px rgba(2,28,34,0.71);
        }
        &>span:nth-child(3) {
          display: inline-block;
          width: 95px;
          height: 28px;
          line-height: 28px;
          text-align: center;
          font-size: 14px;
          background: url('@/assets/imgs/page_ssky/bg-boat-status.png') no-repeat;
          background-size: 100% 100%;
        }
      }
    }
  }

}
</style>
