<script setup lang="ts">
import { ref,watch } from 'vue';
import {completeTask, formatStartNodeShow, queryMineTask, queryTaskData} from "/@/api/flow/task";
import {useMessage, useMessageBox} from "/@/hooks/message";
import uploadFile from "/@/components/Upload/index.vue";
import {getFlowFormByProcessInstanceId, getTaskDetail} from "/@/api/flow/flow";
import FlowNodeFormat from "/@/views/flow/form/tools/FlowNodeFormatData.vue";
defineEmits(['success', 'dismissed']);
const message = useMessage();
const loading = ref(false);
const props = defineProps({
	taskId:{
		type: String,
		required: true
	},
	title:{
		type: String,
		required: true
	},
	info:{},
	processInstanceId:{
		type: String,
		required: true
	},
})
const visible = ref(false);
const requestData = ref<any>({});
const isBoolean = ref(true);
const handleSuccess = (bool: boolean) => {
	isBoolean.value = bool
	visible.value = true
}
const approveDesc = ref('');
const headerForm = ref<any>({});
const nodeId = ref('');
const nodeData = ref<any[]>([]);
const currentNode = ref<any>({});
const selectUserNodeId = ref<string[]>([]);
const selectUserNode = ref<any>({});
const userInfo = 1
const isEdit = computed(() =>{
	// /h5/investmentReserveReview?processInstanceId=308bec63-d72a-11f0-84c5-e86538668cc9&taskId=31de3603-d72a-11f0-84c5-e86538668cc9
	const currentUserId = userInfo;
	const currentNodeUser = currentNode.value.userVoList?.find((item:any) => item.id == currentUserId)
	return currentNodeUser?.status === 1
})
// 获取标题等信息
const getFlowFormByProcessInstanceIdAPI = () =>{
	getFlowFormByProcessInstanceId(props.processInstanceId).then(res => {
		if (res.ok) {
			headerForm.value = res.data;
			getNodeId();
		}
	})
}
// 附加表单 - 获取nodeId
function getNodeId() {
	getTaskDetail(props.processInstanceId).then(res => {
		if (res.ok) {
			nodeId.value = res.data.nodeId;
			requestData.value.taskId = res.data.taskId;

			getTaskData()
		}
	})
}
// 获取节点
const getTaskData = async () => {
	const res = await formatStartNodeShow({ processInstanceId: props.processInstanceId});
	if (res.ok) {
		nodeData.value = res.data
		getCurrentNode()
	}
}
function getCurrentNode() {
	currentNode.value = hierarchicalLookup(nodeData.value,nodeId.value)
}
function hierarchicalLookup(nodeList:any[],nodeId:string):any {
	for (const nodeItem of nodeList) {
		if (nodeItem.id === nodeId){
			return nodeItem
		}

		if (nodeItem.children && nodeItem.children.length > 0){
			const children = hierarchicalLookup(nodeItem.children,nodeId)
			if (children){
				return children
			}
		}
		if (nodeItem.branch && nodeItem.branch.length > 0){
			const branch = hierarchicalLookup(nodeItem.branch,nodeId)
			if (branch){
				return branch
			}
		}
	}
}
const handleClose = () =>{
	visible.value = false;
	approveDesc.value = '';
}
const submit = async () => {
	if (!approveDesc.value.trim()) {
		message.error('请填写审批意见');
		return;
	}
	if(!isBoolean.value){
		try {
			await useMessageBox().confirm('是否要驳回到上一个节点？')
		}catch (err){
			message.success('操作取消');
			handleClose()
			return
		}
	}
	const param = {
		taskId: requestData.value.taskId,
		taskLocalParamMap:{
			approveDesc: `${isBoolean.value ? '意见：': '拒绝原因：'}${approveDesc.value}`,
		},
		paramMap:{
			[`${nodeId.value}_approve_condition`]:isBoolean.value
		}
	}
	loading.value = true;
	handleClose();
	try {
		const res = await completeTask(param)
		if (res?.ok === true) {
			message.success('审核成功');
			getFlowFormByProcessInstanceIdAPI()
			loading.value = false;
		}
	} catch (err: any) {
		if (err.ok === false){
			message.success('已到最后一个流程！')
		}else {
			message.error(err?.msg || err?.message || '提交失败');
		}
		loading.value = false;
	}
}
watch(() => props,()=>{
	if (props.processInstanceId){
		getFlowFormByProcessInstanceIdAPI()
	}
},{immediate: true, deep: true});
</script>

<template>
	<el-scrollbar id="h5-layout-box" height="100vh">
		<header>审批</header>
		<main v-loading="loading">
			<header>
				<div class="table">
					<div class="tr">
						<div class="td-header">标题:</div>
						<div class="td-content">{{headerForm.title}}</div>
					</div>
					<div class="tr">
						<div class="td-header">描述:</div>
						<div class="td-content">{{headerForm.description}}</div>
					</div>
					<div class="tr">
						<div class="td-header">附件:</div>
						<div class="td-content flex flex-wrap ">
							<uploadFile :modelValue="headerForm.attachments ? JSON.parse(headerForm.attachments) : []" disabled/>
						</div>
					</div>
				</div>
			</header>
			<div class="h5-line"></div>
			<section class="main">
				<h2>{{ title }}</h2>
				<section class="h5-content">
					<slot></slot>
				</section>
			</section>
		</main>
		<footer v-if="isEdit">
			<el-button class="button" type="primary" @click="handleSuccess(true)">通过</el-button>
			<el-button class="button" type="danger" @click="handleSuccess(false)">驳回</el-button>
		</footer>
	</el-scrollbar>
	<el-dialog v-model="visible" title="审批意见" destroy-on-close @close="handleClose">
		<el-input v-model="approveDesc" type="textarea" rows="10" placeholder="请输入意见"></el-input>
		<div style="margin-top: 10px"></div>
		<!--		<upload-file limit="2" type="simple" v-model="submitForm.files"></upload-file>-->
		<template #footer>
			<el-button type="primary" @click="submit">确定</el-button>
		</template>
	</el-dialog>
<!--	<flow-node-format :selectUserNodeId="selectUserNodeId" :flow-id="taskId" ref="flowNodeFormatRef"></flow-node-format>-->
</template>0

<style scoped lang="scss">
#h5-layout-box {
	width: 100vw;
	height: 100vh;
	box-sizing: border-box;
}
#h5-layout-box > header {
	width: 100%;
	height: 60px;
	line-height: 60px;
	text-align: center;
	font-size: 16px;
	box-sizing: border-box;
	color: #FFFFFF;
	background-color: #409EFF;
}
#h5-layout-box > main {
	width: 100%;
	height: calc(100% - 60px - 100px);
	box-sizing: border-box;
	background-color: #ffffff;
}
#h5-layout-box > main > header {
	width: 100%;
	height: 120px;
	padding: 20px 0 0 20px;
	border-radius: unset;
	box-sizing: border-box;
}
#h5-layout-box > main > .h5-line {
	width: 100%;
	height: 1px;
	background-color: #E5E5E5;
}
#h5-layout-box > main > header > .table {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}
#h5-layout-box > main > header > .table > .tr  {
	display: flex;
	height: 32px;
	font-size: 16px;
	box-sizing: border-box;
}
#h5-layout-box > main > header > .table > .tr > .td-header {
	width: 50px;
	font-size: 14px;
	box-sizing: border-box;
}
#h5-layout-box > main > header > .table > .tr > .td-content {
	box-sizing: border-box;
}
#h5-layout-box > main > header > .table > .tr > .td-content > a {
	margin-right: 10px;
	font-size: 14px;
	box-sizing: border-box;
	color: #57AFF3;
}
#h5-layout-box > main > header > .table > .tr > .td-content > a:last-child{
	margin-right: unset;
	box-sizing: border-box;
}
#h5-layout-box > main > .main {
	width: 100%;
	height: 100%;
}
#h5-layout-box > main > .main > h2 {
	text-align: center;
	font-size: 18px;
	font-weight: 700;
	margin: 20px 0;
	box-sizing: border-box;
	height: 30px;
	color: #000000;
}
#h5-layout-box > main > .main > .h5-content {
	height: calc(100% - 30px - 40px - 20px);
	box-sizing: border-box;
	padding: 0 20px;
	margin-bottom: 100px;
}
#h5-layout-box > main > .main > .h5-content > .scrollbar {
	height: 100%;
}
#h5-layout-box > main > .main > .h5-content > .scrollbar > :deep(.el-scrollbar__wrap > .el-scrollbar__view) {
	height: 100%;
}
#h5-layout-box > footer {
	position: fixed;
	bottom: 0;
	z-index: 10;
	border-top: 1px solid #E5E5E5;
	height: 100px;
	width: 100%;
	padding: 20px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
	align-items: center;
	box-sizing: border-box;
	background-color: #ffffff;
}
#h5-layout-box > footer > .button {
	width: 100%;
	height: 40px;
	font-size: 16px;
	margin: 0;
	box-sizing: border-box;
}
#h5-layout-box > :deep(.el-overlay .el-overlay-dialog .el-dialog) {
	border-radius: unset;
}
</style>