<template>
  <div id="boat-panel">
    <i v-show="currentPanel" class="dialog-close" @click="handleClose"></i>
    <BoatKkjk v-if="currentPanel==='kkjk'" :boat-info="boatDetail.value"/>
    <BoatGeneral v-if="currentPanel==='general'" :boat-info="boatDetail.value"/>
    <BoatPjyl v-if="currentPanel==='pjyl'" :boat-info="boatDetail.value"/>
    <BoatDjld v-if="currentPanel==='djld'" :boat-info="boatDetail.value"/>
  </div>
</template>

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

<script setup>
import { watch, ref, reactive } from 'vue';
import BoatGeneral from './BoatGeneral.vue';
import BoatPjyl from './BoatPjyl.vue';
import BoatKkjk from './BoatKkjk.vue';
import BoatDjld from './BoatDjld.vue';
import { GetBoatInfo, GetBoatInfoByEventCode } from '@/apis/other'
import { ueCallCloseBoat } from '@/utils/UIInteractions'
import bus from '@/utils/bus';

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

const emit = defineEmits(['closeBoatPanel'])

const currentPanel = ref('')

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

watch(()=>props.boatInfo, (val) => {
  if(val.mmsi) {
    GetBoatInfo(val.mmsi, val.where).then(res => {
      if(!res.data?.panelType) {
        currentPanel.value = ''
        return 
      }
      bus.emit('boatPanelShow', true)
      boatDetail.value = res.data
      switch(res.data.panelType) {
        case 'kk_pass': 
        case 'kk_normal':
          currentPanel.value = 'kkjk'
          break
        case 'pjyl':
          currentPanel.value = 'pjyl'
          break
        case 'djld':
          currentPanel.value = 'djld'
          break
        case 'normal':
          currentPanel.value = 'general'
          break
        
      }
    })
  } else if(val.eventcode) {
    GetBoatInfoByEventCode(val.eventcode).then(res => {
      if(!res.data?.panelType) {
        currentPanel.value = ''
        return 
      }
      bus.emit('boatPanelShow', true)
      boatDetail.value = res.data
      currentPanel.value = 'kkjk'
    })
  }
},{immediate: true})

function handleClose() {
  ueCallCloseBoat()
  emit('closeBoatPanel')
}

</script>

<style lang="scss" scoped>
#boat-panel {
  box-sizing: border-box;
  position: absolute;
  top: -70vh;
  left: 340px;
  width: fit-content;
  height: fit-content;

  .dialog-close {
    top: 8px;
  }

}
</style>

<style lang="scss">
.boat-playback {
  .cb-row1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 0 30px 0 20px;
    &>span {
      position: relative;
      display: block;
      width: 184px;
      height: 38px;
      text-align: center;
      line-height: 38px;
      font-size: 18px;
      font-family: YSBTH;
      font-weight: 400;
      color: transparent;
      text-shadow: 0px 1px 3px rgba(17,15,27,0.26);
      background: linear-gradient(0deg, #5cadfe 0%, #FFFFFF 70%);
      -webkit-background-clip: text;
      cursor: pointer;
      &.highlight {
        background: linear-gradient(0deg, #ffe45f 0%, #FFFFFF 70%);
        -webkit-background-clip: text;
      }
      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('@/assets/imgs/page_kkjk/bi-bg-btn1.png');
        background-size: contain;
        z-index: -1;
      }

    }
  }

  .cb-time {
    margin-top: 15px;
    box-sizing: border-box;
    padding: 0 50px 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    &>div {
      display: flex;
      align-items: center;
    }
    .cbt-icon {
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-right: 5px;
      background: url('@/assets/imgs/page_kkjk/bi-icon-time.png');
      background-size: contain;
    }
    .el-date-editor--datetime {
      width: 140px;
    }
  }
  .cb-play {
    box-sizing: border-box;
    padding-left: 52px;
    margin-top: 18px;
    display: flex;
    align-items: center;
    &>span:not(.btn-disabled):hover {
      filter: brightness(1.3);
    }
    .speed {
      display: block;
      width: 40px;
      height: 22px;
      background: rgba(0,0,0,0.15);
      font-size: 14px;
      font-family: BarlowBold;
      color: #ddd;
      text-align: center;
      line-height: 22px;
      margin-right: 10px;
      cursor: pointer;
      &.selected {
        background: rgba(48, 131, 182, 0.4);
      }
    }
    .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;
    }
  }
}

.boat-fields {
  box-sizing: border-box;
  padding: 0 45px 0 35px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  &>li {
    width: 50%;
    text-align: left;
    display: flex;
    align-items: center;
    margin-bottom: 13px;
    span:first-child {
      display: inline-block;
      width: 80px;
      font-size: 14px;
      font-weight: 400;
      text-align-last:justify;
      text-align:justify;
      text-justify:distribute-all-lines; 
      color: #D9E6FF;
      text-shadow: 0px 3px 5px rgba(0,38,76,0.4);
    }
    span:last-child {
      flex: 1;
      display: inline-block;
      font-size: 14px;
      font-family: BarlowBold;
      color: #FFFFFF;
      text-shadow: 0px 3px 5px rgba(0,38,76,0.4);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
}

.bottom-divider {
  position: relative;
  &::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    display: block;
    width: calc(100% - 10px);
    height: 1px;
    background-color: rgba($color: #fff, $alpha: 0.2);
  }
}

.bi-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  padding: 0 50px 0 16px;
  height: 34px;
  .bih-title {
    font-size: 16px;
    line-height: 34px;
    font-weight: bold;
    font-style: italic;
    color: #FFFFFF;
  }
  .bih-btns {
    &>span {
      display: inline-block;
      width: 45px;
      height: 20px;
      margin-left: 10px;
      border-radius: 10px;
      border: 1px solid rgb(86, 190, 255);
      line-height: 20px;
      color: rgb(138, 203, 244);
      font-size: 14px;
      text-align: center;
      cursor: pointer;
      &.highlight {
        border-color: #ffe45f;
        color: #ffe45f;
      }
    }
  }

}

</style>