<template>
  <div class="ent-info-list" :class="{'isWarning': props.isWarning}">
    <span class="dialog-close" @click="handleClose"></span>
    <span class="title-dialog">企业列表</span>
    <ul class="ent-list" v-if="props.listData.length>0" ref="list">
      <!-- <li v-for="item, index in listSlice.value" class="list-item"> -->
      <li v-for="item, index in props.listData" class="list-item" @click="handleEntClick(item,index)">
        <span :class="{'highlight':index===currentIndex}">{{ formatIndex(index+1) }}</span>
        <div v-if="props.isWarning">
          <span :class="{'highlight':index===currentIndex}">{{item.unitName}}</span>
          <div>
            <span>核定靠泊等级</span><span>{{ item.berthLevel }}</span><span>预警数量</span><span>{{ item.warnNum }}</span>
          </div>
        </div>
        <span v-else :class="{'highlight':index===currentIndex}">{{item.unitName}}</span>
      </li>
    </ul>
    <div class="no-data" v-else>
      获取中...
    </div>
    <!-- <transition name="loading">
      <div class="loading" v-if="showLoading">加载中...</div>
    </transition> -->
  </div>
</template>

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

<script setup>

  import { onMounted, reactive, ref, watch } from 'vue'
  // import { useInfiniteScroll } from '@vueuse/core'

  const props = defineProps({
    listData: Array,
    isWarning: {
      type: Boolean,
      default: false
    },
    hasDetail: {
      type: Boolean,
      default: false
    }
  })

  const currentIndex = ref(null)

  watch(()=>props.hasDetail, (val) => {
    if(!val) {
      currentIndex.value = null
    }
  })

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

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

  /* 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+20))
          showLoading.value = false
        }, 1000);
      }
    },
    { distance: 10 }
  ) */

  const emit = defineEmits(['closeEntList','pickedEnt'])

  function handleClose() {
    currentIndex.value = null
    emit('closeEntList')
  }

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

  function handleEntClick(item,index) {
    if(props.hasDetail) {
      emit('pickedEnt', item)
      currentIndex.value = index
    }
  }

</script>

<style lang="scss" scoped>
.ent-info-list {
  box-sizing: border-box;
  position: absolute;
  width: 320px;
  height: 754px;
  padding: 25px 15px 25px 25px;
  background: url('@/assets/imgs/page_yyjg/bg-popup.png') no-repeat;
  background-size: 100% 100%;
  overflow: hidden;

  &:not(.isWarning) {
    top: 60px;
    right: -290px;
  }

  &.isWarning {
    height: 370px;
    bottom: 200px;
    left: -320px;
  }

  .no-data {
    position: absolute;
    top: 49%;
    width: calc(100% - 40px);
    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);
  } */

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

    .list-item {
      display: flex;
      align-items: flex-start;
      margin-bottom: 19px;
      overflow: hidden;
      cursor: pointer;
      &>span:nth-child(1) {
        display: inline-block;
        width: 20px;
        margin-right: 18px;
        height: 26px;
        font-size: 18px;
        line-height: 24px;
        font-family: BarlowBold;
        color: #FBFDFF;
        text-shadow: 0px 2px 10px rgba(2,28,34,0.71);
      }
      &>span:nth-child(2) {
        flex: 1;
        height: 26px;
        margin-right: 15px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 14px;
        font-weight: 400;
        color: #FBFDFF;
        text-shadow: 0px 2px 10px rgba(2,28,34,0.71);
        background: url('@/assets/imgs/page_yyjg/ent-item-bg.png') no-repeat;
        background-size: contain;
        background-position: bottom;
      }
      &>div {
        flex: 1;
        height: 55px;
        margin-right: 15px;
        background: url('@/assets/imgs/page_yyjg/ent-item-bg.png') no-repeat;
        background-size: contain;
        background-position: bottom;
        &>span {
          display: block;
          width: 220px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          font-size: 14px;
          font-weight: 700;
          color: #FBFDFF;
          text-shadow: 0px 2px 10px rgba(2,28,34,0.71);
        }
        &>div {
          display: flex;
          align-items: center;
          margin-top: 7px;
          span {
            font-size: 14px;
            color: #ddd;
          }
          span:nth-child(2) {
            display: block;
            color: #7eeaff;
            width: 40px;
            margin: 0 5px;
            text-align: center;
          }
          span:nth-child(4) {
            color: #7eeaff;
            margin-left: 5px;
          }
        }
      }
      span.highlight {
        color: #fdff82;
        font-weight: bold;
      }
    }
  }


}

</style>
