<template>

  <div :style="worldStyle" class="world-3d">

    <CtrlsBar v-if="viewAct !== 3" v-model="viewAct" />

    <!-- 预览模式 -->
    <OverScane v-if="viewAct === 0" />

    <!-- 事件详情模式 -->
    <EventScane v-model="viewAct" v-else-if="viewAct === 3" />

    <!-- 追踪预览 -->
    <TrackScane v-model="viewAct" v-else />
    
  </div>

  <div class="main-container">
    <Main />
  </div>

  <Doms2d />
  

</template>

<script lang='ts' setup>

import CtrlsBar from './components/CtrlsBar/index.vue'

import OverScane from './components/OverScane/index.vue'
import TrackScane from './components/TrackScane/index.vue'
import EventScane from './components/EventScane/index.vue'

import Doms2d from './components/Doms2d/index.vue'
import Main from './components/3DMain/index.vue'
import { cars, bus } from './_state'

import { useAppStoreWithOut } from '@/store/modules/app'

const appStore = useAppStoreWithOut()

const worldStyle = computed(() => {
  return {
    minHeight: (appStore.fixHeight - 145) + 'px'
  }
})

const viewAct = ref(0)

onBeforeMount(() => {

  bus.on('cars-update', e => {
    cars.value[e.direct] = e.cars
  })
   bus.on('update-view-act', (newViewAct) => {
    viewAct.value = newViewAct;
  });
})

</script>

<style lang='scss' scoped>

.world-3d {
  position: relative;
  margin: 10px 45px 0;
  overflow: hidden;
}

.main-container {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 0;
}

</style>