<template>
  <div class="boat-dock-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" v-if="props.listData[0].mmsi" ref="list">
        <li v-for="item, index in props.listData" class="list-item" @click="handleClick(item)">
          <span>{{ formatIndex(index+1) }}</span>
          <div>
            <span>{{item.shipName}}</span>
            <span>MMSI : {{item.mmsi}}</span>
            <span>{{item.velocity&&+item.velocity>=1?'航行中':'停泊中'}}</span>
          </div>
        </li>
      </ul>
      <ul class="dock-list" v-else ref="list">
        <li v-for="item, index in props.listData" class="list-item" @click="handleClick(item)">
          <span>{{ formatIndex(index+1) }}</span>
          <span>{{item.pierName}}</span>
        </li>
      </ul>
    </template>
    <div class="no-data" v-else>
      无数据
    </div>
    <!-- <transition name="loading">
      <div class="loading" v-if="showLoading">加载中...</div>
    </transition> -->
  </div>
</template>

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

<script setup>
  import { onMounted, reactive, ref } from 'vue'
  // import { useInfiniteScroll } from '@vueuse/core'
  import { ueCallPositionByType } from '@/utils/UIInteractions'
  import bus from '@/utils/bus';

  const props = defineProps(['list-data', 'list-title'])

  // const listSlice = reactive({value: []})

  // onMounted(() => {
  //   if(props.listData.length>0) {
  //     listSlice.value = props.listData.slice(0, 15)
  //   }
  // })

  // const showLoading = ref(false)

  const list = ref(null)

  // useInfiniteScroll(
  //   list,
  //   () => {
  //     // load more
  //     const length = listSlice.value.length
  //     if(length<props.listData.length) {
  //       showLoading.value = true
  //       setTimeout(() => {
  //         listSlice.value.push(...props.listData.slice(length, length+15))
  //         showLoading.value = false
  //       }, 1000);
  //     }
  //   },
  //   { distance: 10 }
  // )

  function handleClick(item) {
    let position_type; let position_name;
    switch(props.listTitle) {
      case '码头信息':
        position_type = 'lymt'
        position_name = item.pierName
        break
      case '渡口信息':
        position_type = 'mt'
        position_name = item.pierName
        break
      default:
        position_type = 'boat'
        position_name = item.mmsi
    }
    ueCallPositionByType(position_type, position_name)
    // bus.emit('ueRec_BoatClick', { mmsi: item.mmsi, where: 'HPJ'})
  }

  const emit = defineEmits(['closeBoatList'])

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

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

</script>

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

  .no-data {
    margin: 330px 10px 0 0;
    text-align: center;
    color: #eee;
  }

  // .loading {
  //   position: absolute;
  //   bottom: 0;
  //   left: 0;
  //   width: 100%;
  //   height: 40px;
  //   text-align: center;
  //   color: #ddd;
  //   font-size: 14px;
  //   line-height: 40px;
  //   background: linear-gradient(0deg, rgb(26, 48, 86, 1) 0%, rgba(26, 48, 86, 0.2) 100%);
  // }


  // .loading-enter-active,.loading-leave-active{
  //   transition: all 0.2s ease;
  // }
  // .loading-enter-from,.loading-leave-to {
  //   opacity: 0;
  //   transform: translateY(40px);
  // }

  .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: 130px;
          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%;
        }
      }
    }
  }
  .dock-list {
    height: calc(100% - 42px);
    box-sizing: border-box;
    margin-top: 18px;
    overflow-y: auto;
    .list-item {
      cursor: pointer;
      margin: 0 10px 8px 0;
      display: flex;
      align-items: center;
      
      span:nth-child(1) {
        display: inline-block;
        width: 20px;
        margin-right: 14px;
        height: 40px;
        font-size: 18px;
        line-height: 45px;
        font-family: BarlowBold;
        color: #FBFDFF;
        text-shadow: 0px 2px 10px rgba(2,28,34,0.71);
      }
      span:nth-child(2) {
        display: inline-block;
        flex: 1;
        height: 40px;
        font-size: 16px;
        font-family: BarlowBold;
        line-height: 40px;
        color: #FBFDFF;
        text-shadow: 0px 2px 10px rgba(2,28,34,0.71);
        background: url('@/assets/imgs/page_ssky/bg-popup-line.png') no-repeat;
        background-size: 100% 4px;
        background-position: bottom;
      }
    }
  }

}
</style>
