<template>
	<el-container class="flex flex-v flex-align-center" style="background-color: #ffffff; overflow-y: scroll; padding-bottom: 15px">
		<div class="ApprovalList">
			<el-header class="flex flex-align-center" style="width: 100%; padding: 0px">
				<div style="width: 100%">
					<el-row style="width: 100%" justify="space-between">
						<el-col :span="6"><el-input placeholder="搜索" clearable /></el-col>
						<el-col :span="6">
							<template v-if="!sortFlag">
								<el-space wrap><el-button @click="addNewGroupEv">新建分组</el-button></el-space>
								<el-space wrap><el-button @click="changeComponent">分组排序</el-button></el-space>
							</template>
							<template v-else>
								<el-space wrap><el-button type="primary" plain :icon="CircleCheck" @click="changeComponent">完 成</el-button></el-space>
								<el-space wrap><el-button type="info" plain @click="changeComponent">取 消</el-button></el-space>
							</template>
							<el-space wrap><el-button :type="sortFlag ? 'info' : 'primary'" :icon="Plus" :disabled="sortFlag">创建审批</el-button></el-space>
						</el-col>
					</el-row>
				</div>
			</el-header>
			<div>
				<component :is="typeComponentMap[pageType]" ref="dyncComponent"></component>
			</div>
		</div>
	</el-container>
</template>
<script lang="tsx" setup name="flow_group">
import { ref } from 'vue'
import { Plus, CircleCheck } from '@element-plus/icons-vue'
import SortGroup from './components/sortGroup'
import ListGroup from './components/listGroup'

const sortFlag = ref(false)
const dyncComponent = ref() // 实例化子组件
const typeComponentMap = {
	1: ListGroup,
	2: SortGroup
}
const pageType = ref(1)

const changeComponent: () => void = () => {
	sortFlag.value = !sortFlag.value
	if (pageType.value === 1) {
		pageType.value = 2
		return
	}
	if (pageType.value === 2) {
		pageType.value = 1
	}
}

const addNewGroupEv = () => {
	dyncComponent.value.showAddInput()
}
</script>
<style scoped lang="scss">
.ApprovalList {
	width: 100%;
	max-width: 1000px;
}
</style>
