<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 '@/viewsnew/application/permissionset/organization/index.vue'
import Role from '@/viewsnew/application/permissionset/role/index.vue'
import User from '@/viewsnew/application/permissionset/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 v-if="!route.query.name" :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: #E3E8F0;
   height: calc(100vh - 60px);
   display: flex;
   .permission-leftbox{
      width: 260px;
      height: 100%;
      // border-right: 1px solid #4f5052;
      // box-shadow: 0px 0px 10px rgba(219, 225, 236, 1);
      background: #fff;
      padding-top: 10px;
      .permission-leftbox-menu{
        width: 100%;
        height: 40px;
        line-height: 40px;
        color: #505050;
        font-size: 14px;
        padding-left: 35px;
        cursor: pointer;
      }
      .permission-leftbox-menu:hover{
        color: #0099ff;
      }
      .permission-leftbox-menu-active{
        background: rgba(64, 158, 255,0.1);
        color: #0099ff;
      }
   }
   .permission-rightbox{
      width: calc(100% - 260px);
      height: 100%;
      padding: 13px;
   }
}
  :deep(.el-tree){
    background:#ffffff;
    height: calc(100vh - 210px);
    overflow: auto;
    color: #505050;
    font-size: 14px;
   }
   :deep(.el-tree-node__content){
    height: 40px;
    line-height: 40px;
  }
  :deep(.el-tree-node__content:hover){
    background:#ffffff;
    color: #409eff;
  }
  :deep(.custom-tree-node){
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  :deep(.el-tree-node__content>.ed-tree-node__expand-icon){
    padding: 2px;
  }
  :deep(.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content){
    background: rgba(64, 158, 255,0.1);
    color: #409eff;
  }
  :deep(.el-tree-node:focus>.el-tree-node__content){
    background:#ffffff;
    color: #409eff;
  }
  :deep(.ed-input__wrapper){
    background: #ffffff;
    border: 1px solid #dcdfe6;
    box-shadow: none;
  }
  :deep(.ed-input__inner){
    color: #383838;
  }
  :deep(.ed-button){
    border-color: #dcdfe6;
  }
  :deep(.ed-button--primary){
    background-color:#409eff;
    color: #ffffff;
    border-color: #409eff;
  }
  :deep(.ed-button.is-disabled){
    background: #ffffff; 
    color:#C9C9C9;
    border-color: #f2f2f2; 
  }
  :deep(.ed-button.is-disabled, .ed-button.is-disabled:focus, .ed-button.is-disabled:hover){
    background: #ffffff; 
    color:#C9C9C9;
    border-color: #f2f2f2;
  }
  :deep(.el-table){
    background-color: #ffffff;
  }
  :deep(.el-table th.el-table__cell){
    background-color: #fafafa;
    border-color: #f0f1f2;
    color: #787878 ;
  }
  :deep(.el-table tr){
    background-color: #ffffff;
    border-color: #f0f1f2;
  }
  :deep(.el-table--border .el-table__inner-wrapper:after, .el-table--border:after, .el-table--border:before, .el-table__inner-wrapper:before){
    background-color: #f0f1f2;
  }
  :deep(.el-table__border-bottom-patch, .el-table__border-left-patch){
    background-color: #f0f1f2;
  }
  :deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf){
    border-color: #f0f1f2;
  }
  :deep(.el-table .el-table__cell){
    background: #ffffff;
    color: #787878;
  }
  :deep(.el-table__body-wrapper tr td.el-table-fixed-column--left, .el-table__body-wrapper tr td.el-table-fixed-column--right, .el-table__body-wrapper tr th.el-table-fixed-column--left, .el-table__body-wrapper tr th.el-table-fixed-column--right, .el-table__footer-wrapper tr td.el-table-fixed-column--left, .el-table__footer-wrapper tr td.el-table-fixed-column--right, .el-table__footer-wrapper tr th.el-table-fixed-column--left, .el-table__footer-wrapper tr th.el-table-fixed-column--right, .el-table__header-wrapper tr td.el-table-fixed-column--left, .el-table__header-wrapper tr td.el-table-fixed-column--right, .el-table__header-wrapper tr th.el-table-fixed-column--left, .el-table__header-wrapper tr th.el-table-fixed-column--right){
    background-color: #ffffff;
  }
  :deep(.hover-row > td){
    background: rgb(247,251,255) !important;
  }
  :deep(.ed-checkbox__input.is-checked .ed-checkbox__inner) {
    background-color: #409eff;
    border-color: #409eff;
  }
  :deep(.ed-switch.is-checked .ed-switch__core){
    border-color: #409eff;
    background-color: #409eff;
  }
  :deep(.ed-checkbox__input.is-indeterminate .ed-checkbox__inner){
    border-color: #409eff;
    background-color: #409eff;
  }
  :deep(.ed-input.is-disabled .ed-input__wrapper){
    box-shadow: none;
  }
  :deep(.ed-textarea__inner){
    border: 1px solid #dcdfe6;
    box-shadow: none;
  }
  :deep(.ed-select .ed-input.is-focus .ed-input__wrapper){
    box-shadow: none !important;
  }
  :deep(.ed-select:hover:not(.ed-select--disabled) .ed-input__wrapper){
    box-shadow: none !important;
  }
  :deep(.ed-select .ed-input__wrapper.is-focus){
    box-shadow: none !important;
  }
  :deep(.ed-dialog__header){
    padding: 13px 20px;
    border-bottom: 1px solid #f2f2f2;
    margin-right: 0px;
    background-color: #f8f8f8;
  }
  :deep(.ed-dialog__headerbtn){
    color: #323232;
    top: 11px !important;
    right: 15px !important;
  }
  :deep(.ed-dialog__title){
    color: #323232;
  }
  :deep(.ed-form-item.is-error .ed-input__wrapper){
    box-shadow:none;
    border: 1px solid #f54a45;
  }
  // :deep(.ed-pagination__total){
  //   color: #1f2329 !important;
  // }
  :deep(.ed-checkbox__inner){
    background-color: #ffffff !important;
    border:1px solid #bbbfc4 !important;
  }
</style>
