<!--
@ 作者: 秦东
@ 时间: 2025-12-17 16:53:07
@ 备注: 
-->
<script lang='ts' setup>
import { appTableBut, appListBut,appDetailBut,formBaseBut,appGroupBut } from "@/utils/workflow/const";
import { orgInfo } from '@/api/displayboardapi/types';
import { appInitAuthorization,tabsAuthorizationMode } from "@/api/system/roleapi/postrole";
import type { TabsPaneContext } from 'element-plus'

const props = defineProps({
    appType: {
        type: String,
        default: "app"
    },
    powerType: {
        type: String,
        default: ""
    },
    roleId: {
        type: String,
        default: ""
    },
    orgTree: {
        type: Array as PropType<orgInfo[]>,
        default: () => []
    }
})
const appLoading = ref(false)
const submitLoading = ref(false)
const appPowerArt = ref<any>([])
const appGroupButAry = ref<string[]>([])
const powerActiveName = reactive({
    group:"",
    app:""
})
const systemMenuTreePropsing = {
    children: "child",
    label: "name",
    value: "id",
};
/**
@ 作者: 秦东
@ 时间: 2025-05-13 14:20:47
@ 功能: 获取自定义App
*/

const getAppList = () => {
    appLoading.value=true
    appPowerArt.value = []
    appGroupButAry.value = []
    appInitAuthorization({appType:"app",powerType:props.powerType,roleId:props.roleId}).then((data: any) => {
        console.log("获取自定义App", data);
        // appList.value = data.data;
        appPowerArt.value = data.data.appList
        appGroupButAry.value = data.data.groupButPower
        appLoading.value=false
        if(data.data.appList && Array.isArray(data.data.appList)){
            powerActiveName.group = data.data.appList[0].id
            if(data.data.appList[0].appList && Array.isArray(data.data.appList[0].appList)){
            powerActiveName.app = data.data.appList[0].appList[0].id
        }
        }
    }).finally(()=>{
        appLoading.value=false
        submitLoading.value = false
    })
};
/**
@ 作者: 秦东
@ 时间: 2025-12-18 10:17:07
@ 功能: 标签被选择
*/
const handleTabClick = (val:any) => {
 
  if(appPowerArt.value && Array.isArray(appPowerArt.value)){
    appPowerArt.value.find((item:any) => {
        if(item.id === powerActiveName.group){
            powerActiveName.app = item.appList[0].id
        }
    })

    // powerActiveName.app = appPowerArt.value.find((item:any) => item.id === powerActiveName.group)?.appList[0].id
  }
    
}
/**
@ 作者: 秦东
@ 时间: 2025-12-18 11:14:56
@ 功能: 选择分组
*/
const handleGroupChange = (item:any) => {
    console.log("-------------------------->",item)
    // if(item.isTrue){
       if(item.appList && Array.isArray(item.appList)){
            item.appList.find((app:any) => {
                app.isTrue = item.isTrue
                if(item.isTrue){
                    app.operationButton = ["bjapp","scapp","xzfg","scfg","yzfg","xz","bj","sc","yz","jczdh","yysz","yyfb"]
                }else{
                    app.operationButton = []
                }
                if(app.appMenuTree && Array.isArray(app.appMenuTree)){
                    app.appMenuTree = handleAppChange(app.appMenuTree,item.isTrue)
                }
            })
       }
    // }
}
/**
@ 作者: 秦东
@ 时间: 2025-12-18 11:23:40
@ 功能: 循环递归联动赋值
*/
const handleAppChange = (item:any,isTrue:boolean) => {
    // console.log("--------循环递归联动赋值------------------>",item)
     if(item && Array.isArray(item)){
        item.forEach((menu:any) => {
            menu.isTrue = isTrue
            if(isTrue){
                menu.formPower = [ "zc", "tj", "dy", "sc", "fz"]
                menu.listPower = [  "newAdd", "import", "export", "sc", "dy", "showQrCode","del","bj"]
            }else{
                menu.formPower = []
                menu.listPower = []
            }
            if(menu.children && Array.isArray(menu.children)){
                menu.children = handleAppChange(menu.children,isTrue)
            }
        })
     }
    
    return item
}
/**
@ 作者: 秦东
@ 时间: 2025-12-18 13:48:26
@ 功能: 选择App
*/
const handleAppPowerChange = (item:any) => {
    console.log("----------------选择App---------->",item)
    if(item.isTrue){
        item.operationButton = ["bjapp","scapp","xzfg","scfg","yzfg","xz","bj","sc","yz","jczdh","yysz","yyfb"]
    }else{
        item.operationButton = []
    }
    if(item.appMenuTree && Array.isArray(item.appMenuTree)){
        item.appMenuTree = handleAppChange(item.appMenuTree,item.isTrue)
    }
}
/**
@ 作者: 秦东
@ 时间: 2025-12-18 13:58:21
@ 功能: 选择App菜单是选中状态下，关联操作按钮
*/
const handleAppMenuChange = (item:any) => {
    // console.log("----------------选择App菜单---------->",item)
    if(item.isTrue){
        item.formPower = [ "zc", "tj", "dy", "sc", "fz"]
        item.listPower = [  "newAdd", "import", "export", "sc", "dy", "showQrCode","del","bj"]
    }else{
        item.formPower = []
        item.listPower = []
    }
    if(item.children && Array.isArray(item.children)){
        item.children = handleAppChange(item.children,item.isTrue)
    }
}
onMounted(()=>{
    // getAppList()
})
defineExpose({
    getAppList
})
/**
@ 作者: 秦东
@ 时间: 2025-12-18 14:16:49
@ 功能: 提交授权
*/
const submitPower = () => {
    submitLoading.value = true
    let sendData:any = {
        appType:"app",
        powerType:props.powerType,
        roleId:props.roleId,
        listPower:appPowerArt.value,
        groupPower:appGroupButAry.value
    }
    if(!props.roleId || props.roleId === ""){
        ElMessage.error("具体授权属性！")
        submitLoading.value = false
        return
    }
    console.log("----------------提交授权---------->",sendData)
    // submitLoading.value = true
    tabsAuthorizationMode(sendData).then((data: any) => {
        if(data.code === 0){
            ElMessage.success("授权成功！")
            submitLoading.value = false
        }else{
            ElMessage.error(data.msg)
        }
    }).catch((err: any) => {
        ElMessage.error(err.message)
        submitLoading.value = false
    })
}

</script>
<template>
    <div class="app-tabs-content" v-loading="appLoading">
        <el-checkbox-group v-model="appGroupButAry">
            <el-checkbox
                v-for="city in appGroupBut"
                :key="city.key"
                :label="city.label"
                :value="city.value"
            >
                {{ city.label }}
            </el-checkbox>
        </el-checkbox-group>
        
        <el-tabs v-model="powerActiveName.group" @tab-change="handleTabClick" class="demo-tabs " >
            <el-tab-pane v-for="item in appPowerArt" :label="item.name" :key="item.id" :name="item.id" class="center-content">
                <template #label>
                    <div class="app-tabs-checkbox">
                        <el-checkbox  v-model="item.isTrue" @change="handleGroupChange(item)" /><span>{{item.name}}{{ item.isTrue }}</span>
                    </div>
                    
                </template>
                <!--应用-->
                


                    <el-tabs v-model="powerActiveName.app" class="demo-tabs left_hight" tab-position="left">
                        <el-tab-pane v-for="app in item.appList" :label="app.name" :key="app.id" :name="app.id" class="center-content">
                            <template #label>
                                <div class="app-tabs-checkbox">
                                    <el-checkbox  v-model="app.isTrue" @change="handleAppPowerChange(app)" /><span>{{app.name}}</span>
                                </div>
                            </template>
                            
                            <div class="app-form-checkbox">
                                <el-checkbox-group v-model="app.operationButton">
                                    <el-checkbox
                                        v-for="city in appDetailBut"
                                        :key="city.key"
                                        :label="city.label"
                                        :value="city.value"
                                    >
                                        {{ city.label }}
                                    </el-checkbox>
                                </el-checkbox-group>
                            </div>
                            <el-table
                                :data="app.appMenuTree"
                                style="width: 100%;"
                                class="tableScrollbar"
                                row-key="id"
                                border
                                default-expand-all
                            >
                                <el-table-column prop="name" label="栏目名称" >
                                    <template #default="scope">
                                        <el-checkbox v-model="scope.row.isTrue"  :value="scope.row.isTrue" @change="handleAppMenuChange(scope.row)" ></el-checkbox>
                                        {{ scope.row.name }}
                                    </template>
                                </el-table-column>
                                <el-table-column prop="pagePower" label="页面权力" >
                                    <template #header>
                                        <el-text>页面权限</el-text>
                                    </template>
                                    <template #default="scope">
                                        <el-checkbox-group v-model="scope.row.pagePower">
                                            <el-checkbox
                                            v-for="city in formBaseBut"
                                            :key="city.key"
                                            :label="city.label"
                                            :value="city.value"
                                            >
                                            {{ city.label }}
                                            </el-checkbox>
                                        </el-checkbox-group>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="formPower" label="表单权限" >
                                    <template #header>
                                        <el-text>表单权限</el-text>
                                    </template>
                                    <template #default="scope">
                                        <el-checkbox-group v-model="scope.row.formPower">
                                            <el-checkbox
                                            v-for="city in appTableBut"
                                            :key="city.value"
                                            :label="city.label"
                                            :value="city.value"
                                            >
                                            {{ city.label }}
                                            </el-checkbox>
                                        </el-checkbox-group>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="listPower" label="listPower" >
                                    <template #header>
                                        <el-text>列表权限</el-text>
                                    </template>
                                    <template #default="scope">
                                        <el-checkbox-group v-model="scope.row.listPower">
                                            <el-checkbox
                                            v-for="city in appListBut"
                                            :key="city.key"
                                            :label="city.label"
                                            :value="city.value"
                                            >
                                            {{ city.label }}
                                            </el-checkbox>
                                        </el-checkbox-group>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="visibleRange" label="数据权限" >
                                    <template #header>
                                        <el-text>数据权限</el-text>
                                    </template>
                                    <template #default="scope">
                                        <el-radio-group
                                            v-model="scope.row.visibleRange.types"
                                        >
                                            <el-row>
                                                <el-col :span="24"><el-radio :value="1">本人</el-radio></el-col>
                                                <el-col :span="24"><el-radio :value="2">本岗位</el-radio></el-col>
                                                <el-col :span="24"><el-radio :value="3">本部门</el-radio></el-col>
                                                <el-col :span="24"><el-radio :value="4">本分部</el-radio></el-col>
                                                <el-col :span="24">
                                                    <el-radio :value="5">指定行政组织</el-radio>
                                                    <el-tree-select
                                                        v-if="scope.row.visibleRange.types == 5"
                                                        v-model="scope.row.visibleRange.attribute"
                                                        :data="orgTree"
                                                        style="width: 100%"
                                                        node-key="id"
                                                        :props="systemMenuTreePropsing"
                                                        clearable
                                                        multiple
                                                        :render-after-expand="false"
                                                        show-checkbox
                                                        collapse-tags
                                                        collapse-tags-tooltip
                                                    />
                                                </el-col>
                                                <el-col :span="24"><el-radio :value="6">所有</el-radio></el-col>
                                            </el-row>
                                        </el-radio-group>
                                    </template>
                                </el-table-column>

                            </el-table>

                        </el-tab-pane>
                    </el-tabs>
            </el-tab-pane>
            <el-affix position="bottom" :offset="100" style="margin-left: 250px;">
                <el-button v-loading="submitLoading" type="primary" @click="submitPower">确定授权</el-button>
            </el-affix>
        </el-tabs>
       
    </div>
</template>
<style  lang='scss' scoped>
.app-tabs-content {

    width: 100%;
    :deep .el-tabs__content{
        padding: 0;
    }
    .app-form-checkbox{
        width: 200px;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: 10px;
    }
}

.app-tabs-checkbox{
    width: 100%;
    text-align: left;
    padding: 0 10px;
    display: flex;
    align-items: center;
    span{
        margin-left: 5px;
    }
}
.center-content {
    display: flex;
    justify-content: space-between;
    height: 100%; /* 根据需要设置高度 */
    padding: 0px;
}
.tableScrollbar{
    width: 100%;
    height: calc(100vh - 365px);
    overflow: hidden;
    overflow-y: auto;
}
.left_hight{
    height: calc(100vh - 350px);
}
</style>
