<!--
@ 作者: 秦东
@ 时间: 2025-12-23 13:29:28
@ 备注: App应用授权
-->
<script lang='ts' setup>
import { appTableBut, appListBut,appDetailBut,formBaseBut,appGroupBut } from "@/utils/workflow/const";
import { AppMenuPowerTree, AppPowerTreeMaster, SetupAppMenuPower } from "@/api/system/roleapi/types";
import { getAppGroupo,getGroupAppList,getAppMenuList,appGroupPowerConfig,appPowerConfig } from "@/api/system/roleapi/postrole";
import { orgInfo } from "@/api/displayboardapi/types";

const props = defineProps({
    appType: {
        type: String,
        default: "app"
    },
    powerType: {
        type: String,
        default: "org"
    },
    roleId: {
        type: String,
        default: "313"
    },
    orgTree: {
        type: Array as PropType<orgInfo[]>,
        default: () => []
    }
})
const orgTree = computed(() => props.orgTree);
const oneGroupActiveTab = ref<string>("first");	//单个分组权限选择
const oneAppActiveTab = ref<string>("first");	//单个分组权限选择
const appGroupPower = reactive<SetupAppMenuPower>({
	groupButPower:[],
	appList:[]
});	//应用分组权限
const oneGroupAppList = ref<AppPowerTreeMaster[]>([]);
const oneAppMenuList = ref<AppMenuPowerTree[]>([]);
const systemMenuTreePropsing = {
    children: "child",
    label: "name",
    value: "id",
};
const groupLoading = ref<boolean>(false);
const appLoading = ref<boolean>(false);
const menuLoading = ref<boolean>(false);
/**
@ 作者: 秦东
@ 时间: 2025-12-25 10:36:22
@ 功能: 初始化获取数据
*/
const getAppList = () => {
	groupLoading.value = true;
	let sendData = {
		powerId: props.roleId,
		powerType: props.powerType,
	}
	getAppGroupo(sendData).then((res:any) => {
		console.log("初始化获取数据--->",res)
		if(res.code == 0){
			appGroupPower.groupButPower = res.data.groupButPower;
			appGroupPower.appList = res.data.groupList;
			if(res.data.groupList && Array.isArray(res.data.groupList) && res.data.groupList.length > 0){
				oneGroupActiveTab.value = res.data.groupList[0].id;
				nextTick(() => {
					getGroupAppListOne();
				})
			}
		}
		groupLoading.value = false;
	}).finally(() => {
		groupLoading.value = false;
	})
}
/**
@ 作者: 秦东
@ 时间: 2025-12-25 11:07:44
@ 功能: 获取App列表
*/
const getGroupAppListOne = () => {
	appLoading.value = true;
	menuLoading.value = true;
	let sendData = {
		roleId: props.roleId,
		powerType: props.powerType,
		group: oneGroupActiveTab.value,
	}
	getGroupAppList(sendData).then((res:any) => {
		console.log("获取App列表--->",res)
		if(res.code == 0){
			oneGroupAppList.value = res.data;
			if(res.data && Array.isArray(res.data) && res.data.length > 0){
				oneAppActiveTab.value = res.data[0].id;
				nextTick(() => {
					getAppMenuListOne();
				})
			}
		}
		appLoading.value = false;
	}).finally(() => {
		appLoading.value = false;
	})
}
/**
@ 作者: 秦东
@ 时间: 2025-12-25 13:36:45
@ 功能: 获取菜单列表
*/
const getAppMenuListOne = () => {
		menuLoading.value = true;
	let sendData = {
		roleId: props.roleId,
		powerType: props.powerType,
		group: oneGroupActiveTab.value,
		appId: oneAppActiveTab.value,
	}
	getAppMenuList(sendData).then((res:any) => {
		console.log("获取菜单列表--->",res)
		if(res.code == 0){
			// oneGroupAppList.value = res.data;
			oneAppMenuList.value = res.data;
		}
		menuLoading.value = false;
	}).finally(() => {
		menuLoading.value = false;
	})
}

/**
@ 作者: 秦东
@ 时间: 2025-12-25 16:21:19
@ 功能: 监听变化App分组
*/
watch(() => oneGroupActiveTab.value, (newVal, oldVal) => {
	if(newVal != oldVal){
		getGroupAppListOne();
	}
},{
	deep: true
})

/**
@ 作者: 秦东
@ 时间: 2025-12-25 16:30:05
@ 功能: 监听变化App应用
*/
watch(() => oneAppActiveTab.value, (newVal, oldVal) => {
	if(newVal != oldVal){
		getAppMenuListOne();
	}
},{
	deep: true
})
/**
@ 作者: 秦东
@ 时间: 2025-12-25 16:40:07
@ 功能: app权限全选
*/
const pickAppAllPower = (item:AppPowerTreeMaster) => {
	console.log("app权限全选--->",item)
	if(item.isPick){
		item.operationButton = ["bjapp","scapp","xzfg","scfg","yzfg","xz","bj","sc","yz","jczdh","yysz","yyfb"]
	}else{
		item.operationButton = [];
	}
}
/**
@ 作者: 秦东
@ 时间: 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.formPowerIsAll = true
        item.listPower = [  "newAdd", "import", "export", "sc", "dy", "showQrCode","del","bj"]
		item.listPowerIsAll = true
    }else{
        item.formPower = []
        item.listPower = []
		item.listPowerIsAll = false
		item.formPowerIsAll = false
    }
    if(item.children && Array.isArray(item.children)){
        item.children = handleAppChange(item.children,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"]
				menu.listPowerIsAll = true
				menu.formPowerIsAll = true
            }else{
                menu.formPower = []
                menu.listPower = []
				menu.listPowerIsAll = false
				menu.formPowerIsAll = false
            }
            if(menu.children && Array.isArray(menu.children)){
                menu.children = handleAppChange(menu.children,isTrue)
            }
        })
     }
    
    return item
}
/**
@ 作者: 秦东
@ 时间: 2025-12-20 15:33:37
@ 功能: 全选
*/
const pickAllBut = (item:any,types:number) => {
    console.log("--全选------------------------>",item,types)
    // item.isTrue = !item.isTrue
    switch(types){
        case 1:
            // item.pagePowerIsAll = item.isTrue
            item.pagePower = item.pagePowerIsAll ? ["lc","lb","sj","dy","nc"] : []
            
            break
        case 2:
            // item.formPowerIsAll = item.isTrue
            item.formPower = item.formPowerIsAll ? ["zc", "tj", "dy", "sc", "fz"] : []
            break
        case 3:
            // item.listPowerIsAll = item.isTrue
            item.listPower = item.listPowerIsAll ? ["newAdd", "import", "export", "sc", "dy", "showQrCode","del","bj"] : []
            break
        case 4:
            // item.isTrue = item.isTrue
            item.operationButton = item.isPick ? ["bjapp","scapp","xzfg","scfg","yzfg","xz","bj","sc","yz","jczdh","yysz","yyfb"] : []
            break
    }
}
/**
@ 作者: 秦东
@ 时间: 2025-12-26 15:50:20
@ 功能: 分组全选全选
*/
const pickAllGroupBut = (item:any) => {
	console.log("分组全选全选--->",item)
	if(item){
		appGroupPower.groupButPower = ["xz","dl","bj","xzapp"]
	}else{
		appGroupPower.groupButPower = []
	}
}
/**
@ 作者: 秦东
@ 时间: 2025-12-25 16:53:11
@ 功能: 页面授权联动
*/
const changePageButBox = (item:any,types:number) => {
	console.log("页面授权联动--->",item.pagePower.length,item,types)
	if(item.pagePower.length == types){
		item.pagePowerIsAll = true
	}else{
		item.pagePowerIsAll = false
	}
}
/**
@ 作者: 秦东
@ 时间: 2025-12-26 15:47:23
@ 功能: 分组授权
*/
const changeGroupPageButBox = () => {
	groupLoading.value = true
	let sendData = {
		powerId: props.roleId,
		powerType: props.powerType,
		groupButPower: appGroupPower.groupButPower,
	}
	appGroupPowerConfig(sendData).then((res:any) => {
		if(res.code == 0){
			ElMessage({
				message: "分组授权成功",
				type: "success",
			});
		}else{
			ElMessage({
				message: res.msg,
				type: "error",
			});
		}
		groupLoading.value = false	
	}).finally(() => {
		groupLoading.value = false	
	})
	console.log("分组授权--->",sendData)
}
/**
@ 作者: 秦东
@ 时间: 2025-12-26 16:31:11
@ 功能: 提交应用授权
*/
const submintAppPower = (appCont:AppPowerTreeMaster) => {
	menuLoading.value = true
	let sendData = {
		powerId: props.roleId,
		powerType: props.powerType,
		appId: appCont.id,
		appIsTrue: appCont.isTrue,
		appPower: appCont.operationButton,
		menuList: oneAppMenuList.value,
	}
	appPowerConfig(sendData).then((res:any) => {
		if(res.code == 0){
			ElMessage({
				message: "应用授权成功",
				type: "success",
			});
		}else{
			ElMessage({
				message: res.msg,
				type: "error",
			});
		}
		menuLoading.value = false	
	}).finally(() => {
		menuLoading.value = false	
	})

	console.log("提交应用授权--->",sendData)
	console.log("提交应用授权--appCont->",appCont)
}
defineExpose({
    getAppList
})
</script>
<template>
	<div class="app-tabs-content">
		<div class="appGroupPowerBut">
			<div class="appGroupPowerButTitle">应用分组权限</div>
			<div class="appGroupPowerButList">
				<el-checkbox label="全选"  @change="pickAllGroupBut"  />
				<el-checkbox-group v-model="appGroupPower.groupButPower">
					<el-checkbox
						v-for="city in appGroupBut"
						:key="city.key"
						:label="city.label"
						:value="city.value"
					>
						{{ city.label }}
					</el-checkbox>
				</el-checkbox-group>
			</div>
			<div class="appGroupPowerButAuth">
				<el-button type="primary" v-loading="groupLoading" element-loading-text="Loading..." @click="changeGroupPageButBox">分组授权</el-button>
			</div>
		</div>
		<div class="appGroupTabs">
			<el-tabs v-model="oneGroupActiveTab" class="demo-tabs" v-loading="groupLoading" element-loading-text="Loading...">
				<el-tab-pane v-for="item in appGroupPower.appList " :key="item.id" label="应用权限" :name="item.id">
					<template #label>
						<div class="appTabsCheckbox">
							<el-checkbox  v-model="item.isTrue" /><span>{{item.name}}</span>
						</div>
					</template>
				</el-tab-pane>
			</el-tabs>
			<div class="appMenuBox">
				<div class="appInfoBox">
					<el-tabs v-model="oneAppActiveTab" class="demo-tabs left_hight" tab-position="left"  v-loading="appLoading" element-loading-text="Loading...">
						<el-tab-pane v-for="item in oneGroupAppList " :key="item.id" label="应用权限" :name="item.id">
							<template #label>
								<div class="apptitle">
									<el-checkbox  v-model="item.isTrue" /><span>{{item.name}}</span>
								</div>
							</template>
							<div class="oneAppPower" v-loading="menuLoading" element-loading-text="Loading...">
								
								<div class="appGroupPowerButTitle">App应用权限</div>
								<div style="width:100%; padding:0 5px;">
									<el-checkbox label="全选" v-model="item.isPick"  @change="pickAppAllPower(item)"  />
								</div>    
								<div class="app-form-checkbox">
									<el-checkbox-group v-model="item.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> 
								<div class="shouquan">
									<el-button type="primary" v-loading="menuLoading" element-loading-text="Loading..." @click="submintAppPower(item)">提交App权限</el-button>
								</div>
							</div>
						</el-tab-pane>
					</el-tabs>
				</div>
				<div class="appMenuBody">
					
					<el-table
						:data="oneAppMenuList"
						style="width: 100%;"
						class="tableScrollbar"
						row-key="id"
						border
						default-expand-all
						v-loading="menuLoading" element-loading-text="Loading..."
					>
						<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 label="全选" v-model="scope.row.pagePowerIsAll" @change="pickAllBut(scope.row,1)" />
                                <el-checkbox-group v-model="scope.row.pagePower">
                                    <el-checkbox
                                        v-for="city in formBaseBut"
                                        :key="city.key"
                                        :label="city.label"
                                        :value="city.value"
										@change="changePageButBox(scope.row,formBaseBut.length)"
                                    >
                                        {{ 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 label="全选" v-model="scope.row.formPowerIsAll" @change="pickAllBut(scope.row,2)" />
                                	<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 v-model="scope.row.listPowerIsAll" label="全选" @change="pickAllBut(scope.row,3)" />
                                <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>
				</div>
			</div>
		</div>
  	</div>
  
</template>
<style  lang='scss' scoped>
.app-tabs-content {
    width: 100%;
	display: flex;
	justify-content: space-between;
	.appGroupPowerBut{
		width: 120px;
		border: 1px solid #e4e7ed;
		
		.appGroupPowerButList{
			padding: 5px;
		}
		.appGroupPowerButAuth{
			padding: 5px;
			text-align: center;
			button{
				width: 100%;
			}
		}
	}
	.appGroupTabs{
		width: calc(100% - 140px);
		.appTabsCheckbox{
			display: flex;
			align-items: center;
			label{
				padding:0 5px 0 10px;
			}
			span{
				padding:0 10px 0 0;
			}
		}
		:deep .el-tabs__content{
			padding: 0;
		}
	}

    
}
.left_hight{
    height: calc(100vh - 350px);
}
.appGroupPowerButTitle{
	font-size: 16px;
	font-weight: bold;
	background-color: #f5f7fa;
	padding: 5px;
	border-radius: 5px;
}
.oneAppPower{
	width: 120px;
	border: 1px solid #e4e7ed;
	.app-form-checkbox{
		padding:0 5px;
	}
}
.tableScrollbar{
    width: 100%;
    height: calc(100vh - 365px);
    overflow: hidden;
    overflow-y: auto;
	margin-top: 15px;
}
.appMenuBox{
	display: flex;
	justify-content: space-between;
	.appInfoBox{
		width: 410px;
		::deep .el-tabs__content{
			padding: 0;
		}
	}
	.appMenuBody{
		width: calc(100% - 410px);
	}
}
.apptitle{
	width: 200px;
    text-align: left;
    padding: 0 10px;
    display: flex;
    align-items: center;
	overflow-x: auto;
	 word-wrap: break-word; /* 旧版浏览器兼容 */
  overflow-wrap: break-word; /* 标准属性 */
  word-break: break-all; /* 强制任意字符断行 */
  white-space: pre-wrap; /* 保留空格换行 */
    span{
        margin-left: 5px;
    }
}
.shouquan{
	width: 100%;
	text-align: center;
	padding: 5px 0 10px 0;
}
</style>
