<template>
  <Video />
  <Charge />
  <Electromechanical />
</template>
<script lang="ts">
import Video from './components/Video.vue'
import Charge from './components/Charges.vue'
import Electromechanical from './components/Electromechanical.vue'
import { computed, provide } from 'vue'
import { useStore } from "vuex";
import { key } from "@/store";
export default {
  components: { Video, Charge, Electromechanical },
  setup() {
    const store = useStore(key);
    const selectRoadId = computed(() => {
      return store.state.road?.selectRoadId || []
    })
    const selectLevel = computed(() => {
      return store.state.road?.selectLevel
    })
    const searchParams = computed(() => {
      return {
        level: selectLevel.value,
        dimension: selectRoadId?.value[selectLevel.value - 1]
      }
    })
    provide('selectRoadId', selectRoadId)
    provide('searchParams', searchParams)
  }
}
</script>