<!--
@ 作者: 秦东
@ 时间: 2024-04-18 14:08:56
@ 备注: 设置自建应用
-->
<script lang='ts' setup>
import { appMenuTreeInfo,appSetInfo } from "@/api/date/type"
import { gainAppEditPsge } from '@/api/DesignForm/requestapi'

import { Search } from '@element-plus/icons-vue'
import SvgIcon from "@/components/SvgIcon/index.vue";
import AppMenus from "@/views/sysworkflow/lowcodepage/appPage/appMenus.vue"
import AppMenuGroup from "@/views/sysworkflow/lowcodepage/appPage/appMenuGroup.vue"

const props = defineProps({
	drawerWith:{
		type:Number,
		default:0
	},
	formKey:{
		type:String,
		default:""
	},
	isShow:{
		type: Boolean,
		default: false,
	},
	groupKey:{
		type:String,
		default:""
	}
});
const emits = defineEmits(["update:isShow","update:svgName","refreshPage"]);
const squareUrl = 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'
const drawerOpenOrClose = ref(false)
const tabsActive = ref(1)
const menusTree = ref<appMenuTreeInfo[]>([])
const appCont = reactive<appSetInfo>({
	appKey:"1",	
	appName:"未知应用",	
	appSvg:"",	
	state:1,	
	uuid:"1"
})
const menuParentKey = ref<string>("")
const menuGroupShow = ref(false) //添加菜单分组
/**
@ 作者: 秦东
@ 时间: 2024-04-19 15:47:12
@ 功能: 选择选项
*/
const handleClick = () =>{}
/**
@ 作者: 秦东
@ 时间: 2024-04-23 09:56:19
@ 功能: 关闭
*/
const closeAppDraw = () =>{
	emits("update:isShow",false)
	emits("refreshPage")
}
onMounted(() =>{
	// gainAppContent()
})
watch(()=>props.isShow,(val:boolean)=>{
	if(val){
		gainAppContent()
	}
})
/**
@ 作者: 秦东
@ 时间: 2024-04-23 15:23:31
@ 功能: 获取app信息
*/
const gainAppContent = () =>{
	let sendInfo = {
		id:props.formKey.toString()
	}
	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;
		})
}

/**
@ 作者: 秦东
@ 时间: 2024-04-23 16:57:39
@ 功能: 添加菜单分组
*/
const addMenu = (key?:string) => {
	if(key){
		menuParentKey.value = key;
	}else{
		menuParentKey.value = "";
	}
	menuGroupShow.value = true;
}
/**
@ 作者: 秦东
@ 时间: 2024-05-06 11:09:44
@ 功能: 创建页面
*/
const addAppPageForm = (key?:string) => {

}
</script>
<template>
	<div  class="drawerClass">
		
		<el-drawer  v-model="props.isShow" title="设置/编辑自定义表单" :with-header="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="props.drawerWith">
			<div class="common-layout">
				<el-container>
					<el-header class="headerBox">
						<div>
							<el-space wrap>
								<el-avatar shape="square" :size="25" :src="appCont.appSvg" />
								<el-text>{{ appCont.appName }}</el-text>
								<el-tag v-if="appCont.state==1" type="success">已启用</el-tag>
								<el-tag v-else type="danger">已禁用</el-tag>
							</el-space>
						</div>
						<div>
							<el-tabs v-model="tabsActive" @tab-click="handleClick" :stretch="true" class="tabsMain">
								<el-tab-pane label="① 页面管理" :name="1">
								</el-tab-pane>
								<el-tab-pane label="② 集成&自动化" :name="2">
								</el-tab-pane>
								<el-tab-pane label="③ 应用设置" :name="3">
								</el-tab-pane>
								<el-tab-pane label="④ 应用发布" :name="4">
								</el-tab-pane>
							</el-tabs>
						</div>
						<div>
							<el-button plain size="small">访问</el-button>
							<el-button type="danger" size="small" @click="closeAppDraw">关闭</el-button>
						</div>
					</el-header>
					<el-container>
						<el-aside class="asideBox">
							<el-row>
								<el-col :span="24" class="asideBoxSearch">
										<el-input
											v-model="input2"
											style="width: 180px"
											placeholder="搜索"
											:suffix-icon="Search"
										/>
										<el-dropdown>
											<el-button type="primary" class="fa fa-plus" />
											<template #dropdown>
												<el-dropdown-menu>
													<!-- <el-dropdown-item  >
														<el-row>
															<el-col :span="24">
																<el-space wrap>
																	<svg-icon style="color: #79bbff;" prefix="icon" icon-class="puTongBiaoDan" />
																	新建普通表单
																</el-space>
															</el-col>
															<el-col :span="24" style="padding-left:20px; font-size:12px;">
																数据收集、事件记录
															</el-col>
														</el-row>
													</el-dropdown-item>
													<el-dropdown-item >
														<el-row>
															<el-col :span="24">
																<el-space wrap>
																	<svg-icon style="color: #eebe77;" prefix="icon" icon-class="liuChengBiaoDan" />
																	新建流程表单
																</el-space>
															</el-col>
															<el-col :span="24" style="padding-left:20px; font-size:12px;">
																任务协同、业务审批
															</el-col>
														</el-row>
													</el-dropdown-item> -->
													<el-dropdown-item  @click="addAppPageForm">
														<el-row>
															<el-col :span="24">
																<el-space wrap>
																	<svg-icon style="color: #eebe77;" prefix="icon" icon-class="liuChengBiaoDan" />
																	新建页面
																</el-space>
															</el-col>
															<el-col :span="24" style="padding-left:20px; font-size:12px;">
																数据收集、事件记录<br>任务协同、业务审批
															</el-col>
														</el-row>
													</el-dropdown-item>
													<el-dropdown-item divided @click="addMenu">
														<el-row>
															<el-col :span="24">
																<el-space wrap>
																	<svg-icon style="color: #337ecc;" prefix="icon" icon-class="fenZhu" />
																	新建分组
																</el-space>
															</el-col>
															<el-col :span="24" style="padding-left:20px; font-size:12px;">
																应用项目管理
															</el-col>
														</el-row>
													</el-dropdown-item>
												</el-dropdown-menu>
											</template>
										</el-dropdown>
								</el-col>
							</el-row>
							<el-scrollbar class="scroBox">
								<!-- <el-menu
									default-active="1"
									@open="handleOpen"
									@close="handleClose"
								>
									<el-menu-item index="1" class="menuBox">
										<div class="textCenter">
											<el-space wrap>
												<svg-icon prefix="icon" icon-class="daiWoCuLi" />
												待我处理
											</el-space>
										</div>
										<div>2</div>
									</el-menu-item>
									<el-menu-item index="2" class="menuBox">
										<div class="textCenter">
											<el-space wrap>
												<svg-icon prefix="icon" icon-class="woYiChuLi" />
												我已处理
											</el-space>
										</div>
										<div>2</div>
									</el-menu-item>
									<el-menu-item index="3" class="menuBox">
										<div class="textCenter">
											<el-space wrap>
												<svg-icon prefix="icon" icon-class="chaoSongWoDe" />
												抄送我的
											</el-space>
										</div>
										<div>2</div>
									</el-menu-item>
									<el-menu-item index="4" class="menuBox">
										<div class="textCenter">
											<el-space wrap>
												<svg-icon prefix="icon" icon-class="woChuangJianDe" />
												我创建的
											</el-space>
										</div>
										<div>2</div>
									</el-menu-item>
								</el-menu> -->

								<AppMenus :form-Key="props.formKey" v-model:menus-tree="menusTree" :group-key="props.groupKey" :app-cont="appCont" :drawer-with="props.drawerWith" />



							</el-scrollbar>
						</el-aside>
						<el-main class="mainBox">
							<el-scrollbar class="scroBox">
								<svg-icon icon-class="0213-lmp" />
							</el-scrollbar>
						</el-main>
					</el-container>
				</el-container>
			</div>
			<AppMenuGroup v-model:is-show="menuGroupShow" :menu-parent-key="menuParentKey" :app-cont="appCont" @updateMenu="gainAppContent" />
		</el-drawer >
	</div>
</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;
		}
	}
	.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;
			
		}
		.scroBox{
			height: calc(100vh - 95px);
			.el-menu{
				border-right: 0px;
			}
			li{
				padding-left:10px;
				padding-right:10px;
			}
			.menuBox{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.textCenter{
					display: flex;
					align-items: center;
				}
			}
			.el-menu-item{
				height:40px;
			}
			.el-menu-item.is-active {
				color: var(--el-menu-active-color);
				background-color: #e4e4e4e4;
			}
			.el-menu-item:hover{
				background-color: #f1f1f1f1!important;
			}
		}
	}
	.el-main {
		padding: 10px;
	}
	.mainBox{
		background-color: #F1F2F3;

		.scroBox{
			height: calc(100vh - 60px);
		}
	}
}

</style>
