<template>
	<el-container :class="defKey ? 'singleContainer' : 'container'">
		<el-header class="task_header notprint" height="40px">
			<div class="flex container__header">
				<h3 ref="flowSubject">{{ subject }}</h3>
				<div class="container__header-btngroup">
					<el-button
						v-if="isLook"
						icon="el-icon-document-copy"
						type="text"
						@click="copeInst()"
						>复制</el-button
					>
					<el-button
						v-if="!taskId && type != 'read' && !myReadType"
						icon="icon-folder-add"
						type="text"
						@click="taskUrgent"
						>催办
					</el-button>
					<el-button
						v-if="type != 'read' && !myReadType"
						icon="el-icon-search"
						type="text"
						@click="urgentRecord"
					>
						催办记录
					</el-button>
					<el-button
						v-if="showModifyRecord"
						icon="el-icon-s-unfold"
						type="text"
						@click="openModifyRecord"
						>修改记录
					</el-button>
					<el-button icon="icon-trace" type="text" @click="taskFollow"
						>跟踪</el-button
					>
					<el-button icon="icon-print" type="text" @click="showPrint"
						>打印</el-button
					>
					<el-button icon="icon-communication" type="text" @click="taskToCommu"
						>沟通</el-button
					>
					<el-button icon="icon-folder" type="text" @click="taskToCopyTo"
						>传阅</el-button
					>
					<el-button icon="icon-flow1" type="text" @click="taskImage"
						>流程图</el-button
					>
					<el-button icon="icon-info" type="text" @click="relatedInformation"
						>相关信息</el-button
					>
					<el-button icon="icon-info" type="text" @click="processRecordDialog"
						>处理记录</el-button
					>
				</div>
			</div>
		</el-header>
		<div ref="print" class="container__content">
			<FlowAction
				v-if="type != 'doneList'"
				ref="flowAction"
				:appendOpinion="appendOpinion"
				:approvalArea="approvalArea"
				:choiceExcutor="choiceExcutor"
				:defId="defId"
				:defKey="flowDefKey"
				:execId="execId"
				:from="from"
				:instId="procInstId"
				:instStatus="instStatus"
				:isLook="isLook"
				:jumpType="jumpType"
				:leaderId="leaderId"
				:myReadType="myReadType"
				:nodeId="nodeId"
				:nodeType="nodeType"
				:opinionField="opinionField"
				:readDoneId="readDoneId"
				:readId="readId"
				:referOpinion="referOpinion"
				:secretFree="secretFree"
				:signatureCover="signatureCover"
				:signatureField="signatureField"
				:sponsorRevoke="sponsorRevoke"
				:status="status"
				:taskId="taskId"
				:task_state="task_state"
				:tasks="tasks"
				:type="type"
			/>
			<DoneAction
				v-if="type == 'doneList'"
				ref="doneAction"
				:choiceExcutor="choiceExcutor"
				:defId="defId"
				:instId="procInstId"
				:instStatus="instStatus"
				:jumpType="jumpType"
				:leaderId="leaderId"
				:status="status"
				:taskId="taskId"
				:type="type"
			/>
			<ProcessRecord :instId="procInstId" />
		</div>
		<!-- 发起沟通 -->
		<TaskToCommu ref="taskToCommu" :defId="defId" :instId="procInstId" />
		<!-- 跟踪设置 -->
		<TaskFollow ref="taskFollow" :defId="defId" :instId="procInstId" />
		<!-- 流程图 -->
		<TaskImage ref="taskImage" :bpmnInstId="bpmnInstId" :instId="procInstId" />
		<!-- 相关信息 -->
		<RelatedInformation ref="relatedInformation" :instId="procInstId" />
		<!-- 流程传阅-->
		<TaskToCopyTo
			ref="taskToCopyTo"
			:instId="procInstId"
			:taskId="copyTaskId"
		/>
		<!-- 流程催办 -->
		<TaskUrgent
			ref="taskUrgent"
			:defId="defId"
			:instId="procInstId"
			:subject="subject"
		/>
		<!-- 催办记录 -->
		<UrgentRecord
			ref="urgentRecord"
			:instId="procInstId"
			:promoterId="promoterId"
		/>
		<!-- 修改记录 -->
		<ModifyRecord ref="modifyRecord" :instId="procInstId" />
		<FlowPrint
			ref="flowPrint"
			:formKey="formKey"
			:instId="procInstId"
			@previewWordTemplate="previewWordTemplate"
			@printHtml="printHtml"
			@printWordTemplate="printWordTemplate"
		/>
		<!-- 处理记录 -->
		<ProcessRecordDialog
			ref="processRecordDialog"
			:defId="defId"
			:instId="procInstId"
			:nodeId="nodeId"
			:nodeType="nodeType"
			:referOpinion="referOpinion"
			:taskId="taskId"
		/>
		<!-- word预览弹出框 -->
		<el-dialog :visible.sync="previewWordDialog" title="word预览" width="90%">
			<iframe
				:height="previewWordHeight"
				:src="previewWordPdfSrc"
				align="middle"
				name="previewWord"
				style="width: 100%; border: 0;"
			></iframe>
		</el-dialog>
	</el-container>
</template>

<script>
import FormContent from '@/components/flow/formContent.vue';
import RelatedInformation from '@/components/flow/relatedInformation.vue';
import FlowAction from '@/components/flow/flowAction.vue';
import DoneAction from '@/components/flow/doneAction.vue';
import ProcessRecord from '@/components/flow/processRecord.vue';
import TaskToCopyTo from '@/components/flow/task/taskToCopyTo.vue';
import TaskToCommu from '@/components/flow/task/taskToCommu.vue';
import TaskFollow from '@/components/flow/task/taskFollow.vue';
import TaskImage from '@/components/flow/task/taskImage.vue';
import UrgentRecord from '@/components/flow/urgentRecord.vue';
import ModifyRecord from '@/components/flow/modifyRecord.vue';
import TaskUrgent from '@/components/flow/task/taskUrgent.vue';
import FlowPrint from '@/components/flow/flowPrint.vue';
import ProcessRecordDialog from '@/components/flow/processRecordDialog.vue';
import req from '@/request.js';
import utils from '@/utils.js';
import { Loading } from 'element-ui';
import haloseeUiUtil from "@/halosee-ui-util";

export default {
	name: 'task',
	components: {
		FormContent,
		FlowAction,
		ProcessRecord,
		TaskToCommu,
		TaskFollow,
		TaskImage,
		RelatedInformation,
		TaskToCopyTo,
		UrgentRecord,
		ModifyRecord,
		TaskUrgent,
		DoneAction,
		FlowPrint,
		ProcessRecordDialog,
	},
	props: [
		'task_state',
		'instId',
		'type',
		'taskId',
		'readId',
		'leaderId',
		'readDoneId',
		'myReadType',
		'noSingle',
		'defKey',
		'from',
	],
	data() {
		return {
			sponsorRevoke: false, //允许发起人撤回（默认不勾选）
			isLook: false,
			tasks: {}, //任务详情
			procInstId: this.instId,
			copyTaskId: this.taskId,
			defId: '',
			bpmnInstId: '',
			subject: '',
			status: '',
			instStatus: '',
			choiceExcutor: '',
			show: true,
			jumpType: '',
			promoterId: '',
			execId: '',
			selectNodeId: '',
			approvalArea: '', //审批区域显示的内容
			referOpinion: true, //允许参考意见 (选择否，则审批时不允许参考同环节其他会签人员的意见)
			nodeType: '', //当前任务类型
			nodeId: '', //当前任务节点
			showModifyRecord: false, //是否显示表单修改记录
			formKey: '',
			opinionField: '', //审批意见反填字段
			appendOpinion: '', //是否覆盖审批意见
			signatureField: '', //自动签章字段
			signatureCover: false, //自动签章是否覆盖
			secretFree: false, //自动签章时是否免密
			previewWordDialog: false,
			previewWordHeight: 800,
			previewWordPdfSrc: '',
			flowDefKey: '',
		};
	},
	mounted() {
		this.previewWordHeight = document.documentElement.clientHeight - 80;
	},
	methods: {
		//复制流程
		copeInst() {
			this.$confirm(
				'此操作将把当前实例数据复制到新流程待启动,是否继续?',
				'提示',
				{
					confirmButtonText: '继续',
					cancelButtonText: '取消',
					type: 'warning',
				}
			)
				.then(() => {
					this.$router.push('/agentStart/' + this.defId + '/0/' + this.instId);
				})
				.catch(() => {});
		},
		//流程催办
		taskUrgent() {
			this.$store.dispatch('storeProcess/isEnd', this.procInstId).then(() => {
				this.$refs.taskUrgent.handleClose(); //父组件调用子组件方法
			});
		},
		//催办记录
		urgentRecord() {
			this.$refs.urgentRecord.handleClose(); //父组件调用子组件方法
		},
		//表单修改记录
		openModifyRecord() {
			this.$refs.modifyRecord.handleClose(); //父组件调用子组件方法
		},
		//流程传阅
		taskToCopyTo() {
			if (this.type && this.type == 'doneList') {
				this.selectNodeId = this.$refs.doneAction.getSelectNodeId();
			}
			this.$refs.taskToCopyTo.handleClose(this.selectNodeId, this.copyTaskId); //父组件调用子组件方法
		},
		//发起沟通
		taskToCommu() {
			this.$store.dispatch('storeProcess/isEnd', this.procInstId).then(() => {
				this.$refs.taskToCommu.handleClose(); //父组件调用子组件方法
			});
		},
		//跟踪设置
		taskFollow() {
			this.$store.dispatch('storeProcess/isEnd', this.procInstId).then(() => {
				this.$refs.taskFollow.handleOpen(); //父组件调用子组件方法
			});
		},
		//流程图
		taskImage() {
			this.$refs.taskImage.handleOpen(); //父组件调用子组件方法
		},
		//相关信息
		relatedInformation() {
			this.$refs.relatedInformation.handleClose(); //父组件调用子组件方法
		},
		//处理记录信息
		processRecordDialog() {
			this.$refs.processRecordDialog.handleClose(); //父组件调用子组件方法
		},
		//相关信息
		showPrint() {
			let this_ = this;
			if (!this.formKey || this.formKey == '') {
				if (!this.nodeId) {
					this.nodeId = '';
				}
				var url =
					'${bpmRunTime}/runtime/instance/v1/printBoAndFormKey?defId=' +
					this.defId +
					'&nodeId=' +
					this.nodeId +
					'&procInstId=' +
					this.procInstId;
				req.get(url).then(res => {
					if (res.data) {
						this.formKey = res.data.formKey;
						let param = {
							pageBean: { page: 1, pageSize: 20, total: 0 },
							querys: [
								{
									group: 'defaultQueryGroup',
									operation: 'EQUAL',
									relation: 'AND',
									property: 'formKey',
									value: this.formKey,
								},
							],
						};
						req
							.post(
								req.getContext().form + '/form/printTemplate/v1/getPrintList',
								param
							)
							.then(response => {
								if (response.data.rows && response.data.rows.length > 0) {
									this.$refs.flowPrint.handleOpen(); //父组件调用子组件方法
								} else {
									this_.printHtml();
								}
							});
					}
				});
			} else {
				let param = {
					pageBean: { page: 1, pageSize: 20, total: 0 },
					querys: [
						{
							group: 'defaultQueryGroup',
							operation: 'EQUAL',
							relation: 'AND',
							property: 'formKey',
							value: this.formKey,
						},
					],
				};
				req
					.post(
						req.getContext().form + '/form/printTemplate/v1/getPrintList',
						param
					)
					.then(response => {
						if (response.data.rows && response.data.rows.length > 0) {
							this.$refs.flowPrint.handleOpen(); //父组件调用子组件方法
						} else {
							this_.printHtml();
						}
					});
			}
		},
		//未设置word套打模板，直接调用打印
		printHtml(data) {
			if (this.type != 'doneList') {
				this.$refs.flowAction.hiddenOpertion();
			} else {
				this.$refs.doneAction.hiddenOpertion();
			}

			setTimeout(() => {
				document.getElementsByTagName('body')[0].style.zoom = 0.8;
				window.print();
				utils.reload();
				document.getElementsByTagName('body')[0].style.zoom = 1;
			}, 500);
		},
		previewWordTemplate(data) {
			if (!data) {
				this.$message({
					message: '请选择打印模板',
					type: 'warning',
				});
				return false;
			}
			if (data && data.printType == 'form') {
				this.$message({
					message: '请选择word套打模板',
					type: 'warning',
				});
				return false;
			}
			Loading.service('表单打印中');
			var url =
				'${form}/form/printTemplate/v1/wordPrint?id=' +
				data.id +
				'&defId=' +
				this.defId +
				'&nodeId=' +
				this.nodeId +
				'&procInstId=' +
				this.procInstId;
			req.get(url).then(res => {
				let loadingInstance = Loading.service('表单打印中');
				if (!res.data.state) {
					this.$message({
						message: res.data.message,
						type: 'warning',
					});
					this.$nextTick(() => {
						// 以服务的方式调用的 Loading 需要异步关闭
						loadingInstance.close();
					});
				} else {
					let url =
						window.context.portal +
						'/file/onlinePreviewController/v1/onlinePreview?fileId=' +
						res.data.value;
					this.$http.get(url).then(resp => {
						let data = resp.data;
						if (data.result == 'error') {
							Message.error('附件不存在');
						} else {
							req
								.get(window.context.portal + data.pdfUrl, 'arraybuffer')
								.then(response => {
									let type = response.headers['content-type'];
									if (type) {
										this.previewWordPdfSrc = window.URL.createObjectURL(
											new Blob([response.data], { type: type })
										);
									} else {
										this.previewWordPdfSrc = window.URL.createObjectURL(
											new Blob([response.data])
										);
									}
                  this.previewWordPdfSrc = haloseeUiUtil.replaceBaseUrl(this.previewWordPdfSrc);
									this.previewWordDialog = true;
								});
							Loading.service('表单打印中').close();
						}
					});
				}
			});
		},
		printWordTemplate(data) {
			if (!data) {
				this.$message({
					message: '请选择打印模板',
					type: 'warning',
				});
				return false;
			}
			if (data && data.printType == 'form') {
				this.$message({
					message: '请选择word套打模板',
					type: 'warning',
				});
				return false;
			}
			Loading.service('表单打印中');
			var url =
				'${form}/form/printTemplate/v1/wordPrint?id=' +
				data.id +
				'&defId=' +
				this.defId +
				'&nodeId=' +
				this.nodeId +
				'&procInstId=' +
				this.procInstId;
			req.get(url).then(res => {
				let loadingInstance = Loading.service('表单打印中');
				if (!res.data.state) {
					this.$message({
						message: res.data.message,
						type: 'warning',
					});
					this.$nextTick(() => {
						// 以服务的方式调用的 Loading 需要异步关闭
						loadingInstance.close();
					});
				} else {
					req
						.download(
							'${portal}/system/file/v1/downloadFile?fileId=' + res.data.value
						)
						.then(r => {
							this.$nextTick(() => {
								// 以服务的方式调用的 Loading 需要异步关闭
								loadingInstance.close();
							});
						});
				}
			});
		},
	},
	created() {
		//不是待办进来
		if (!this.taskId && this.type != 'read' && !this.myReadType) {
			//是否是查看实例页面
			this.isLook = true;
		}
		window.agentLeaderId = this.leaderId;
		let this_ = this;
		if (this.instId == undefined) {
			this.$store
				.dispatch('storeProcess/getNotice', this.taskId)
				.then(tasks => {
					this_.tasks = tasks;
					this_.procInstId = tasks.bpmTask.procInstId;
					this_.defId = tasks.bpmTask.procDefId;
					this_.bpmnInstId = tasks.bpmTask.bpmnInstId;
					this_.subject = tasks.bpmTask.subject;
					this_.status = tasks.bpmTask.status;
					this_.execId = tasks.bpmTask.execId;
					this_.instStatus = tasks.bpmTask.instStatus;
					this_.flowDefKey = tasks.bpmTask.procDefKey;
					if (tasks.curNodeDef && tasks.curNodeDef.nodeProperties) {
						this.nodeType = tasks.curNodeDef.type;
						this.nodeId = tasks.curNodeDef.nodeId;
						let nodeProperties =
							tasks.curNodeDef.nodeProperties[0] ||
							tasks.curNodeDef.localProperties;
						this.choiceExcutor = nodeProperties.choiceExcutor;
						this.jumpType = nodeProperties.jumpType;
						this.approvalArea = nodeProperties.approvalArea;
						this.referOpinion = nodeProperties.referOpinion;
						this.opinionField = nodeProperties.opinionField;
						this.signatureField = nodeProperties.signatureField
							? nodeProperties.signatureField
							: '';
						this.signatureCover = nodeProperties.signatureCover
							? nodeProperties.signatureCover
							: false;
						this.secretFree = nodeProperties.secretFree
							? nodeProperties.secretFree
							: false;
						this.appendOpinion = nodeProperties.appendOpinion;
					}
					//是否显示表单修改记录
					if (tasks.showModifyRecord) {
						this_.showModifyRecord = true;
					}
					//表单formKey
					this_.formKey = tasks.formKey;
					if (!this.bpmnInstId && this.status != 'COMMU') {
						this.$store.dispatch('storeProcess/noticeTurnDode', this.taskId); //知会任务待办转已办
					}
				});
			this.$store.dispatch('storeProcess/addReadRecord', this.taskId); //添加阅读记录
		} else {
			//根据实例id获取实例对象
			this.$store
				.dispatch('storeProcess/getInstanceByInstId', this.instId)
				.then(insts => {
					this.approvalArea = 'processRecord';
					this.defId = insts.procDefId;
					this.bpmnInstId = insts.bpmnInstId;
					this.subject = insts.subject;
					this.instStatus = insts.status;
					//是否显示表单修改记录
					if (insts.showModifyRecord) {
						this.showModifyRecord = true;
					}
					//表单formKey
					this.formKey = insts.bpmFormKey;

					//我的请求列表页面进来的
					if (this.type == 'request') {
						//根据流程实例Id获取发起节点并判断是否允许发起人撤回
						let url =
							req.getContext().bpmRunTime +
							'/runtime/instance/v1/getSponsorRevokeByInstId?instId=' +
							this.instId;
						req.get(url).then(req => {
							this.sponsorRevoke = req.data.value;
						});
					}
				});
			//知会任务待办转已办(待阅列表进来的)
			if (this.readId && !this.myReadType) {
				this.$store.dispatch('storeProcess/noticeTurnDode', this.readId);
			}
			//获取知会任务待办详情
			if (this.readId) {
				this.$store
					.dispatch('storeProcess/getBpmTaskNoticeById', this.readId)
					.then(row => {
						if (row.taskId) {
							this.copyTaskId = row.taskId;
						} else if (row.nodeId) {
							this.selectNodeId = row.nodeId;
						}
					});
			}
			//获取知会任务已办详情
			if (this.readDoneId) {
				this.$store
					.dispatch('storeProcess/getBpmTaskNoticeDoneById', this.readDoneId)
					.then(row => {
						if (row.taskId) {
							this.copyTaskId = row.taskId;
						} else if (row.nodeId) {
							this.selectNodeId = row.taskKey;
						}
					});
			}
		}
		//获取当前用户ID
		this.promoterId = JSON.parse(sessionStorage.getItem('currentUser')).userId;
	},
};
</script>
<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';

.container {
	margin-top: -8px !important;
	height: 100%;

	.task_header {
		width: calc(100% - 40px);
		background: $--background-color-secondary;
	}

	.container__header {
		width: 100%;
		justify-content: space-between;
	}

	.container__header-btngroup {
		margin-right: 10px;
	}

	.container__content {
		margin-top: 40px;
		height: 100%;
	}
}

.singleContainer {
	margin-top: 0px !important;
	height: 100%;

	.task_header {
		width: calc(100% - 40px);
		background: $--background-color-secondary;
	}

	.container__header {
		width: 100%;
		justify-content: space-between;
	}

	.container__header-btngroup {
		margin-right: 10px;
	}

	.container__content {
		margin-top: 40px;
		height: 100%;
	}
}

.el-header {
	padding: 0;
}

.top-subject-col > h3 {
	text-align: left;
	color: #666;
}

.flow-subject {
	text-align: right;
	color: #666;
	margin-top: 18px;
}

.top-btns-col {
	padding-right: 6px;
	height: 48px;
	line-height: 48px;
	text-align: right;
}

.top-btns-col > button {
	color: #666;
}

.top-btns-col > button /deep/ span {
	margin-left: 3px;
}

.top-btns-col > button:hover {
	color: $--theme-color;
}

.text {
	font-size: 14px;
}

.item {
	padding: 18px 0;
}

@page {
	margin: auto 5mm;
	size: auto;
}

.task-card {
	width: 1360px;
	background: #fff;
	padding-top: 140px;
}

.task-card_not {
	width: 1360px;
	background: #fff;
	padding-top: 20px;
}

.task_header {
	position: fixed;
	z-index: 100;
	padding: 0px !important;
}

.btn_region_in {
	background-color: $--background-color-secondary;
}

.watermark {
	display: flex;
	position: fixed;
}

@media print {
	.watermark {
		display: flex;
	}
	.notprint {
		display: none;
	}
}
</style>
