<template>
	<el-container class="flex-column-page-wrap group-container">
		<div class="ApprovalList">
			<el-header class="flex flex-align-center" style="padding: 0">
				<el-input v-model="keyword" style="width: 200px" placeholder="搜索" clearable @blur="searchProcess" />
				<div style="margin-left: auto; flex-shrink: 0">
					<template v-if="!sortFlag">
						<el-button @click="addNewGroupEv">新建分组</el-button>
						<el-button @click="changeComponent">分组排序</el-button>
					</template>
					<template v-else>
						<el-button type="primary" plain :icon="CircleCheck" @click="changeComponent('sort')">完 成</el-button>
						<el-button type="info" plain @click="changeComponent">取 消</el-button>
					</template>
					<el-button :type="sortFlag ? 'info' : 'primary'" :icon="Plus" :disabled="sortFlag" @click="createProcessEv">创建审批</el-button>
				</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'
import flowGroup from '@/api/flow/group'
import router from '@/router'
import useFlowStore from '@/store/modules/flow'
const flowStore = useFlowStore()

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

const changeComponent: (sort) => void = async sort => {
	sortFlag.value = !sortFlag.value
	if (pageType.value === 1) {
		pageType.value = 2
		return
	}
	if (pageType.value === 2) {
		if (sort) {
			const data = dyncComponent.value.exportSortData()
			await flowGroup.flowGroupSortApi(data)
		}
		pageType.value = 1
	}
}

const addNewGroupEv = () => {
	dyncComponent.value.showAddInput()
}

// 调用子组件的方法
const searchProcess = async () => {
	if (!keyword.value) return
	await dyncComponent.value.searchProcessEv({ keyword: keyword.value })
}

const createProcessEv = () => {
	flowStore.$reset()
	setTimeout(() => {
		router.push('/flow_create')
	}, 0)
}
</script>
<style scoped lang="scss">
.group-container {
	background-color: var(--el-bg-color);
	overflow-y: scroll;
	padding-bottom: 15px;
}
.ApprovalList {
	padding: 0 10px;
	//width: 98%;
	//min-width: 900px;
}
</style>
