import { defineStore } from "pinia";
import { defineAsyncComponent, ref, toRaw } from "vue";
import { getRouters } from "@/api/system/menu";
import Layout from '@/layout/index.vue'
import ParentView from '@/components/ParentView.vue'
import router from "../router";
const VueComUrl = import.meta.glob('../views/**/*.vue')

export const usePermisstionStroe = defineStore('permisstion', () => {
  const asyncRouters = ref([])
  //定义是否加载路由变量
  const isLoadRoutes = ref(false)
  const isSussessReq = ref(false)
  const menuList = ref([
    {
      name: 'home',
      path: '/home',
      icon: 'home',
      title: '首页',
      meta: {
        breadcrumb: true
      }
    }
  ])
  // 二级页面路由list
  const slRouters = ref([])

  const setIsLoadRoutes = (status) => {
    return isLoadRoutes.value = status
  }

  const setIsSuccessReq = () => {
    return isSussessReq.value = false
  }
  const setAsyncRouters = async () => {
    await getRouters().then(res => {
      if (res.code === 1000) {
        const sRouter = JSON.parse(JSON.stringify(res.data))
        const mData = JSON.parse(JSON.stringify(res.data))
        const firstFormat = setRouterLevel(JSON.parse(JSON.stringify(sRouter)))

        console.log(firstFormat, 'firstFormat');
        asyncRouters.value = formatAsyncRouters(JSON.parse(JSON.stringify(firstFormat)))
        console.log('asyncRouters.value',firstFormat);
        menuList.value = [...menuList.value, ...generateMenu(mData)]
        addAsyncRouters(asyncRouters.value)
        isLoadRoutes.value = false
        isSussessReq.value = true
      } else {
        isLoadRoutes.value = true
        setTimeout(() => setAsyncRouters(), 3000)
      }
    })
  }

  const setRouterLevel = (routers) => {

    return routers.filter(item=>{
      if(item.component === 'Layout') {
        if(item.children) {
          // console.log("🚀 ~ file: item.children ", item.children )
          item.children.forEach(v=>{
            if(v.children) {
              // console.log("🚀 ~ file:item.children",item.children)
              // console.log("🚀 ~ file: v.children ", v.children )
              // slRouters.value = [ ...toRaw(v.children)]
              // delete v.children
              // slRouters.value = [ ...v.children]
              // return v.children
              item.children = [...item.children,...v.children]
            }
          })

        }
      }
      return true
    })
  }

  const formatAsyncRouters = (routers) => {
    return routers.filter(route => {
      if (route.component) {
        if (route.component === 'Layout') {
          route.component = Layout
        } else if (route.component === 'ParentView') {
          route.component = ParentView
        } else {
          route.component = loadView(route.component)
        }
      }
      if (route.children !== null && route.children && route.children.length !== 0) {
        route.children = formatAsyncRouters(route.children)

      }
      return true
    })
  }

  const addAsyncRouters = (routers) => {
    routers.forEach(route => {
      router.addRoute(route)
    })
    console.log("🚀 ~ file: ", routers)

  }

  const generateMenu = (routes) => {
    return routes.filter(item => {
      if (item.children && item.children.length !== 0) {
        generateMenu(item.children)
      }
      if (item.pathParams != null) {
        item.path = formatPath(item.path, JSON.parse(item.pathParams))
      }
      item.title = item.meta.title
      item.icon = item.meta.icon
      return true
    })
  }

    // 拼接地址
    const formatPath = (path, query) =>  {
      const queryArr = []
      let newPath = path
      for (const key in query) {
        queryArr.push({label: key, value: query[key]})
      }
      queryArr.forEach((item, index)=>{
        if(!index) {
          newPath += `?${item.label}=${item.value}`
        } else {
          newPath += `&${item.label}=${item.value}`
        }
      })
      return newPath
    }


  const loadView = (view) => {
    if (import.meta.env.MODE === 'development') {
      return () => import(/* @vite-ignore */`/src/views/${view}.vue`)
    } else {
      return VueComUrl['../views/' + view + '.vue']
    }
  }

  const removeMenu = () => {
    menuList.value = [
      {
        name: 'home',
        path: '/home',
        icon: 'home',
        title: '首页',
        meta: {
          breadcrumb: true
        }
      }
    ]
    asyncRouters.value.length = 0
  }


  return {
    asyncRouters,
    menuList,
    isLoadRoutes,
    isSussessReq,
    setAsyncRouters,
    setIsLoadRoutes,
    removeMenu,
    setIsSuccessReq
  }
})