<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import PcIndex from '@/views/navigation/pc-index.vue';
import ModelIndex from '@/views/navigation/model-index.vue';
import {useAdaptation} from '@/utils/self-adaption.js'
const {currentDevice}= useAdaptation((currentDevice)=>{
  console.log(currentDevice,'currentDevice')
})
const mediaQuery = '(max-width: 768px)';
const currentComponent = ref(window.matchMedia(mediaQuery).matches ? ModelIndex : PcIndex);
function handleMediaQuery(event) {
  currentComponent.value = event.matches ? ModelIndex : PcIndex;
}
let mediaQueryList;
onMounted(() => {
  mediaQueryList = window.matchMedia(mediaQuery);
  mediaQueryList.addEventListener('change', handleMediaQuery);
  handleMediaQuery(mediaQueryList);
});
onBeforeUnmount(() => {
  mediaQueryList.removeEventListener('change', handleMediaQuery);
});
</script>
<template>
 <div>
   <component :is="currentComponent" />
 </div>
</template>
<style scoped lang="scss">
</style>
