<template>
  <div class="boat-info">
    <div class="bi-header">
      <span class="bih-title">{{ props.boatInfo.shipNameCn || '未查到信息' }}</span>
      <div class="bih-btns">
        <span :class="{'highlight': cameraType==='down'}" @click="toggleCamera('down')">船身</span>
        <span :class="{'highlight': cameraType==='in'}" @click="toggleCamera('in')">船舱</span>
        <span :class="{'highlight': cameraType==='follow'}" @click="toggleCamera('follow')">船尾</span>
      </div>
    </div>
    <ul class="content-cbxx boat-fields bottom-divider">
      <li><span>船舶编码：</span><span>{{ props.boatInfo.mmsi }}</span></li>
      <li><span>行驶速度：</span><span>{{ props.boatInfo.velocity }}节</span></li>
      <li><span>船舶长度：</span><span>{{ props.boatInfo.shipLength }}米</span></li>
      <li><span>船舶宽度：</span><span>{{ props.boatInfo.shipBreadth }}米</span></li>
      <li><span>船舶类型：</span><span>{{ props.boatInfo.shipTypeName }}</span></li>
      <li><span>满载吃水：</span><span>{{ props.boatInfo.loadedDraft || '-' }}</span></li>
      <li style="margin-bottom: 0;"><span>空载吃水：</span><span>{{ props.boatInfo.noLoadedDraft || '-' }}</span></li>
    </ul>
    <ul class="content-ldkll bottom-divider">
      <li><span>本航线行人数</span><span>{{ props.boatInfo.pNumWalking }}</span></li>
      <li><span>本航线二轮车数</span><span>{{ props.boatInfo.pNumBicycle }}</span></li>
      <li><span>本航线三轮车数</span><span>{{ props.boatInfo.pNumMotorcycle }}</span></li>
    </ul>
    <div class="boat-playback">
      <div class="cb-row1">
        <span :class="{'highlight': true}">轨迹回放</span>
      </div>
      <div class="cb-time">
        <div>
          <i class="cbt-icon"></i>
          <el-date-picker
            v-model="timeRange.time1"
            type="datetime"
            placeholder="请选择"
            size="small"
            popper-class="date-popper"
            class="date-picker-custom1"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </div>
        <div>
          <i class="cbt-icon"></i>
          <el-date-picker
            v-model="timeRange.time2"
            type="datetime"
            placeholder="请选择"
            size="small"
            popper-class="date-popper"
            class="date-picker-custom1"
            value-format="YYYY-MM-DD HH:mm:ss"
          />
        </div>
      </div>
      <div class="cb-play">
        <span class="speed" :class="{'selected': playSpeed===1.5}" @click="ChangePlaySpeed(1.5)">x1.5</span>
        <span class="speed" :class="{'selected': playSpeed===2}" @click="ChangePlaySpeed(2)">x2.0</span>
        <span class="speed" :class="{'selected': playSpeed===3}" @click="ChangePlaySpeed(3)">x3.0</span>
        <span class="play-btn" :class="{'btn-disabled': playState===-1}" v-show="playState<1" @click="track_play">播放</span>
        <span class="play-btn" v-show="playState===1||playState===2" @click="track_stop">停止</span>
        <span class="play-btn" v-show="playState===1" @click="track_pause">暂停</span>
        <span class="play-btn" v-show="playState===2" @click="track_resume">继续</span>
      </div>
    </div>

  </div>
</template>

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

<script setup>
  import { reactive, ref, watch, onBeforeUnmount, nextTick } from 'vue'
  import { ElDatePicker } from 'element-plus'
  import 'element-plus/es/components/date-picker/style/css'
  import bus from '@/utils/bus'
  import { 
    ueCallBoatGuiji, ueCallSetBoatDriveSpeed, ueCallBoatDrive, ueCallBoatCloseDrive, ueCallBoatStop, ueCallBoatContinue, ueCallChangeTrackType
  } from '@/utils/UIInteractions'
  import { useDateFormat } from '@vueuse/core'
  
  const props = defineProps(['boat-info'])

  const cameraType = ref('follow')
  function toggleCamera(type) {
    cameraType.value = type
    ueCallChangeTrackType(type)
  }
  
  const timeRange = reactive({
    time1: '',
    time2: ''
  })

  bus.on('ueRec_boatGuiji', (data) => {
    if(data.isOk=='true') {
      playState.value=0
    }
  })

  bus.on('ueRec_pujiangInit', (data) => {
    if(data.isOk=='true') {
      previewState.value=0
    }
  })

  const playSpeed = ref(1)
  const playState = ref(0)    /* 0--未开始/已结束； 1--播放中； 2--已暂停; -1--禁用状态 */

  function ChangePlaySpeed(s) {
    playSpeed.value = s===playSpeed.value? 1: s
    ueCallSetBoatDriveSpeed(playSpeed.value)
  }

  function track_play() {
    if(timeRange.time1&&timeRange.time2) {
      playState.value=-1
      ueCallBoatGuiji(timeRange.time1, timeRange.time2)
      let timer = setInterval(() => {
        if(playState.value===-1) { return }
        ueCallBoatDrive()
        playState.value = 1
        clearInterval(timer)
      }, 300);
    }
  }
  function track_stop() {
    playState.value = 0
    ueCallBoatCloseDrive()
  }
  function track_pause() {
    playState.value = 2
    ueCallBoatStop()
  }
  function track_resume() {
    playState.value = 1
    ueCallBoatContinue()
  }

  const previewState = ref(0)    /* 0--未开始/已结束； 1--托管中； 2--接管中; -1--禁用状态 */

  watch(()=>props.boatInfo, (val) => {
    nextTick(() => {
      timeRange.time1 = useDateFormat((new Date).getTime() - 30 * 60 * 1000, 'YYYY-MM-DD HH:mm:00').value
      timeRange.time2 = useDateFormat((new Date).getTime(), 'YYYY-MM-DD HH:mm:00').value
    })
  }, { immediate: true })

  onBeforeUnmount(() => {
    bus.off('ueRec_boatGuiji')
    bus.off('ueRec_boatFockClear')
    bus.off('ueRec_pujiangInit')
    ueCallBoatCloseDrive()
  })


</script>

<style lang="scss" scoped>
.boat-info {
  box-sizing: border-box;
  width: 389px;
  height: 395px;
  background: url('@/assets/imgs/page_ssky/bg-boat.png') no-repeat;
  background-size: contain;
  display: flex;
  flex-direction: column;

  .content-cbxx {
    margin-top: 10px;
  }

  .content-ldkll {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-left: 25px;
    margin: 20px 0 15px 0;
    &>li {
      width: 50%;
      display: flex;
      align-items: center;
      margin: 5px 0 5px;
      span:first-child {
        display: inline-block;
        text-align: left;
        width: 98px;
        font-size: 14px;
        color: #D9E6FF;
        margin-right: 11px;
      }
      span:last-child {
        font-size: 14px;
        font-family: BarlowBold;
        color: #00FF95;
      }
    }
  }

  .boat-fields {
    padding: 0 0 0 25px;
  }
  .boat-playback {
    .cb-row1 {
      justify-content: center;
    }
    .cb-time {
      padding: 0 30px 0 25px;
    }
    .cb-play {
      padding: 0 30px 0 40px;
    }
  }

  .content-hxyl {
    box-sizing: border-box;
    margin-top: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    &>span:not(.btn-disabled):hover {
      filter: brightness(1.3);
    }
    .play-btn {
      display: block;
      width: 79px;
      height: 30px;
      margin-left: 5px;
      background: url('@/assets/imgs/page_kkjk/bi-bg-btn2.png');
      background-size: contain;
      font-size: 13px;
      font-weight: 400;
      color: #ddd;
      text-align: center;
      line-height: 30px;
      cursor: pointer;
    }
  }
}

</style>
