<template>
  <div id="kkjk">
    <div class="panel-left">
      <div class="pl-b1">
        <span class="title1-left">过船信息</span>
        <transition-group name="gcxxList" class="plb1-main" tag="ul">
          <li v-for="item in listData_gcxx.value" :key="item.code" class="plb1-item" :class="{'is-alert': item.isWarning==='true'}"  @click="handleGcxxClick(item)">
            <div>
              <span>{{ item.boatName || '--' }}</span>
              <span>{{ item.passTime }}</span>
            </div>
            <span class="equip-ais equip" :class="{'ais-off':!+item.isFinish.split('')[0]}">AIS</span>
            <i class="equip-vedio equip" :class="{'vedio-off':!+item.isFinish.split('')[1]}"></i>
            <span class="equip-rfid equip" :class="{'rfid-off':!+item.isFinish.split('')[2]}">RFID</span>
            <span>{{ item.direction }}</span>
          </li>
        </transition-group>
        <!-- <div class="no-data" v-else>查询中...</div> -->
      </div>
    </div>
    <div class="panel-right">
      <div class="pr-b1 pr">
        <span class="title1-right">杭申线船舶流量监测</span>
        <div class="prb1-main">
          <img :src="require('@/assets/imgs/page_kkjk/timeline.png')" alt="">
          <ul>
            <li v-for="item in listData_lljk.value">
              <span>{{ item.dateTime }}</span>
              <div>
                <div>
                  <span>进沪</span><span>{{ item.inNum }}</span><span>艘</span>
                </div>
                <i></i>
                <div>
                  <span>出沪</span><span>{{ item.outNum }}</span><span>艘</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="pr-b2 pr">
        <span class="title1-right">船舶预警</span>
        <div class="prb2-main">
          <div v-for="item in listData_cbyj.value" @click="handleShowWarningBoat(item)">
            <span>{{ item.name }}</span><span>{{ item.total }}</span>
          </div>
          <div class="prb2-title">
            <span>船舶预警</span><span>（艘）</span>
          </div>
        </div>
      </div>
      <warning-boats v-if="warningBoatsShow" :query-data="warningBoatData.value" @closeList="warningBoatsShow=false"/>
    </div>
  </div>
</template>

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

<script setup>
  import { onMounted, reactive, onBeforeUnmount, ref } from 'vue';
  import { GetLljk, GetCbyj, GetGcxx } from '@/apis/kkjk'
  import { useDateFormat } from '@vueuse/core'
  import { ueCallCloseBoat, ueCallPositionForHsx } from '@/utils/UIInteractions';
  import bus from '@/utils/bus';
  import WarningBoats from './cpns/WarningBoats.vue'

  let getDataTimer = null

  onMounted(() => {
    initlistData_lljk()
    getData()
    getDataTimer = setInterval(() => {
      getData()
    }, 30000);
  })

  onBeforeUnmount(() => {
    ueCallCloseBoat()
    clearInterval(getDataTimer)
  })

  function getData() {
    getLljk()
    getCbyj()
    getGcxx()
  }

  function getGcxx() {
    GetGcxx().then(res => {
      listData_gcxx.value = res.data.Rows.slice(0,11)
    })
  }

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

  function getLljk() {
    GetLljk().then(res => {
      listData_lljk.value.forEach(i => {
        res.data.Rows.forEach(j => {
          if(i.dateTime === j.dateTime) {
            i.inNum = j.inNum
            i.outNum = j.outNum
          }
        })
      })
    })
  }

  function initlistData_lljk() {
    for(let i=0; i<5; i++) {
      const date = useDateFormat((new Date).getTime() - i*24*60*60*1000, 'YYYY-MM-DD').value
      listData_lljk.value.push({ dateTime: date, inNum: '--', outNum: '--' })
    }
  }

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

  function getCbyj() {
    GetCbyj().then(res => {
      listData_cbyj.value = res.data.Rows.sort((a,b) => b.total - a.total).slice(0,5)
    })
  }
  
  const listData_cbyj = reactive({value: []})

  function handleGcxxClick(item) {
    // bus.emit('ueRec_BoatClick', {mmsi: item.mmsi, where: 'HSX'})
    ueCallPositionForHsx(item.code, item.mmsi)
  }

  const warningBoatsShow = ref(false)

  const warningBoatData = reactive({value: {}})

  function handleShowWarningBoat(item) {
    warningBoatData.value = item
    warningBoatsShow.value = true
  }

</script>

<style lang="scss" scoped>
#kkjk {
  .panel-left, .panel-right {
    box-sizing: border-box;
    position: absolute;
    top: 105px;
    width: 380px;
    height: calc(100vh - 105px);
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .panel-left {
    left: 0;
    padding: 0 30px 70px;
  }

  .panel-right {
    right: 0;
    padding: 0 30px 70px;
    .pr {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }
  }

  .pl-b1 {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    // overflow: hidden;
    .title1-left {
      margin-bottom: 2vh;
    }
    .plb1-main {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      overflow: hidden;
      .plb1-item {
        box-sizing: border-box;
        padding: 0 8px 0 14px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 285px;
        height: 65px;
        // margin: 11px 0;
        margin-bottom: 13px;
        background: url('@/assets/imgs/page_kkjk/bg-gcxx-1.png') no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
        &>div:first-child {
          span:first-child {
            position: relative;
            display: block;
            width: 116px;
            height: 24px;
            font-size: 14px;
            font-weight: bold;
            font-style: italic;
            color: transparent;
            line-height: 24px;
            background: linear-gradient(0deg, #ACDDFF 0%, #FFFFFF 100%);
            -webkit-background-clip: text;
            &::after {
              content: '';
              position: absolute;
              left: 0;
              top: 0;
              display: block;
              width: 100%;
              height: 100%;
              background: url('@/assets/imgs/page_kkjk/bg-zccm.png') no-repeat;
              background-size: 100% 100%;
              z-index: -1;
            }
          }
          span:last-child {
            font-size: 13px;
            font-family: BarlowBold;
            color: rgba($color: #fff, $alpha: 0.6);
          }
        }
        .equip {
          display: block;
          width: 31px;
          height: 31px;
          margin-right: 7px;
          font-size: 12px;
          font-family: BarlowBold;
          color: #FFFFFF;
          line-height: 31px;
          text-align: center;
        }
        .equip-ais {
          background: url('@/assets/imgs/page_kkjk/bg-ais-on.png') no-repeat;
          background-size: 100% 100%;
        }
        .equip-vedio {
          background: url('@/assets/imgs/page_kkjk/bg-vedio-on.png') no-repeat;
          background-size: 100% 100%;
        }
        .equip-rfid {
          background: url('@/assets/imgs/page_kkjk/bg-rfid-on.png') no-repeat;
          background-size: 100% 100%;
        }
        .ais-off {
          background: url('@/assets/imgs/page_kkjk/bg-ais-off.png') no-repeat;
          background-size: 100% 100%;
          color: #ccc;
        }
        .rfid-off {
          background: url('@/assets/imgs/page_kkjk/bg-rfid-off.png') no-repeat;
          background-size: 100% 100%;
          color: #ccc;
        }
        .vedio-off {
          background: url('@/assets/imgs/page_kkjk/bg-vedio-off.png') no-repeat;
          background-size: 100% 100%;
          color: #ccc;
        }
        &>span:last-child {
          width: 12px;
          height: 30px;
          margin-left: 10px;
          font-size: 12px;
          color: #FFFFFF;
          line-height: 18px;
        }
        &.is-alert {
          background: url('@/assets/imgs/page_kkjk/bg-gcxx-2.png') no-repeat;
          background-size: 100% 100%;
          &>div:first-child>span:first-child::after {
            background: url('@/assets/imgs/page_kkjk/bg-yjcm.png') no-repeat;
            background-size: 100% 100%;
          }
        }
      }
    }

    .gcxxList-move,.gcxxList-enter-active,.gcxxList-leave-active{
      transition: all 0.5s ease;
    }
    .gcxxList-enter-from,.gcxxList-leave-to {
      opacity: 0;
      transform: translateX(-80px);
    }

    // .no-data {
    //   flex: 1;
    //   text-align: center;
    // }
  }

  .pr-b1 {
    .prb1-main {
      height: 460px;
      width: 90%;
      display: flex;

      &>ul {
        height: 100%;
        box-sizing: border-box;
        flex: 1;
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 22px 0 24px;

        &>li {
          display: flex;
          flex-direction: column;
          width: 100%;

          &>span {
            display: block;
            box-sizing: border-box;
            padding-left: 12px;
            width: 100%;
            height: 29px;
            background: url('@/assets/imgs/page_kkjk/bg-lljk-1.png') no-repeat;
            background-size: 100% 100%;
            font-size: 16px;
            font-family: BarlowBold;
            color: #FFFFFF;
            line-height: 29px;
          }

          &>div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 85%;
            margin-top: 14px;
            box-sizing: border-box;
            padding-left: 12px;

            &>i {
              display: block;
              width: 1px;
              height: 14px;
              border-right: 1px dashed #ddd;
            }

            &>div {
              display: flex;
              align-items: center;
              span:not(:nth-child(2)) {
                font-size: 14px;
                color: rgba($color: #EAF3F8, $alpha: 0.9);
              }
              span:nth-child(2) {
                margin: 0 6px;
                font-size: 18px;
                font-family: BarlowBold;
                color: #eee;
              }
            }
          }

          &:first-child {
            &>span {
              background: url('@/assets/imgs/page_kkjk/bg-lljk-2.png') no-repeat;
              background-size: 100% 100%;
            }
            &>div>div>span:nth-child(2) {
              color: rgba(140, 236, 255, 1);
            }
          }
        }
      }
    }
  }

  .pr-b2 {
    .title1-right {
      margin-bottom: 0;
    }
    .prb2-main {
      position: relative;
      width: 329px;
      height: 336px;
      background: url('@/assets/imgs/page_kkjk/bg-cbyj.png') no-repeat;
      background-size: 100% 100%;
      
      &>div:not(.prb2-title) {
        position: absolute;
        width: 165px;
        height: 40px;
        background: url('@/assets/imgs/page_kkjk/bg-cbyj-text.png') no-repeat;
        background-size: contain;
        box-sizing: border-box;
        padding-left: 70px;
        cursor: pointer;

        span:nth-child(1) {
          display: block;
          font-size: 13px;
          color: #B3D9FF;
        }
        span:nth-child(2) {
          display: block;
          font-size: 16px;
          font-family: YSBTH;
          color: #E3E9F5;
        }
        &:nth-child(1) {
          top: 15%;
          left: -1%;
        }
        &:nth-child(2) {
          top: 30%;
          right: -1%;
        }
        &:nth-child(3) {
          top: 45%;
          left: -11%;
        }
        &:nth-child(4) {
          top: 60%;
          right: -1%;
        }
        &:nth-child(5) {
          top: 75%;
          left: -1%;
        }
      }

      .prb2-title {
        position: absolute;
        top: 62%;
        left: 40%;
        text-align: center;
        span:nth-child(1) {
          display: block;
          font-size: 16px;
          font-weight: bold;
          color: #BFDFFF;
          line-height: 17px;
        }
        span:nth-child(2) {
          display: block;
          font-size: 14px;
          color: #BFDFFF;
          line-height: 17px;
        }
      }
      
    }
  }

}
</style>
