<template>
	<div>
		<draggable :list="myArray" item-key="id" chosen-class="chosen" style="height: 100%" @start="dragging = true" @end="endDraggableEv">
			<template #item="{ element }">
				<div class="group_list">
					<div class="group_header flex flex-pack-justify flex-align-center">
						<div class="group_header_title disabled">{{ element.categoryName }}</div>
						<div class="group_header_nameOperate">
							<el-tooltip effect="dark" content="删除" placement="top">
								<el-icon><Delete @click="deleteItem(element)" /></el-icon>
							</el-tooltip>
						</div>
					</div>
				</div>
			</template>
		</draggable>
	</div>
</template>

<script lang="tsx" setup>
import Draggable from 'vuedraggable'
import { Delete } from '@element-plus/icons-vue'
import { ref, nextTick, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import flowGroup from '@/api/flow/group'
import flowDefinition from '@/api/flow/definition'
const dragging = ref(false)
const myArray = ref([])
const sortFinallyValue = ref([])

const endDraggableEv = () => {
	dragging.value = false
	editFlowGroup()
}

const editFlowGroup = async () => {
	try {
		const param = JSON.parse(JSON.stringify(myArray.value))
		sortFinallyValue.value = param.map((item: any, index: number) => {
			return { id: item.categoryId, sort: index }
		})
	} catch (e) {
		console.log(e)
	}
}

const deleteItem = item => {
	deleteFlowGroup(item)
}

// 流程组删除
const deleteFlowGroup = async item => {
	try {
		// todo 这里需要判断当前的流程组下是否有实例,有不能删除,没有 直接调用删除接口
		ElMessageBox.confirm('是否删除该分组？', '提示', {
			confirmButtonText: '确认',
			cancelButtonText: '取消',
			type: 'error',
			buttonSize: 'default'
		})
			.then(async () => {
				await flowGroup.flowGroupDeleteApi([item.categoryId])
				flowGroupListAll()
				ElMessage({
					message: '删除成功!',
					type: 'success'
				})
			})
			.catch(() => {
				console.log('取消')
			})
	} catch (e) {
		console.log(e)
	}
}

// 流程组列表
const flowGroupListAll = async (item = {}) => {
	try {
		const data = await flowDefinition.flowDefinitionListCategoryApi(item)
		myArray.value = data || []
		console.log(data)
	} catch (e) {
		console.log(e)
	}
}

onMounted(() => {
	nextTick(() => {
		flowGroupListAll()
	})
})

const exportSortData = () => {
	return sortFinallyValue.value
}

defineExpose({
	exportSortData,
	searchProcessEv: flowGroupListAll
})
</script>

<style scoped lang="scss">
.group_list {
	border-radius: 4px;
	box-shadow: rgb(238, 238, 238) 0px 0px 3px 1px;
	background-color: rgb(255, 255, 255);
	font-family: PingFangSC-Regular;
	margin-bottom: 16px;
	cursor: move;
	.group_header {
		height: 54px;
		padding: 0px 16px 0px 12px;
		font-size: 16px;
		line-height: 24px;
		color: rgb(37, 40, 52);
		background-color: rgba(244, 245, 246, 0.5);
		&_title {
			position: relative;
			//font-family: PingFangSC-Medium;
			display: flex;
			align-items: center;
			&.disabled {
				color: var(--el-text-color-disabled);
			}
		}
		&_nameOperate {
			cursor: pointer;
		}
	}
}

/*被拖拽对象的样式*/
.item {
	padding: 6px;
	background-color: #fdfdfd;
	border: solid 1px #eee;
	margin-bottom: 10px;
	cursor: move;
}
/*选中样式*/
.chosen {
	// border: solid 1px #3089dc !important;
}
</style>
