<!--
@ 作者: 秦东
@ 时间: 2024-05-07 11:26:40
@ 备注: 编辑表单
-->
<script lang='ts' setup>
import PageForm from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageForm.vue"
import PageFlow from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageFlow.vue"
import PageList from "@/views/sysworkflow/lowcodepage/appPage/appPageForm/pageList.vue"
const props = defineProps({
	appCont:{
		type:Object,
		default(){
			return {}
		}
	},
	isShow:{
		type: Boolean,
		default: false,
	},
	drawerWith:{
		type:Number,
		default:0
	},
});
const emits = defineEmits(["update:isShow"]);
const tabsActive = ref(1)

/**
@ 作者: 秦东
@ 时间: 2024-05-07 15:11:24
@ 功能: 关闭页面
*/
const closeSavePageForm = () =>{
	emits("update:isShow",false)
}
</script>
<template>
	<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 class="headLeft">
						<el-space wrap>
							<el-avatar shape="square" :size="25" :src="props.appCont.appSvg" />
							<el-tooltip
								class="box-item"
								effect="dark"
								:content="props.appCont.appName"
								placement="bottom"
							>
								<el-text class="w-150px mb-2" truncated>{{ props.appCont.appName }}</el-text>
							</el-tooltip>
							<i class="fa fa-angle-right"></i>
							<el-tooltip
								class="box-item"
								effect="dark"
								:content="props.appCont.appName"
								placement="bottom"
							>
								<el-text class="w-150px mb-2" truncated>未命名表单</el-text>
							</el-tooltip>
						</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-tabs>
					</div>
					<div class="headRight">
						<el-button type="danger" size="small" @click="closeSavePageForm" >关闭</el-button>
					</div>
				</el-header>
				<el-container>
					<PageForm v-if="tabsActive==1" />
					<PageFlow v-if="tabsActive==2" />
					<PageList v-if="tabsActive==3" />
				</el-container>
			</el-container>
		</div>
	</el-drawer>
</template>
<style  lang='scss' scoped>
.headerBox{
	padding: 0px;
	border-bottom: 2px solid #ECECEC;
	display: flex;
	align-items: center;
	justify-content: space-between;
	.headLeft{
		width: 300px;
		padding-left: 5px;
		span{
			max-width:100px;
		}
	}
	.headRight{
		width: 300px;
		text-align: right;
		padding-right: 5px;
	}
	.tabsMain{
		::v-deep .el-tabs__header{
			margin: 0px;
		}
		::v-deep .el-tabs__nav-scroll{
			margin: 0 auto!important;
		}

		::v-deep .el-drawer__body{
			padding: 0;
		}
	}
}

</style>
