<route lang="json5" type="page">
	{
	layout: 'default',
	style: {
	navigationStyle: 'custom',
	navigationBarTitleText: '任务处理',
	},
	}
</route>
<template>
	<PageLayout :nav-title="type=='history'?'历史任务':'流程办理'">
		<wd-tabs v-model="tab" color="#39b54a" autoLineWidth>
			<wd-tab title="单据">
				<DynamicLink ref="linkRef" :path="path" :formData="formData"></DynamicLink>
			</wd-tab>
			<wd-tab title="任务处理" v-if="type!='history'">
				<taskDeal :formData="formData" :useData="useData"  @dataSubmit="dataSubmit"></taskDeal>
			</wd-tab>
			<wd-tab title="流程图">
				<view class="container">
					<view
						style="margin-bottom: 20px;height: 400px;overflow: hidden;overflow-y: auto;overflow-x: auto;background-color: #fff;">
						<img :src="imgPath" style="border:2px;cursor:hand;" alt="流程图" usemap="#planetmap"
							@click="showFullScreen">
					</view>
					<!-- Full screen preview -->
					<wd-popup v-model="popup" type="center" background-color="#fff">
						<view class="fullscreen-preview">
							<image :src="imgPath" mode="widthFix" style="width:100%;" @click="hideFullScreen" />
						</view>
					</wd-popup>
					<wd-card title="流程历史追踪" type="rectangle">
						<wd-steps :active="completedNum" vertical>
							<wd-step v-for="item in dataSource">
								<template #title>
									<view
										:class="{'content':true, 'shadow-blur':true, 'text-sm':true,'bg-green':item.endTime,'bg-gray':!item.endTime}">
										<text>流程节点：{{item.name=='start'?'开始':item.name=='end'?'结束':item.name}}<br></text>
										<text>负责人：{{item.assigneeName}}<br></text>
										<text>开始时间：{{item.startTime}}<br></text>
										<text v-if="item.endTime">结束时间：{{item.endTime}}<br></text>
										<text>{{item.deleteReason}}</text>
									</view>
								</template>
							</wd-step>
						</wd-steps>
					</wd-card>
				</view>
			</wd-tab>
		</wd-tabs>
	</PageLayout>
</template>

<script setup lang="ts">
	import { useToast, useMessage } from 'wot-design-uni'
	import {
		useAppStore
	} from '@/store'
	import {
		getProcessNodeInfo,
		getHisProcessNodeInfo,
		getNodePositionInfo,
		// getHisProcessTaskTransInfo,
		getHisInfo
	} from '@/api/process'
	import {
		getEnvBaseUrl
	} from '@/utils/index'
	import { json } from 'stream/consumers';
	import qs from 'qs';
	import { getCurrentInstance } from 'vue'
	import DynamicLink from './components/DynamicLink.vue'
	import taskDeal from './components/taskDeal.vue'

	const { proxy } = getCurrentInstance()
	const type = ref('');
	const formData = ref({})
	const useData = ref({})
	const nodePositionInfo = ref({})
	const dataSource = ref([])
	const path = ref('') //url路径
	const appStore = useAppStore();
	const tab = ref(0)
	const completedNum = ref(0);
	const popup = ref(false)
	const linkRef = ref();
	
	
	const showFullScreen = () => {
		popup.value = true
	};
	const hideFullScreen = () => {
		popup.value = false
	};

	onLoad((options) => {
		type.value = '';
		if (options.data) {
			type.value = options.data
		}
		const eventChannel = proxy.getOpenerEventChannel();
		eventChannel.on('taskData', (params) => {
			useData.value = JSON.parse(params);
			if (type.value != 'history') {
				getProcessNodeInfo({ taskId: useData.value.id }).then(res => {
					if (res.success) {
						let data = {
							dataId: res.result.dataId,
							taskId: useData.value.id,
							taskDefKey: useData.value.taskId,
							procInsId: useData.value.processInstanceId,
							tableName: res.result.tableName,
							permissionList: res.result.permissionList,
							vars: res.result.records,
						}
						formData.value = data;//流程信息
						let tempFormUrl = res.result.formUrlMobile;
						path.value = tempFormUrl; //url路径
						formData.value.path = tempFormUrl; //加载path属性
					}
				})
			} else {
				getHisProcessNodeInfo({ procInstId: useData.value.processInstanceId }).then(res => {
					if (res.success) {
						let data = {
							dataId: res.result.dataId,
							taskId: useData.value.id,
							taskDefKey: useData.value.taskId,
							procInsId: useData.value.processInstanceId,
							tableName: res.result.tableName,
							vars: res.result.records
						}
						formData.value = data;//流程信息
						let tempFormUrl = res.result.formUrlMobile;
						path.value = tempFormUrl; //url路径
					}

				})
			}

			// getNodePositionInfo({processInstanceId:useData.processInstanceId}).then((res)=>{
			// 	if (res.success) {
			// 	  nodePositionInfo.value = res.result
			// 	}
			// })
			// getHisProcessTaskTransInfo({ procInstId: useData.value.processInstanceId }).then(res => {
			// })
			getHisInfo({ processInstanceId: useData.value.processInstanceId }).then((res) => {
				if (res.success) {
					dataSource.value = res.result.records
					//查找最后一个，结束时间
					completedNum.value = res.result.records.length
					res.result.records.forEach((item, index) => {
						if (item.endTime) completedNum.value = index + 1
					})
				}
			})
		})
	})

	const dataSubmit = async (callback)=> { //触发表单的保存数据 by 闵
	    //1.先验证是否有form，如果有form则需要验证
	    //2.如果没有form，则不需要验证
	    let callData = {
	      flag: false,
	      type: 0,
	    }
		console.log(linkRef.value)
		// if(linkRef.value.ifEsign){
			let data = await linkRef.value.signValidator()
			if(data==false||data==true){
				callData.flag = data;
				callData.type = 1;
			}else{
				callData.flag = true;
			}
		// }else{
		// 	callData.flag = true;
		// }
	    callback(callData);
	  }


	const imgPath = computed(() => {
		var params = qs.stringify({
			'processInstanceId': formData.value.procInsId
		})
		let url = `${getEnvBaseUrl()}/act/task/traceImage?${params}`;
		return url;
	})
</script>

<style lang="scss" scoped>
	.fullscreen-preview {
	  width: 100vw;
	  height: 100vh;
	  background-color: #fff; /* 白色背景 */
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  position: relative;
	}

	.container {
		padding: 5px 0 5px;
		min-height: 100vh;
		background-color: #f7f7f7;
	}

	.bg-green {
		background-color: #39b54a;
		color: #fff;
	}

	.bg-green {
		background-color: #39b54a;
		color: #fff;
	}

	.bg-gray {
		background-color: #f0f0f0;
		color: #333;
	}

	.content {
		padding: 5px 25px 5px 15px;
	}

	.shadow-blur {
		position: relative;
	}

	.shadow-blur::before {
		content: "";
		display: block;
		background: inherit;
		-webkit-filter: blur(5px);
		filter: blur(5px);
		position: absolute;
		width: 100%;
		height: 100%;
		top: 5px;
		left: 5px;
		z-index: -1;
		opacity: .4;
		-webkit-transform-origin: 0 0;
		transform-origin: 0 0;
		border-radius: inherit;
		-webkit-transform: scale(1);
		transform: scale(1);
	}

	.text-sm {
		font-size: 12px;
	}
</style>