<template>
  <div id="common">
    <boat-panel v-if="boatPanelShow" :boat-info="boatPanelInfo.value" @close-boat-panel="boatPanelShow=false"/>
    <scene-box v-if="sceneBoxShow"/>
    <pic-viewer v-if="picViewShow" :pic-list="picList.value" @close-pic-viewer="picViewShow=false"></pic-viewer>
    <under-water-legend/>
  </div>
</template>

<script>
export default {
  name: 'ComPage'
}
</script>

<script setup>
import { reactive, ref, watch, computed } from 'vue';
import bus from '@/utils/bus'
import BoatPanel from './cpns/boatPanel/Index.vue'
import SceneBox from './cpns/SceneBox.vue';
import PicViewer from './cpns/PicViewer.vue';
import UnderWaterLegend from './cpns/UnderWaterLegend.vue';

const boatPanelShow = ref(false)

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

bus.on('ueRec_BoatClick', (data) => {
  boatPanelInfo.value = data
  boatPanelShow.value = true
})

bus.on('ueRec_BoatNotFound', (data) => {
  boatPanelInfo.value = data
  boatPanelShow.value = true
})

const sceneBoxShow = ref(false)

bus.on('toggleSceneBox', () => {
  sceneBoxShow.value = !sceneBoxShow.value
})

const picViewShow = ref(false)

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

bus.on('showPicViewer', (data) => {
  picList.value = data
  picViewShow.value = true
})

</script>

<style lang="scss" scoped>
#common {
  #boat-panel {
    z-index: 1;
  }
  #scene-box {
    z-index: 1;
  }
  #pic-viewer {
    z-index: 2;
  }
}
</style>