<script setup>
import { ref, watch } from 'vue';
import app from '~/layout/app/index.vue';
import request from '@/utils/request';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter()
const route = useRoute()
// import AreaVue from './components/[area].vue';

console.log('router :>> ', router.options.routes);

const tree = ref([])
request({
  url: '/xkxt/fl/tree',
}).then(res => {
  const data = res.data
  tree.value = data.left_menu
})

// const currentIndex = ref()
const currentIndex = ref(route.params.area)
// console.log('currentIndex :>> ', currentIndex.value);

watch(
  () => currentIndex.value,
  (area) => {
    if (area) {
      router.push({ path: `/tree/${encodeURIComponent(area)}` })
    }
  },
  {
    immediate: true
  }
)

</script>

<template>
  <!-- v-model:index="currentIndex" -->
  <app :tree="tree" :index="currentIndex">
    <!-- <AreaVue :area="currentIndex"></AreaVue> -->
  </app>
</template>