<script lang="ts" setup>
import { usePermissionStore } from '@/store/modules/permission'
import { formatRoute } from '@/router/establish'
import { ref, onMounted } from 'vue'
import router from '@/router';
import { useRoute } from 'vue-router';
const permissionStore = usePermissionStore()
const routers: any[] = formatRoute(permissionStore.getRoutersNotHidden as AppCustomRouteRecordRaw[])
const activeIndex:any = ref(0)
const route = useRoute();
onMounted(async () => {
  if(route.path == '/application/index'){
    activeIndex.value = 0 
  }else if(route.path == '/TemplateResource/index'){
    activeIndex.value = 1 
  }
})

function clickRoute(params:any) {
  if(activeIndex.value == params){
       return
  }
  activeIndex.value = params
  if(params == 0){
     router.push('/application/index')
  }else{
    if(params == 0){
      router.push('/application/index')
    }else if(params == 1){
      router.push('/TemplateResource/index')
    }
  }
}
</script>
<template>
  <div>
    <div class="flexlogo-box">
      <img src="@/assets/newimg/logo.png" alt="" >
      <div class="logo-left-text">GIS-BI开发平台</div>
    </div>
    <!-- <div v-for="(item,index) in routers" class="navmuen">{{ item.meta.title }}</div> -->
    <div style="margin: auto;width: 220px;">
      <img src="@/assets/newimg/u17.png" alt="" >
      <div class="logo-left-title">项目</div>
    </div>
    <div class="navmuen" :class="activeIndex === 0 && 'active'" @click="clickRoute(0)">
      <img src="@/assets/newimg/u22.png" alt="" style="margin-left: 15px;margin-right: 10px;">
      <div>平台项目</div>
    </div>

    <div style="margin: auto;width: 220px;">
      <img src="@/assets/newimg/u17.png" alt="" >
      <div class="logo-left-title">模板</div>
    </div>
    <div  class="navmuen" :class="activeIndex === 1 && 'active'" @click="clickRoute(1)">
      <img src="@/assets/newimg/u56.png" alt="" style="margin-left: 15px;margin-right: 10px;">
      <div>模板资源</div>
    </div>
    <div style="margin: auto;width: 220px;">
      <img src="@/assets/newimg/u17.png" alt="" >
      <div class="logo-left-title">用户</div>
    </div>
    <!-- <div  class="navmuen" :class="activeIndex === 2 && 'active'" @click="activeIndex = 2">
      <img src="@/assets/newimg/u42.png" alt="" style="margin-left: 15px;margin-right: 10px;">
      <div>平台菜单配置</div>
    </div> -->
    <div  class="navmuen" :class="activeIndex === 3 && 'active'" @click="activeIndex = 3">
      <img src="@/assets/newimg/u47.png" alt="" style="margin-left: 15px;margin-right: 10px;">
      <div>用户配置</div>
    </div>
  </div>

</template>
<style scoped>
.flexlogo-box{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 24px;
}
.logo-left-title{
  width: 220px;
  padding-left: 10px;
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #70737C;
  margin-top: 15px;
  margin-bottom: 5px;
}
.logo-left-text{
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", 微软雅黑;
  font-weight: 700;
  font-style: normal;
  font-size: 20px;
  color: rgb(255, 255, 255);
  margin-left: 10px;

}
.navmuen{
  width: 220px;
  height: 40px;
  font-family: 微软雅黑;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: rgb(242, 244, 245);
  text-align: left;
  border-radius: 4px;
  display: flex;
  align-items: center;
  margin: auto;
  cursor: pointer;
  margin-bottom: 5px;
}
.navmuen.active{
  background: rgb(0, 137, 255);
}
</style>