import { createRouter, createWebHistory } from 'vue-router';
import AppLayout from '../components/layout/AppLayout.vue';
import { useTokenStore } from '@/stores/mytoken'; // 确保正确导入 useTokenStore

// 定义路由配置
const routes = [
  {
    path: '/login',
    name: 'login',
    component: () => import('../views/login/loginView.vue'),
  },
  {
    path: '/',
    name: 'home',
    component: AppLayout,
    meta: { requiresAuth: true, title: '模型' },
    children: [
      {
        path: 'SoilPro',
        name: 'SoilPro',
        component: () => import('../views/menu/SoilPro.vue'),
        meta: { title: '软件简介' },
      },
      {
        path: 'Overview',
        name: 'Overview',
        component: () => import('../views/menu/Overview.vue'),
        meta: { title: '项目简介' },
      },
      {
        path: 'ResearchFindings',
        name: 'ResearchFindings',
        component: () => import('../views/menu/ResearchFindings.vue'),
        meta: { title: '研究成果' },
      },
      {
        path: 'Unit',
        name: 'Unit',
        component: () => import('../views/menu/Unit.vue'),
        meta: { title: '团队信息' },
      },
      {
      path: 'IntroductionUpdate',
        name: 'IntroductionUpdate',
        component: () => import('../views/menu/IntroductionUpdate.vue'),
        meta: { title: '更新介绍' },
      },
      {
        path: 'Calculation',
        name: 'Calculation',
        component: () => import('../views/menu/Calculation.vue'),
        meta: { title: '反酸计算' },
      },
      {
        path: 'AcidNeutralizationModel',
        name: 'AcidNeutralizationModel',
        component: () => import('../views/menu/AcidNeutralizationModel.vue'),
        meta: { title: '降酸计算' },
      },
      {
        path: 'SoilAcidificationIterativeEvolution',
        name: 'SoilAcidificationIterativeEvolution',
        component: () => import('../views/menu/SoilAcidificationIterativeEvolution.vue'),
        meta: { title: '降酸模型显示' },
      },
      {
        path: 'SoilAcidReductionIterativeEvolution',
        name: 'SoilAcidReductionIterativeEvolution',
        component: () => import('../views/menu/SoilAcidReductionIterativeEvolution.vue'),
        meta: { title: '反酸模型显示' },
      },
      {
        path: 'mapView',
        name: 'mapView',
        component: () => import('../views/menu/tencentMapView.vue'),
        meta: { title: '地图展示' },
      },
      {
        path: 'Visualizatio',
        name: 'Visualizatio',
        component: () => import('../views/Visualizatio.vue'),
        meta: { title: '降酸数据管理' },
      },
      {
        path: 'Visualization',
        name: 'Visualization',
        component: () => import('../views/Visualization.vue'),
        meta: { title: '反酸数据管理' },
      },
      {
        path: 'ModelSelection',
        name: 'ModelSelection',
        component: () => import('../views/ModelSelection.vue'),
        meta: { title: '模型选择' },
      },
      {
        path: 'thres',
        name: 'thres',
        component: () => import('../views/thres.vue'),
        meta: { title: '阈值选择' },
      },
      {
        path: 'ModelTrain',
        name: 'ModelTrain',
        component: () => import('../views/ModelTrain.vue'),
        meta: { title: '模型训练' },
      },
      {
        path: 'about',
        name: 'about',
        component: () => import('../views/AboutView.vue'),
      },
      {
        path: '/:pathMatch(.*)*',
        name: 'ErrorPage',
        component: () => import('../views/ErrorPage.vue'),
      },
    ],
  },
];

// 创建 router 实例
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes, // 使用路由配置数组
});

// 导航守卫
router.beforeEach((to, from, next) => {
  const tokenStore = useTokenStore(); // 使用正确的函数名称
  if (to.matched.some(record => record.meta.requiresAuth)) {
    // 检查是否需要认证
    if (!tokenStore.token.userid) {
      // 如果没有有效的 token，则重定向到登录页面
      next({ name: 'login' });
    } else {
      // 如果有有效的 token，则允许访问
      next();
    }
  } else {
    // 如果页面不需要认证，则直接允许访问
    next();
  }
});

export default router;