<script lang="ts" setup>
import Header from './header.vue'
import { findApplicationById } from "@/api/application/application";
import { useRoute, useRouter } from 'vue-router'
import { computed,reactive, ref, shallowRef, nextTick, watch, onMounted } from 'vue'
import Organization from './organization/index.vue'
import Role from './role/index.vue'
import User from './user/index.vue'
const projectInfo:any =ref({})
const route = useRoute()
const router = useRouter()
const applicationId:any =ref("")
const curmenu = ref('')
onMounted(() => {
  if (route.query.id) {
    applicationId.value = route.query.id
    curmenu.value = '组织机构配置'
    findApplicationById(applicationId.value).then(res => {
      res.data.data.typename = '权限设置'
      projectInfo.value = res.data.data
    })
  }else{
    
  }
})
function menuclick(name){
  curmenu.value = name
}
</script>

<template>
   <div>
      <Header :projectInfo="projectInfo"/>
      <div class="permission-box">
        <div class="permission-leftbox">
          <div class="permission-leftbox-menu" :class="curmenu == '组织机构配置' ? 'permission-leftbox-menu-active' : ''" @click="menuclick('组织机构配置')">组织机构配置</div>
          <div class="permission-leftbox-menu" :class="curmenu == '系统角色配置' ? 'permission-leftbox-menu-active' : ''" @click="menuclick('系统角色配置')">系统角色配置</div>
          <div class="permission-leftbox-menu" :class="curmenu == '系统用户配置' ? 'permission-leftbox-menu-active' : ''" @click="menuclick('系统用户配置')">系统用户配置</div>
        </div>
        <div class="permission-rightbox">
          <Organization v-if="curmenu == '组织机构配置'" :applicationId="applicationId" />
          <Role v-if="curmenu == '系统角色配置'" :applicationId="applicationId" />
          <User v-if="curmenu == '系统用户配置'" :applicationId="applicationId" />
        </div>
      </div>
    </div>
</template>

<style lang="less" scoped>
.permission-box{
   background: rgb(21,21,21);
   height: calc(100vh - 60px);
   display: flex;
   .permission-leftbox{
      width: 260px;
      height: 100%;
      border-right: 1px solid #4f5052;
      background: rgb(37,38,38);
      padding-top: 10px;
      .permission-leftbox-menu{
        width: 100%;
        height: 40px;
        line-height: 40px;
        color: #ffffff;
        font-size: 14px;
        padding-left: 35px;
      }
      .permission-leftbox-menu:hover{
        background: rgb(54,55,56);
      }
      .permission-leftbox-menu-active{
        background: rgb(26,68,103);
      }
   }
   .permission-rightbox{
      width: calc(100% - 260px);
      height: 100%;
      padding: 13px;
   }
}
</style>
<style>
.ed-dialog__header{
  padding: 13px 20px;
  border-bottom: 1px solid #333333;
  margin-right: 0px;
}
.ed-dialog__headerbtn{
  color: #ffffff;
  top: 11px !important;
  right: 15px !important;
}
.ed-dialog__title{
  color: #ffffff;
}

.ed-dialog {
  border: 1px solid #5f5f5f;
  border-radius: 4px;
  background: #212121;
}
.dialog-footer .ed-button{
  color: #F2F4F5;
  background-color: #212121;
  border: 1px solid #363636;
}
.dialog-footer .ed-button--primary{
  color: #F2F4F5;
  background-color: #0089ff;
  border: 1px solid #0089ff;
}
</style>