<template>
	<view :class="['content',{'gray':store.isgray==1}]">
		<customNav>
			<view class="f-row aic box">
				<view class="back" @click="back">
					<uni-icons type="left" size="20" color="#fff"></uni-icons>
				</view>
				<view class="avatar">
					<image :src="imgUrl(store.userinfo.avatar)" mode=""></image>
				</view>
				<view class="name">
					{{taskInfo.processApplyUserName}}的{{taskInfo.processDefinitionName}}
				</view>
				<view class="status" v-if="type!=2">
					待审批
				</view>
				<view class="status" v-else style="background-color: #7AC756;">
					已处理
				</view>
			</view>
		</customNav>
		<component :is="comp" :dataId="dataId"></component>
		<view class="btn f-row aic jcb" v-if="type!=2&&taskInfo.taskAssigneeName">
			<view class="refuse" @click="openpop(1)">
				拒绝
			</view>
			<view class="agree" @click="openpop(2)">
				同意
			</view>
		</view>
		<view class="btn f-row aic jcb" v-if="type!=2&&!taskInfo.taskAssigneeName">
			<view class="">
				
			</view>
			<view class="agree" @click="claim">
				签收
			</view>
		</view>

		<uni-popup ref="popup" type="center">
			<view class="popup">
				<view class="title">
					审批意见
				</view>
				<view class="f-col aic">
					<view class="input f-col">

						<textarea v-model="reason" name="" id="" maxlength="200" placeholder="请输入"></textarea>
						<view class="">
							{{reason.length}}/200
						</view>
					</view>
				</view>
				<view v-if="status==2" class="agree_operate f-row aic" @click="chooseNextPerson=!chooseNextPerson">
					<image v-if="chooseNextPerson" src="../../static/login/checked.png" mode=""></image>
					<image v-else src="../../static/login/nocheck.png" mode=""></image>
					<view class="">
						指定下一步操作人
					</view>
				</view>
				<view class="" v-else>
					<picker :value="currentnode" :range="stepNode" range-key="NAME_" @change="nodeChange">
						<view class="node">{{currentnode!=null?stepNode[currentnode].NAME_:'请选择驳回节点'}}</view>
					</picker>
				</view>
				<view class="popbtn f-row aic">
					<view class="cancel" @click="closepop">
						取消
					</view>
					<view class="confirm" @click="handleProcess">
						确定
					</view>
				</view>
			</view>

		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		getCurrentInstance
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		getProcessNodeInfoApi,
		processCompleteApi,
		getProcessTaskTransInfoApi,
		getHisProcessNodeInfoApi,
		claimApi
	} from '@/api/api.js';
	import {
		beforeJump
	} from '@/utils/index.js';
	import customNav from '../../bpm/customNav.vue';
	import {
		imgUrl
	} from '@/utils/index.js';
	import {
		useStore
	} from '@/store';
	const store = useStore()
	const {
		proxy
	} = getCurrentInstance()
	const popup = ref(null)
	const reason = ref('')
	/**拒绝(1)||同意(2)*/
	const status = ref(null)
	const openpop = (val) => {
		status.value = val
		popup.value.open()
	}
	const closepop = () => {
		popup.value.close()
	}
	const comp = ref(null)
	const dataId = ref('')
	const getProcessNodeInfo = (taskId) => {
		getProcessNodeInfoApi({
			taskId
		}).then((res) => {
			if (res.success) {
				dataId.value = res.result.dataId
				comp.value = res.result.formUrlMobile
			}
		})
	}
	const back = () => {
		uni.navigateBack()
	}
	/**是否指定下一步操作人*/
	const chooseNextPerson = ref(false)
	let nextnode = null
	/**流程办理判断*/
	const handleProcess = () => {
		if (!reason.value.trim()) return proxy.$toast('请输入审批意见')
		let params = {}
		if (status.value == 1) { // 拒绝
			if (currentnode.value == null) return proxy.$toast('请选择驳回节点')
			params.processModel = 3
			params.rejectModelNode = stepNode.value[currentnode.value].TASK_DEF_KEY_
			processComplete(params)
		} else { // 同意
			if (chooseNextPerson.value) { //去选下一步操作人
				beforeJump('/pages/userlist/index', () => {
					closepop()
					uni.navigateTo({
						url: `/pages/userlist/index?id=${taskInfo.value.id}&isradio=1&nextnode=${JSON.stringify(nextnode)}&reason=${reason.value}`
					})
				})
			} else {
				params.processModel = 1
				processComplete(params)
			}
		}
	}
	/**流程办理接口*/
	const processComplete = (params) => {
		processCompleteApi({
			taskId: taskInfo.value.id,
			reason: reason.value,
			...params
		}).then((res) => {
			if (res.success) {
				proxy.$toast(res.message)
				setTimeout(() => {
					uni.navigateBack()
				}, 2000)
			}
		})
	}
	/**签收*/
	const claim = () => {
		claimApi({
			taskId: taskInfo.value.id
		}).then((res) => {
			if (res.success) {
				proxy.$toast(res.message)
				setTimeout(() => {
					uni.navigateBack()
				}, 2000)
			}
		})
	}


	/**审批流程节点*/
	const stepNode = ref([])
	/**当前选择的节点*/
	const currentnode = ref(null)
	/**切换节点*/
	const nodeChange = (e) => {
		currentnode.value = e.detail.value
	}

	const getProcessTaskTransInfo = (e) => {
		getProcessTaskTransInfoApi({
			taskId: taskInfo.value.id
		}).then((res) => {
			if (res.success) {
				stepNode.value = res.result.histListNode
				nextnode = res.result.transitionList
			}
		})
	}
	/**历史任务详情*/
	const getHisProcessNodeInfo = (procInstId) => {
		getHisProcessNodeInfoApi({
			procInstId
		}).then((res) => {
			if (res.success) {
				dataId.value = res.result.dataId
				comp.value = res.result.formUrlMobile
			}
		})
	}
	const taskInfo = ref(null)
	let type = null
	onLoad((options) => {
		taskInfo.value = JSON.parse(options.info)
		type = options.type
		if (type == 2) {
			return getHisProcessNodeInfo(taskInfo.value.processInstanceId)
		}
		getProcessNodeInfo(taskInfo.value.id)
		getProcessTaskTransInfo()

	})
</script>
<style>
	page {
		background-color: #f8f8f8;
	}
</style>
<style lang="scss" scoped>
	.popup {
		width: 690rpx;
		background: #FFFFFF;
		border-radius: 8rpx;

		.node {
			margin: 24rpx;
			font-size: 28rpx;
			color: #333333;
			padding: 0 20rpx;
		}

		.agree_operate {
			padding: 24rpx;
			font-size: 28rpx;
			color: #333333;

			image {
				width: 40rpx;
				height: 40rpx;

				margin-right: 10rpx;
			}
		}

		.title {
			font-size: 32rpx;
			color: #000000;
			text-align: center;
			padding: 40rpx 0;
		}

		.input {
			width: 582rpx;
			height: 226rpx;
			background: #F8F8F8;
			border-radius: 8rpx;
			padding: 24rpx;

			textarea {
				flex: 1;
				width: 100%;
			}

			view {
				text-align: right;
				font-size: 28rpx;
				color: #999999;
			}
		}

		.popbtn {
			font-size: 32rpx;
			border-top: 1px solid #E5E5E5;
			margin-top: 40rpx;
			position: relative;

			&::after {
				position: absolute;
				content: ' ';
				height: 100rpx;
				width: 1px;
				background-color: #E5E5E5;
				left: 50%;
				transform: translateX(-50%);
			}

			view {
				flex: 1;
				text-align: center;
				height: 100rpx;
				line-height: 100rpx;
			}

			.cancel {
				color: #000000;
			}

			.confirm {
				color: #007FFF;
			}
		}
	}

	.content {

		// margin-top: 88rpx;
		padding-bottom: 120rpx;
	}

	.btn {
		position: fixed;
		bottom: 0;
		width: 690rpx;
		height: 120rpx;
		background: #FFFFFF;
		padding: 0 30rpx;

		view {

			width: 330rpx;
			height: 88rpx;
			font-size: 28rpx;
			border-radius: 16rpx;
			text-align: center;
			line-height: 88rpx;
		}

		.refuse {
			box-sizing: border-box;
			background: #FFFFFF;
			border: 2rpx solid #01508B;
			color: #01508B;
		}

		.agree {
			background: #01508B;
			color: #FFFFFF;
		}
	}


	.box {
		position: absolute;
		bottom: 12rpx;
		left: 0;
	}

	.back {
		padding-left: 30rpx;
	}

	image {
		width: 64rpx;
		height: 64rpx;
		border-radius: 32rpx;
		background-color: #fff;
		margin-right: 16rpx;
		margin-left: 50rpx;
	}

	.name {
		font-size: 28rpx;
		color: #FFFFFF;
	}

	.status {
		padding: 4rpx 8rpx;
		display: inline-block;
		background-color: #FE4600;
		color: #FFFFFF;
		font-size: 20rpx;
		margin-left: 8rpx;
		border-radius: 8rpx;

	}
</style>