<template>
  <div class="warning-ship-list">
    <span class="dialog-close" @click="handleClose"></span>
    <span class="title-dialog">船舶列表</span>
    <template v-if="props.listData.length>0">
      <ul class="boat-list">
        <li v-for="item, index in props.listData" class="list-item" @click="handleClick(item)">
          <span>{{ formatIndex(index+1) }}</span>
          <div>
            <div>
              <span>{{ item.boatName }}</span>
              <span>{{ item.warningTime.slice(5,16) }}</span>
            </div>
            <div>
              <span>靠泊企业</span>
              <span>{{ item.berthName }}</span>
              <span>{{ item.state }}</span>
            </div>
          </div>
        </li>
      </ul>
    </template>
    <div class="no-data" v-else>
      无数据
    </div>
  </div>
</template>

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

<script setup>

  import { onMounted, reactive, ref } from 'vue'

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

  onMounted(() => {
    
  })

  const emit = defineEmits(['closeList'])

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

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

</script>

<style lang="scss" scoped>
.warning-ship-list {
  position: absolute;
  width: 360px;
  height: 370px;
  bottom: 200px;
  left: -360px;
  box-sizing: border-box;
  padding: 25px 20px 25px 20px;
  overflow: hidden;
  background: url('@/assets/imgs/page_ssky/bg-popup.png') no-repeat;
  background-size: 100% 100%;

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

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

    .list-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 19px;
      overflow: hidden;

      &>span:nth-child(1) {
        display: inline-block;
        width: 20px;
        margin-right: 10px;
        height: 26px;
        font-size: 18px;
        line-height: 24px;
        font-family: BarlowBold;
        color: #FBFDFF;
        text-shadow: 0px 2px 10px rgba(2,28,34,0.71);
      }

      &>div {
        flex: 1;
        height: 55px;
        background: url('@/assets/imgs/page_yyjg/ent-item-bg.png') no-repeat;
        background-size: 100% 4px;
        background-position: bottom;
        &>div:first-child {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 2px 0 6px;
          &>span:first-child {
            font-size: 14px;
            font-weight: bold;
          }
          &>span:last-child {
            color: #ccc;
            font-size: 14px;
          }
        }
        &>div:last-child {
          display: flex;
          justify-content: space-between;
          align-items: center;
          &>span:nth-child(1) {
            font-size: 12px;
            font-weight: bold;
          }
          &>span:nth-child(2) {
            padding: 0 10px;
            flex: 1;
            font-size: 12px;
            color: #68c6f5;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          &>span:nth-child(3) {
            font-size: 12px;
            font-weight: bold;
            color: red;
          }
        }
      }
    }
  }

}
</style>
