<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>
    <div class="dialog-tab bi-tab">
      <div :class="{'highlight': currentTab==='cbxx'}" @click="changeTab('cbxx')"><span>船舶信息</span></div>
      <div :class="{'highlight': currentTab==='bgxx'}" @click="changeTab('bgxx')"><span>报港信息</span></div>
    </div>
    <div class="content-cbxx" v-if="currentTab==='cbxx'">
      <div class="cbxx-top bottom-divider">
        <span>驶入黄浦江时间：</span><span>-</span>
      </div>
      <ul class="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.typeName || '-' }}</span></li>
        <li style="margin-bottom: 0;"><span>满载吃水：</span><span>{{ props.boatInfo.loadedDraft || '-' }}</span></li>
        <li style="margin-bottom: 0;"><span>空载吃水：</span><span>{{ props.boatInfo.noLoadedDraft || '-' }}</span></li>
      </ul>
    </div>
    <ul class="boat-fields content-bgxx bottom-divider" v-if="currentTab==='bgxx'">
      <li><span>停靠泊位：</span><span>--</span></li>
      <li><span>报告时间：</span><span>--</span></li>
      <li><span>预抵时间：</span><span>--</span></li>
      <li><span>当前港口：</span><span>--</span></li>
      <li><span>上一港口：</span><span>--</span></li>
      <li><span>下一港口：</span><span>--</span></li>
      <li><span>申报人员：</span><span>--</span></li>
      <li><span>申报电话：</span><span>--</span></li>
    </ul>
    <div class="boat-playback">
      <div class="cb-row1">
        <span>轨迹回放</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: 'BoatGeneral',
}
</script>

<script setup>
  import { reactive, ref, watch, onBeforeUnmount } from 'vue'
  import { ElDatePicker } from 'element-plus'
  import 'element-plus/es/components/date-picker/style/css'
  import bus from '@/utils/bus';
  import { useDateFormat } from '@vueuse/core'
  import { ueCallBoatGuiji, ueCallSetBoatDriveSpeed, ueCallBoatDrive, ueCallBoatCloseDrive, ueCallBoatStop, ueCallBoatContinue, ueCallChangeTrackType} from '@/utils/UIInteractions'

  const props = defineProps(['boat-info'])

  const cameraType = ref('follow')
  function toggleCamera(type) {
    cameraType.value = type
    ueCallChangeTrackType(type)
  }

  const currentTab = ref('cbxx')

  const timeRange = reactive({
    time1: '',
    time2: ''
  })

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

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

  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()
  }

  watch(()=>props.boatInfo, (val) => {
    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 })

  const emit = defineEmits(['closeBoatInfo'])

  function changeTab(name) {
    currentTab.value = name
  }


</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;

  .dialog-close {
    top: 8px;
  }

  .bi-tab {
    padding-right: 20px;
    margin: 10px 0 14px;
    &>div.highlight::after {
      display: none;
    }
  }

  .content-cbxx {
    .cbxx-top {
      padding: 0 0 0 25px;
      margin-bottom: 20px;
      text-align: left;
      span:first-child {
        margin-right: 3px;
        font-size: 14px;
        color: #D9E6FF;
      }
      span:last-child {
        font-size: 14px;
        font-family: BarlowBold;
        color: #FFD400;
      }
    }
    .boat-fields {
      padding: 0 0 0 25px;
      li {
        margin-bottom: 10px;
      }
    }
  }

  .content-bgxx {
    margin-bottom: 11px;
  }

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

}

</style>
