<template>
  <div class="warning-ship-list">
    <span class="dialog-close" @click="handleClose"></span>
    <span class="title-dialog">船舶列表</span>
    <template v-if="listData.value.length>0">
      <ul class="boat-list" ref="list">
        <li v-for="item,index in listData.value" class="list-item">
          <span>{{ formatIndex(index+1) }}</span>
          <div>
            <div>
              <span>{{ item.boatName || '--' }}</span>
            </div>
            <div>
              <div v-if="item.des!==null" @click="handleShowPic(item)">
                <span>覆盖率</span>
                <span :class="{'isLow': +item.des.slice(0,2)<=30}">{{ item.des }}</span>
              </div>
              <span>{{ item.warningTime }}</span>
            </div>
          </div>
        </li>
      </ul>
    </template>
    <div class="no-data" v-else>
      {{ pageTips }}
    </div>
    <transition name="loading">
      <div class="loading" v-if="showLoading">查询中...</div>
    </transition>
  </div>
</template>

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

<script setup>
  import { watch, reactive, ref } from 'vue'
  import { GetYjcb } from '@/apis/kkjk'
  import { useInfiniteScroll } from '@vueuse/core'
  import bus from '@/utils/bus';

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

  const pageTips = ref('')

  const listData = reactive({value: []})

  let pageNum = 1
  let pageSize = 10

  watch(()=>props.queryData, (val) => {
    pageTips.value = '查询中...'
    GetYjcb(val.id, pageNum, pageSize).then(res => {
      if(res.data?.Rows.length>0) {
        listData.value = res.data.Rows
      } else {
        pageTips.value = '无数据'
      }
    })
  },{immediate: true})

  
  const list = ref(null)
  const showLoading = ref(false)
  const hasMore = ref(true)

  useInfiniteScroll(
    list,
    () => {
      if(listData.value.length%pageSize===0&&hasMore.value) {
        showLoading.value = true
        pageNum++
        GetYjcb(props.queryData.id, pageNum, pageSize).then(res => {
          if(res.data?.Rows.length>0) {
            listData.value.push(...res.data.Rows)
          } else {
            hasMore.value = false
          }
          showLoading.value = false
        })
      }
    },
    { distance: pageSize }
  )

  function handleShowPic(item) {
    bus.emit('showPicViewer', [item.photoUrl,item.originalPhotos[0]])
  }

  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: 320px;
  height: 330px;
  bottom: 200px;
  left: -320px;
  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: 110px 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 {
          margin: 2px 0 10px;
          &>span:first-child {
            font-size: 14px;
            font-weight: bold;
          }
        }
        &>div:last-child {
          display: flex;
          justify-content: space-between;
          align-items: center;
          &>div {
            cursor: pointer;
            &>span:nth-child(1) {
              font-size: 12px;
              font-weight: bold;
              line-height: 12px;
            }
            &>span:nth-child(2) {
              padding: 0 15px;
              flex: 1;
              font-size: 12px;
              line-height: 12px;
              color: orange;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              &.isLow {
                color: red;
              }
            }
          }
          &>span {
            font-size: 12px;
            font-weight: bold;
            line-height: 12px;
          }
        }
      }
    }
  }

  .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);
  }

}
</style>
