<!--
@ 作者: 秦东
@ 时间: 2025-10-21 10:06:51
@ 备注: 在线人数
-->
<script lang='ts' setup>
import { giveRoleTree,editRoleStatus,getOrgPostTree } from '@/api/role/index'
import type {RoleListTree,RoleFormInfo,orgAndPostisListTree} from '@/api/role/types'
import type {  TreeNode,TreeInstance  } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { orgInfo } from "@/api/hr/org/type";
import { getOrgTreeList } from "@/api/hr/org/index";

import AddRoleGroup from '@/views/system/monitor/online/roleConfig/addRoleGroup.vue'
import EditRoleGroup from '@/views/system/monitor/online/roleConfig/editRoleGroup.vue'

const orgTree = ref<orgInfo[]>([])
const roleGroupOrInfo = ref(1)
const searchQuery = ref('')
const orgWorkRole = ref("org")
const appSysPick = ref("system")
const treeRef = ref<TreeInstance>()
const treeRefOrg = ref<TreeInstance>()
const roleListdata = ref<RoleListTree[]>([])
const orgPostisListdata = ref<orgAndPostisListTree[]>([])
const treeBoxHeight = ref(300)
const treeBoxHeightOrg = ref(300)
const roleLeft = ref()
const props = {
  value: 'id',
  label: 'label',
  disabled:'status',
  children: 'children',
}
const propsOrg = {
  value: 'id',
  label: 'name',
  disabled:'status',
  children: 'child',
}
const propsOrgPost = {
  value: 'id',
  label: 'label',
  disabled:'status',
  children: 'children',
}
const roleLoading = ref(false)
const openRoleGroup = ref(false)
const orgLoading = ref(false)
const orgPostLoading = ref(false)
//搜索角色
const onQueryChanged = (query: string) => {
  treeRef.value!.filter(query)
}
//搜索行政组织
const onQueryChangedOrg = (query: string) => {
  treeRefOrg.value!.filter(query)
}
const filterMethod = (query: string, node: any) => node.label!.includes(query)
const filterMethodOrg = (query: string, node: any) => node.name!.includes(query)

//监测赋权组
watch(()=>orgWorkRole.value,(val:string)=>{
    console.log("监测赋权组",val)
    switch(val){
        case "org":
            getOrgTreeAry();
            break;
        case "job":
            getOrgPostisTree()
            break;
        case "role":
            getRoleTree();
            break;
        default:
    }
},{
    deep:true
})
//选中角色节点
const pickRoleTree = (data:any) => {
    if(data.status && data.types==1){
        console.log("监测赋权组------->",data)
    }
}
//选择行政组织
const pickOrgTree = (data:any) => {
    console.log("监测赋权组------->",data)
}
//获取角色树
const getRoleTree = () => {
    roleLoading.value = true
    giveRoleTree().then(({data})=>{
        console.log("监测赋权组------->",data)
        roleListdata.value=data;
        roleLoading.value = false;
    }).finally(()=>{roleLoading.value = false})
}
const editRoleCont = ref<RoleFormInfo>()
const openEditRoleGroup = ref(false)
//编辑角色信息
const editMyInfoIcon = (data:RoleListTree,types:number) => {
    console.log("编辑角色信息------->",data)
    console.log("编辑角色信息---types---->",types)
    switch(types){
        case 1:
            editRoleStatusBut(data.id,2)
            break;
        case 2:
            editRoleStatusBut(data.id,1)
            break;
        case 3:
            editRoleCont.value = {
                id:data.id,
                name:data.label,
                type:data.types,
                superior:data.superior,
                sort:data.sort
            }
            openEditRoleGroup.value = true
            break;
        case 4:
            ElMessageBox.confirm(
                "您确定要删除此信息吗？一经删除！数据将不可恢复！请慎重操作！",
                "警告",
                {
                    confirmButtonText: '确定删除',
                    cancelButtonText: '取消删除',
                    type: 'warning',
                }
            ).then(()=>{
                editRoleStatusBut(data.id,3)
            })
            break;            
        default:
            break;
    }
}
//编辑角色状态
const editRoleStatusBut = (id:string|number,types:number) => {
    // console.log("编辑角色状态--->",id)
    editRoleStatus({id:id.toString(),status:types}).then((data:any)=>{
                if(data.code==0){
                    ElMessage({
                        message: data.msg,
                        type: 'success',
                    })
                    getRoleTree()
                }else{
                    ElMessage({
                        message: data.msg,
                        type: 'success',
                    })
                }
            })
}
//添加角色组
const addRoleGroup = (types:number) => {
    
    roleGroupOrInfo.value = types
    openRoleGroup.value = true     
}
//获取行政组织树
const getOrgTreeAry = () => {
    roleLoading.value = true
    if(!Array.isArray(orgTree.value) || orgTree.value.length<=0){
        
        getOrgTreeList({ orgid: 0 })
        .then(({ data }) => {
            orgTree.value = data
            roleLoading.value = false
        }).finally(()=>{roleLoading.value = false})
    }else{
        roleLoading.value = false
    }
    
}
//获取行政组织及岗位
const getOrgPostisTree = () => {
    orgPostLoading.value=true
    if(!Array.isArray(orgPostisListdata.value) || orgPostisListdata.value.length<=0){
        
        getOrgPostTree({id:"313"}).then(({data})=>{
            console.log("获取行政组织及岗位--------->",data)
            orgPostisListdata.value = data
            orgPostLoading.value=false
        }).finally(()=>{orgPostLoading.value=false})
    }else{
        orgPostLoading.value=true
    }
}
onMounted(()=>{
    getOrgTreeAry();
    console.log("高度-----1---->",roleLeft.value?.offsetHeight)
    nextTick(()=>{
        treeBoxHeight.value = roleLeft.value?.offsetHeight - 140
        treeBoxHeightOrg.value = roleLeft.value?.offsetHeight - 100
    })
    
})
</script>
<template>
    <div class="roleBox">
        <div ref="roleLeft" class="roleLeft">
            <el-tabs v-model="orgWorkRole" class="demo-tabs">
                <el-tab-pane label="行政组织" name="org">
                    <template #label>
                        <el-text class="tabsTitle">行政组织</el-text>
                    </template>
                    <div class="searchBox">
                        <el-input v-model="searchQuery" placeholder="请输入要查找的行政组织" :suffix-icon="Search" @input="onQueryChangedOrg"/>
                    </div>
                    <el-tree-v2
                        ref="treeRefOrg"
                        style="max-width: 350px;"
                        :data="orgTree"
                        :props="propsOrg"
                        :filter-method="filterMethodOrg"
                        :height="treeBoxHeightOrg"
                        v-loading="roleLoading"
                        :highlight-current="true"
                        :check-on-click-node="true"
                        :expand-on-click-node="false"
                        @node-click="pickOrgTree"
                    >
                    </el-tree-v2>
                </el-tab-pane>
                <el-tab-pane label="岗位" name="job">
                    <template #label>
                        <el-text class="tabsTitle">岗位</el-text>
                    </template>
                    <div class="searchBox">
                        <el-input v-model="searchQuery" placeholder="请输入要查找的行政组织" :suffix-icon="Search" @input="onQueryChangedOrg"/>
                    </div>
                    <el-tree-v2
                        ref="treeRefOrg"
                        style="max-width: 350px;"
                        :data="orgPostisListdata"
                        :props="propsOrgPost"
                        :filter-method="filterMethodOrg"
                        :height="treeBoxHeightOrg"
                        v-loading="orgPostLoading"
                        :highlight-current="true"
                        :check-on-click-node="true"
                        :expand-on-click-node="false"
                        @node-click="pickOrgTree"
                    >
                    </el-tree-v2>
                </el-tab-pane>
                <el-tab-pane label="角色" name="role">
                    <template #label>
                        <el-text class="tabsTitle">角色</el-text>
                    </template>
                    <div class="butBox">
                        <el-button type="primary" @click="addRoleGroup(1)">新建角色组</el-button>
                        <el-button type="primary" @click="addRoleGroup(2)">新建角色</el-button>
                    </div>
                    <div class="searchBox">
                        <el-input v-model="searchQuery" placeholder="请输入要查找的角色" :suffix-icon="Search" @input="onQueryChanged"/>
                    </div>
                    <el-tree-v2
                        ref="treeRef"
                        style="max-width: 350px;"
                        :data="roleListdata"
                        :props="props"
                        :filter-method="filterMethod"
                        :height="treeBoxHeight"
                        v-loading="roleLoading"
                        :highlight-current="true"
                        :check-on-click-node="true"
                        :expand-on-click-node="false"
                        @node-click="pickRoleTree"
                    >
                        <template #default="{ node }" >
                            <div class="treeRoleBox">
                                <span>{{ node.label }}</span>
                                <div class="spanButBox">
                                    <el-text v-if="node.disabled"  type="warning" size="small" @click.stop="editMyInfoIcon(node.data,1)">禁用</el-text>
                                    <el-text v-else  type="success" size="small" @click.stop="editMyInfoIcon(node.data,2)">启用</el-text>
                                    <el-text  type="primary" size="small" @click.stop="editMyInfoIcon(node.data,3)">编辑</el-text>
                                    <el-text  type="danger" size="small" @click.stop="editMyInfoIcon(node.data,4)">删除</el-text>
                                </div>
                            </div>
                        </template>
                    </el-tree-v2>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="roleright">
            <el-tabs v-model="appSysPick" class="demo-tabs">
                <el-tab-pane label="平台" name="system">
                    <template #label>
                        <el-text class="tabsTitleCont">平台</el-text>
                    </template>
                </el-tab-pane>
                <el-tab-pane label="应用" name="app">
                    <template #label>
                        <el-text class="tabsTitleCont">应用</el-text>
                    </template>
                </el-tab-pane>
            </el-tabs>
        </div>
        <AddRoleGroup v-if="openRoleGroup" v-model:show="openRoleGroup" :group-info="roleGroupOrInfo" @resthandel="getRoleTree" />
        <EditRoleGroup v-if="openEditRoleGroup" v-model:show="openEditRoleGroup" :group-info="roleGroupOrInfo" :data="editRoleCont" @resthandel="getRoleTree" />
    </div>
</template>
<style  lang='scss' scoped>
.roleBox{
    display: flex;
    width: 100%;
    height: calc(100vh - 170px);
    padding: 15px 20px 0 20px;
    justify-content: space-between;
    .roleLeft{
        width: 350px;
        height: calc(100vh - 185px);
        background-color: #FFFFFF;
        .butBox{
            display: flex;
            justify-content: space-between;
            padding: 0 10px 10px 10px;
        }
        .searchBox{
            padding: 0 10px 10px 10px;
        }
        .treeBox{
            height: calc(100vh - 330px);
            
        }
    }
    .roleright{
        width: calc(100% - 370px);
        height: calc(100vh - 185px);
        background-color: #FFFFFF;
    }
    .tabsTitle{
        padding: 0 15px;
    }
    .tabsTitleCont{
        padding: 0 35px;
    }
    .treeRoleBox{
        display: flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
    }
    .spanButBox{
        span{
            padding: 0 5px;
        }
    }
}

</style>
