<template>
	<div class="flow-create-wrap">
		<div class="el-tabs__item submit-tab is-top">
			<el-button type="primary" @click="submitHandler">发布</el-button>
		</div>
		<el-tabs v-model="activeName">
			<template v-for="v of components" :key="v.name">
				<component :is="v.component" ref="tabRefs" v-bind="v" />
			</template>
		</el-tabs>
	</div>
</template>

<script setup name="flow_create">
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import BasicInfoTab from './components/BasicInfo.vue'
import ExtendSetTab from './components/ExtendSet.vue'
import FlowDesignTab from './components/FlowDesign.vue'
import FormDesignTab from './components/FormDesign.vue'
const tabRefs = ref()
// const basicInfoRef = ref()
// const formDesignRef = ref()
// const flowDesignRef = ref()
// const extendSetRef = ref()
const components = [
	{
		component: BasicInfoTab,
		label: '基础信息',
		name: '基础信息'
		// ref: 'basicInfoRef'
	},
	{
		component: FormDesignTab,
		label: '表单设计',
		name: '表单设计'
		// ref: 'formDesignRef'
	},
	{
		component: FlowDesignTab,
		label: '流程设计',
		name: '流程设计'
		// ref: 'flowDesignRef'
	},
	{
		component: ExtendSetTab,
		label: '扩展设置',
		name: '扩展设置'
		// ref: 'extendSetRef'
	}
]

const activeName = ref('基础信息')

window.tabRefs = tabRefs
const submitHandler = () => {
	Promise.all(
		tabRefs.value.map(tabPane => {
			if (tabPane.validate) {
				return tabPane.validate()
			}
			return {}
		})
	)
		.then(res => {
			console.warn(res, 'res.......')
		})
		.catch(([name, errObj]) => {
			console.warn(name, ')错误来源(', errObj)
			ElMessage.warning(`${name} 校验失败， 请重试~`)
			// 跳转到错误tab
			activeName.value = name
		})
	// console.log(basicInfoRef.value)
	// console.log(formDesignRef.value)
	// console.log(flowDesignRef.value)
	// console.log(extendSetRef.value)
}
</script>

<style scoped lang="scss">
.flow-create-wrap {
	padding: 0 10px;
	background: #fff;
	position: relative;
	height: 100%;
	.submit-tab {
		position: absolute;
		right: 0;
		top: 0;
		z-index: 1;
		height: 40px;
		display: flex;
		align-items: center;
	}
}
:deep(.el-tabs) {
	height: 100%;
	.el-tabs__header {
		margin-bottom: 10px;
	}
	.el-tabs__content {
		// 40 + 10
		height: calc(100% - 50px);
		overflow: auto;
	}
}
</style>
