<!--
@ 作者: 秦东
@ 时间: 2024-07-22 11:28:18
@ 备注: 自定义App主容器
-->
<script lang='ts' setup>
import { appMenuTreeInfo,appSetInfo } from "@/api/date/type"
import { useUserStore } from "@/store/modules/user";
import { gainAppEditPsge } from '@/api/DesignForm/requestapi'

import  RegularPage  from "@/views/sysworkflow/lowcodepage/runApp/regularPage.vue"
import  RunAppForm  from "@/views/sysworkflow/lowcodepage/runApp/runAppForm.vue"

const props = defineProps({
	drawerWith:{
		type:Number,
		default:0
	},
	runIsOpen:{
		type: Boolean,
		default: false,
	},
	pickAppInfo:{
		type:Object,
		default(){
			return {}
		}
	},
	searchQuery:{
		type:Object,
		default(){
			return {}
		}
	}
});
const emits = defineEmits(["update:runIsOpen","refreshPage"]);
const userStore = useUserStore();
const menusTree = ref<appMenuTreeInfo[]>([])		//菜单树
const pickAppMenu = ref("")   //选中的菜单
const switchPAge = ref(1)     //页面类型 1：执行页面，2：表单页面
const pickAppMenuSel = ref("")  //下拉框选中的值
/**
@ 作者: 秦东
@ 时间: 2024-07-22 11:40:06
@ 功能: 应用进出配置
*/
const appCont = reactive<appSetInfo>({
	appKey:"1",	
	appName:"未知应用",	
	appSvg:"",	
	state:1,	
	uuid:"1",
	describe:""
})

/**
@ 作者: 秦东
@ 时间: 2024-04-23 15:23:31
@ 功能: 获取app信息
*/
const gainAppContent = () =>{
	let sendInfo = {
		id:props.pickAppInfo.signCodeStr
	}
	console.log("获取app信息---》",props.pickAppInfo)	
	gainAppEditPsge(sendInfo)
		.then((data)=>{
			// console.log("获取app信息---》",data)	
			menusTree.value = data.data.menuTree
			appCont.appKey = data.data.appKey;	
			appCont.appName = data.data.appName;	
			appCont.appSvg = data.data.appSvg;	
			appCont.state = data.data.state;	
			appCont.uuid = data.data.uuid;
			let isIn = true;
			data.data.menuTree.forEach((item)=>{
				if(item.isLock == 1 && item.isMain == 1){
					pickAppMenu.value = item;
					isIn = false;
					switchPAge.value = 1
				}
			})
			if(isIn){
				pickAppMenu.value = data.data.menuTree[0];
				if (pickAppMenu.value.type == 2){
					switchPAge.value = 2
				}
			}
		})
}
/**
@ 作者: 秦东
@ 时间: 2024-05-30 15:17:29
@ 功能: 退出应用
*/
const closeRunApp = () => {
	emits("update:runIsOpen",false)
	emits("refreshPage",props.searchQuery)
}

watch(()=>props.runIsOpen,(val:boolean)=>{
	if(val){
		gainAppContent()
	}
})
/**
@ 作者: 秦东
@ 时间: 2024-05-17 16:45:40
@ 功能: 打开app表单
*/
const openAppPage = (val:any) =>{
	console.log("打开app表单------>",val)
	if(val.type!=1){
		if(val.isLock==1){
			switchPAge.value = 1
		}else{
			switchPAge.value = 2
		}
		pickAppMenu.value = val
	}
}
</script>
<template>
	<el-drawer  v-model="props.runIsOpen" :with-header="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="props.drawerWith">
		<el-container  class="common-layout">
			<el-header  class="headerBox">
				<div>
					<el-space wrap>
						<el-avatar shape="square" :size="25" :src="appCont.appSvg" />
						<el-text>{{ appCont.appName }}</el-text>
					</el-space>
				</div>
				<div>
					<el-dropdown>
						<el-avatar shape="square" :size="25" :src="userStore.avatar" />
						<template #dropdown>
							<el-dropdown-item>
								<table class="userTabel">
									<tr>
										<td rowspan="2"><el-avatar shape="square" :size="55" :src="userStore.avatar" /></td>
										<td>{{ userStore.nickname }}({{ userStore.userInfoCont.number }})</td>
									</tr>
									<tr>
										<td>{{ userStore.userInfoCont.companyname }}/{{ userStore.userInfoCont.departmentname }}</td>
									</tr>
								</table>
							</el-dropdown-item>
							<el-dropdown-item @click="closeRunApp()" divided>
								<i class="fa fa-sign-out"></i>
								<el-text class="mx-1" type="danger">退出</el-text>
							</el-dropdown-item>
						</template>
					</el-dropdown>
				</div>
			</el-header>
			<el-container>
				<el-aside class="asideBox">
					<el-row>
						<el-col :span="24" class="asideBoxSearch">
							<el-tree-select
								v-model="pickAppMenuSel"
								:data="menusTree"
								:render-after-expand="false"
								:suffix-icon="Search"
								node-key="id"
								clearable
								filterable
							/>
						</el-col>
					</el-row>
					<el-tree
						:data="menusTree"
						node-key="id"
						:allow-drop="allowDrop"
						:expand-on-click-node="true"
					>
						<template #default="{ node, data }">
							<div class="appMenuTitle" @click="openAppPage(data)">
								<el-space wrap>
									<svg-icon  prefix="icon" :icon-class="data.svg"  />
									<el-tooltip :content="node.label" placement="top" effect="dark">
										<el-text class="w-120px mb-2" truncated >{{node.label}}</el-text>
									</el-tooltip>
								</el-space>
							</div>
						</template>
					</el-tree>
				</el-aside>
				<el-main  class="mainBox">
					<RegularPage v-if="switchPAge==1" :pick-app-menu="pickAppMenu" />
					<RunAppForm v-else  :pick-app-menu="pickAppMenu" />
				</el-main>
			</el-container>
		</el-container>
	</el-drawer>
</template>
<style  lang='scss' scoped>
.common-layout{
	.el-header{
		padding-left:10px;
		padding-right:10px;
	}
	.headerBox{
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1px solid #F1F2F3;
		:deep(.el-tabs__nav-wrap::after) {
			position: static !important;
		}
		:deep(.el-tabs__header){
			margin:0 0 1px 0;
		}
		:deep .el-card__body{
			padding: 0px 0;
		}
	}
	.asideBox{
		width:250px;
		border-right: 1px solid #F1F2F3;
		height: calc(100vh - 40px);
		.asideBoxSearch{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10px 10px;
			
		}
		.appMenuTitle{
			width: 100%;
			padding-right: 5px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.svgBox{
				display: none;
			}
		}
		.appMenuTitle:hover .svgBox{
			display: block;
		}
	}
	.el-main {
		padding: 0px;
	}
	.mainBox{
		background-color: #F1F2F3;
		padding:0px;
		.scroBox{
			height: calc(100vh - 40px);
		}
	}
}
</style>
