<template>
  <div :class="{ 'has-logo': showLogo }"
    :style="{ backgroundColor: settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
    <logo v-if="showLogo" :collapse="isCollapse" />
    <el-scrollbar :class="settings.sideTheme" wrap-class="scrollbar-wrapper">
      <el-menu ref="menu" :default-active="activeMenu" :collapse="isCollapse"
        :background-color="settings.sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
        :text-color="settings.sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
        :unique-opened="true" :active-text-color="settings.theme" :collapse-transition="false" mode="vertical"
        @select="selectMenu">
        <sidebar-item v-for="(route, index) in sidebarRouters" :key="route.path + index" :item="route"
          :base-path="route.path" />
      </el-menu>
    </el-scrollbar>
  </div>
</template>

<script>
import { mapGetters, mapState } from 'vuex'
import Logo from './Logo'
import SidebarItem from './SidebarItem'
import variables from '@/assets/styles/variables.scss'
import { countMenu } from '@/api/menu'

export default {
  components: { SidebarItem, Logo },
  computed: {
    ...mapState(['settings']),
    ...mapGetters(['sidebarRouters', 'sidebar','ddRouters']),
    activeMenu() {
      const route = this.$route
      const { meta, path } = route
      // if set path, the sidebar will highlight the path you set
      if (meta.activeMenu) {
        return meta.activeMenu
      }
      return path
    },
    showLogo() {
      return this.$store.state.settings.sidebarLogo
    },
    variables() {
      return variables
    },
    isCollapse() {
      return !this.sidebar.opened
    }
  },
  methods: {
    formDataPamars(json) {
      const params = []
      for (const key in json) {
        const value = json[key]
        if (value && typeof value === 'object' && !Array.isArray(value)) {
          params.push(...Object.keys(value).map((k) => `${key}[${k}]=${encodeURIComponent(value[k])}`))
        } else if (Array.isArray(value)) {
          value.forEach((item) => {
            params.push(`${key}[]=${encodeURIComponent(item)}`)
          })
        } else {
          params.push(`${key}=${encodeURIComponent(value)}`)
        }
      }
      return params.join('&')
    },
    selectMenu(index, indexPath) {

      let arr = index.split('/')
      let obj = this.findNode(this.ddRouters, arr[arr.length-1])

      const params = {
        component:obj.component,
        menuId:'',
        menuName:obj.meta.title
      }
      console.log(params,'paramsparams')
      countMenu(this.formDataPamars(params)).then(res=>{
        console.log(res,'rssssssssssssss')
      })
    },
    
    findNode(tree, targetId) {
      for (let node of tree) {
        if (node.path === targetId) {
          return node
        }
        if (node.children) {
          const foundNode = this.findNode(node.children, targetId)
          if (foundNode) return foundNode
        }
      }
      return null
    }
  },
}
</script>
