<template>
	<el-main class="base-main">
		<div
			style="
				width: 96%;
				margin: 0px auto 0;
				background-color: #fff;
				padding: 20px;
				margin-top: 20px;
			"
		>
			<div id="printData">
				<div class="form-container">
					<span>表单内容</span>
				</div>
				<div class="form-content">
					<form v-if="html" data-vv-scope="custom-form">
						<online-form
							ref="onlineForm"
							:data="data"
							:html="html"
							:isPrint="print"
							:isView="isView"
							:permission="permission"
							class="custom-form"
							@loadSuccess="loadSuccess"
						/>
					</form>
				</div>
			</div>
			<div
				ref="btnRegion"
				style="width: 100%; text-align: center; padding-top: 20px;"
			>
				<el-button
					v-if="startFlow && startFlow != 'false' && action != 'get'"
					:disabled="disabled"
					type="success"
					@click="start"
					>{{ startLable }}
				</el-button>
				<el-button
					v-if="formButton.print"
					:disabled="disabled"
					icon="el-icon-printer"
					type="primary"
					@click="printDetail()"
					>{{ printLable }}
				</el-button>
				<el-button
					v-if="isShow && action != 'editDraft'"
					:disabled="disabled"
					type="primary"
					@click="boSave()"
					>保存
				</el-button>
				<el-button
					v-if="action === 'editDraft'"
					:disabled="disabled"
					type="primary"
					@click="boSaveAndDelDraft"
				>
					保存并删除草稿
				</el-button>
				<el-button
					v-if="!id && formButton.saveCg"
					:disabled="disabled"
					type="primary"
					@click="boSaveDraft"
					>保存至草稿</el-button
				>
				<el-button type="error" @click="close(false)">返回</el-button>
			</div>
		</div>
	</el-main>
</template>
<script>
import OnlineForm from '@/components/flow/OnlineForm.vue';
import form from '@/api/form.js';
import utils from '@/utils.js';

export default {
	name: 'formContent',
	props: ['templateKey', 'action', 'isShare', 'openType'],
	data() {
		return {
			alias_new: 'statement',
			html: null,
			data: null,
			permission: null,
			reloadOnlineForm: false,
			isView: true,
			disabled: false,
			boAlias: '',
			id: '',
			startFlow: false,
			recordId: '',
			defKey: '',
			formKey: '',
			fillField: '',
			fillValue: '',
			bindList: [],
			print: false,
			isShow: true,
			tempAlias: '',
			startLable: '发起流程',
			printLable: '打印',
			formButton: {
				print: false,
				saveCg: false,
			},
		};
	},
	components: { OnlineForm },
	updated() {
		let result = window.location.href.split('?')[0].split('/');
		if (
			result[result.length - 1] == 'get' ||
			result[result.length - 2] == 'get'
		) {
			this.isShow = false;
		}
		//判断是否显示发起流程按钮
		if (
			window.location.href.split('?')[1] &&
			window.location.href.split('?')[1].split('&')
		) {
			if (
				window.location.href.split('?')[1].split('&')[1] &&
				window.location.href.split('?')[1].split('&')[1] == 'startFlow=false'
			) {
				this.startFlow = false;
			}
		}
	},
	methods: {
		loadSuccess() {
			if (this.$route.query.isPrint) {
				this.printDetail();
			}
		},
		printDetail() {
			this.$refs.btnRegion.style.display = 'none';
			setTimeout(() => {
				document.getElementsByTagName('body')[0].style.zoom = 0.8;
				window.print();
				this.$refs.btnRegion.style.display = 'block';
				if (this.$route.query.isPrint) {
					this.close(false);
				}
				document.getElementsByTagName('body')[0].style.zoom = 1;
			}, 500);
		},
		//启动
		start() {
			utils
				.getOnlineFormData(true)
				.then(formDataStr => this.processStart(formDataStr))
				.catch(reason =>
					utils.handleGetFormDataReject(reason).then(() => this.processStart())
				);
		},
		processStart(formDataStr) {
			utils.closeAllNotification();
			let data = { flowKey: this.defKey };
			if (formDataStr) {
				data.data = Base64.encode(formDataStr);
			}
			this.disabled = true;
			this.$store
				.dispatch('storeProcess/start', data)
				.then(() => {
					this.close(true);
				})
				.catch(() => {
					this.disabled = false;
				});
		},
		//保存
		boSave(delDraftId) {
			utils
				.getOnlineFormData(true)
				.then(formDataStr => {
					utils.closeAllNotification();
					let _me = this;
					// for (let i=0; i<_me.$validator.errors.items.length; i++) {
					//   if(_me.$validator.errors.items[i].rule == "required"){
					//     this.$message.warning("请将信息填写完整");
					//     return false;
					//   }
					// }
					console.debug(_me);
					let data = {
						boAlias: this.boAlias,
						boData: utils.parseToJson(formDataStr),
					};
					//数据视图控件
					// if (this.fillField && this.fillField != "") {
					//   let fillField = this.fillField;
					//   data.boData[this.boAlias][fillField] = this.fillValue;
					// }
					this.disabled = true;

					if (delDraftId) {
						data.delDraftId = delDraftId;
					}
					data.formKey = this.formKey;
					data.templateKey = this.templateKey;
					this.$store.dispatch('form/boSave', data).then(result => {
						if (result.state) {
							//当操作为编辑是，点击保存成功后提示继续编辑还是返回
							if (this.action === 'edit' || this.action === 'add') {
								this.$message.success(result.message);
								this.$confirm('保存成功，是否退出？', '提示', {
									confirmButtonText: '立即退出',
									cancelButtonText: '继续操作',
									type: 'warning',
								})
									.then(() => {
										this.close(false);
									})
									.catch(() => {
										this.$refs.onlineForm.init();
										this.disabled = false;
										if (this.action === 'editDraft') {
											this.editDraftHandler();
										} else {
											this.handler();
										}
									});
							} else {
								this.close(true);
							}
						} else {
							this.disabled = false;
						}
					});
				})
				.catch(reason => utils.handleGetFormDataReject(reason));
		},
		boSaveAndDelDraft() {
			this.boSave(this.draftId);
		},
		//保存
		boSaveDraft() {
			const this_ = this;
			utils
				.getOnlineFormData(false)
				.then(formDataStr => {
					utils.closeAllNotification();
					let _me = this;
					let data = {
						tempAlias: this.tempAlias,
						dataJson: formDataStr,
					};
					if (this.draft) {
						data.id = this.draft.id;
						data.title = this.draft.title;
						data.createBy = this.draft.createBy;
						data.createTime = this.draft.createTime;
					}
					//数据视图控件
					// if(this.bindList && this.bindList.length >0) {
					//   for(var i=0;i<this.bindList.length;i++){
					//     data.boData[this.boAlias][this.bindList[i].key] = this.bindList[i].value;
					//   }
					// }
					this.disabled = true;
					this.$store.dispatch('form/boSaveDraft', data).then(result => {
						if (result.state) {
							this.$message.success(result.message);
							let dataViewFlag = false;
							//数据视图随机添加到其他菜单下面时获取当前菜单的别名  并且当前数据视图不是表单里的数据视图  dataViewFlag
							if (
								sessionStorage.menu_alias &&
								!(this_.fillField && this_.fillField != '')
							) {
								this.alias_new = sessionStorage.menu_alias;
							}
							//判断当前数据视图是不是表单里的数据视图
							if (this.bindList && this.bindList.length > 0) {
								dataViewFlag = true;
							}
							if (_me.isShare) {
								_me.close(true);
								return;
							}
							let path = '';
							if (this.openType == 'new') {
								path = `/statement/draftList/${this.tempAlias}/${dataViewFlag}?isNew=true`;
							} else {
								path =
									'/' +
									this.alias_new +
									'/draftList/' +
									this.tempAlias +
									'/' +
									dataViewFlag;
							}
							this.$router.push(path);
							// this.$router.push("/statement/draftList");
						} else {
							this.disabled = false;
							this.$message.error(result.message);
						}
					});
				})
				.catch(reason => utils.handleGetFormDataReject(reason));
		},

		//关闭窗口
		close(isDelay) {
			utils.closeAllNotification();
			let _me = this;
			let url = window.location.href;
			let arr = url.split('?');
			if (isDelay) {
				setTimeout(function () {
					if (_me.isShare) {
						_me.$router.push('/messageFillPage/1');
						return;
					}
					if (arr.length > 1) {
						let param = url.split('?')[1].split('&');
						if (param.includes('isNewPage=true')) {
							_me.$router.push('/messageFillPage/1');
							return;
						}
					}
					if (_me.openType == 'new') {
						//跳转到草稿
						let dataViewFlag = false;
						if (_me.bindList && _me.bindList.length > 0) {
							dataViewFlag = true;
						}
						_me.$router.push(
							`/statement/draftList/${_me.tempAlias}/${dataViewFlag}?isNew=true`
						);
					} else {
						_me.$router.go(-1);
					}
				}, 2000);
			} else {
				if (_me.isShare) {
					_me.$router.push('/messageFillPage/1');
				} else {
					if (_me.openType == 'new') {
						window.close();
					} else {
						//打印取消之后会导致路由发生变化,不能直接回到上一个页面
						let menuAlias = 'statement';
						//发布到其它菜单的别名
						if (sessionStorage.menu_alias) {
							menuAlias = sessionStorage.menu_alias;
						}
						let url = '/' + menuAlias + '/template/preview/' + _me.templateKey;
						if (_me.$route.meta && _me.$route.meta.single) {
							url += '/true';
						}
						_me.$router.push(url);
					}

					// _me.$router.go(-1);
				}
			}
		},
		handler() {
			let _me = this;
			let data = {
				formKey: _me.formKey,
				boAlias: _me.boAlias,
				id: _me.id ? _me.id : '',
				action: _me.action,
				recordId: _me.recordId ? _me.recordId : '',
				dataKey: _me.templateKey ? _me.templateKey : '',
			};
			_me.$store.dispatch('form/getTemplateForm', data).then(rep => {
				if (rep.result) {
					_me.data = rep.data;
					//数据视图控件
					if (_me.bindList && _me.bindList.length > 0) {
						for (var i = 0; i < _me.bindList.length; i++) {
							if (_me.data[_me.boAlias][_me.bindList[i].key] == '') {
								// 回填数据
								_me.data[_me.boAlias][_me.bindList[i].key] =
									_me.bindList[i].value;
							}
						}
					}
					//是否是数据报表明细
					if (rep.permission && _me.action == 'get') {
						const permissionObj = rep.permission;
						let commonRight = '';
						//如果是管理端进入，则将页面字段的权限修改为可编辑
						if (_me.type == 'manage') {
							commonRight = 'w';
							//如果是查看实例，也是获取发起流程的表单和权限。只不过所有可见的权限要变成编辑
						} else {
							commonRight = 'r';
						}
						if (permissionObj.fields) {
							for (var key in permissionObj.fields) {
								const bodef = permissionObj.fields[key];
								if (bodef) {
									for (var fname in bodef) {
										if (
											commonRight == 'w' ||
											(commonRight == 'r' && bodef[fname] != 'n')
										) {
											bodef[fname] = commonRight;
										}
									}
								}
								permissionObj.fields[key] = bodef;
							}
						}
						if (permissionObj.table) {
							for (var tableKey in permissionObj.table) {
								const table = permissionObj.table[tableKey];
								if (table) {
									if (commonRight == 'w') {
										table['hidden'] = false;
										table['add'] = true;
										table['del'] = true;
									} else if (commonRight == 'r') {
										table['add'] = false;
										table['del'] = false;
										table['required'] = false;
										table['edit'] = false;
									}
								}
								permissionObj.table[tableKey] = table;
							}
						}
						_me.permission = permissionObj;
					} else {
						_me.permission = rep.permission;
					}
					_me.html = rep.form.formHtml;
					_me.formButton = JSON.parse(rep.form.formButton);
					this.handlerJs(rep.form);
				}
			});
		},
		handlerJs(rep) {
			window._me = this;
			window._me.reloadOnlineForm = true;
			window.currentUser = _me.$store.state.login.currentUser;

			window.data = _me.data;
			window._this = _me;
			console.debug(data, _this, currentUser);
			setTimeout(() => {
				window.eval(rep.diyJs);
			}, 10);
		},
		editDraftHandler() {
			let _me = this;
			_me.$store.dispatch('form/getTempDraftData', _me.draftId).then(rep => {
				if (rep.result) {
					_me.data = rep.data;
					_me.draft = rep.draft;
					if (rep.permission) {
						_me.permission = rep.permission;
					}
					_me.html = rep.form.formHtml;
					this.handlerJs(rep.form);
				}
			});
		},
		init() {
			var $ = require('jquery');
			console.debug($);
			this.id = utils.getUrlKey('id');
			this.startFlow = utils.getUrlKey('startFlow');
			this.recordId = utils.getUrlKey('recordId');
			let bindList = utils.getUrlKey('bindList');
			if (bindList) {
				this.bindList = JSON.parse(Base64.decode(decodeURIComponent(bindList)));
			}
			this.draftId = utils.getUrlKey('draftId');
			this.isView = this.action !== 'get';
			let _me = this;

			this.$store
				.dispatch('form/getBpmDataTemplateInfo', {
					templateKey: this.templateKey,
				})
				.then(result => {
					if (result.state) {
						if (result.value.allowShare == 2 && _me.isShare) {
							_me.$router.push('/messageFillPage/5');
							return;
						}
						_me.boAlias = result.value.boDefAlias;
						_me.defKey = result.value.defId;
						_me.formKey = result.value.formKey;
						_me.tempAlias = result.value.alias;
						if (result.value.manageField) {
							let re = JSON.parse(result.value.manageField);
							re.forEach(item => {
								if (item.name == 'startFlow') {
									if (item.right) {
										this.getStartFlowRight(item.right)
											.then(res => {
												if (res) {
													this.startFlow = true;
													this.startLable = item.desc;
												} else {
													this.startFlow = false;
												}
											})
											.catch(() => {
												this.startFlow = false;
											});
									}
								} else if (item.name == 'print') {
									this.printLable = item.desc;
								}
							});
						} else {
							this.startFlow = true;
						}
						this.reloadOnlineForm = false;
						//如果编辑的是草稿数据
						if (this.action === 'editDraft') {
							this.editDraftHandler();
						} else {
							this.handler();
						}
					}
				});
		},
		getStartFlowRight(rightStr) {
			return new Promise((resolve, reject) => {
				let rightArr = JSON.parse(rightStr);
				for (let i = 0; i < rightArr.length; i++) {
					let right = rightArr[i];
					if (right.type == 'everyone') {
						resolve(true);
						return;
					}
				}
				let userId = this.$store.state.login.currentUser.userId;
				this.$http
					.get('${uc}/api/user/v1/user/getUserRightMapByIds?ids=' + userId)
					.then(resp => {
						let rightMap = resp.data[userId];
						for (let i = 0; i < rightArr.length; i++) {
							let type = rightArr[i].type == 'pos' ? 'job' : rightArr[i].type;
							if (this.calcAuth(rightArr[i].id, rightMap[type])) {
								resolve(true);
								return;
							}
						}
						resolve(false);
					});
			});
		},
		//计算权限
		calcAuth(btnIds, userIds) {
			if (!btnIds || !userIds) {
				return false;
			}
			let btnIdsArr = btnIds.split(',');
			let userIdsArr = userIds.replace(/\'/g, '').split(',');
			return userIdsArr.some(item => {
				return btnIdsArr.includes(item);
			});
		},
	},
	created() {
		this.init();
	},
	watch: {
		templateKey: function (n, o) {
			if (n && o && n != o) {
				this.init();
			}
		},
		//控件的联动会导致表单的permission发生变化，联动显示会变成'w'，需要改回原来的权限
		permission: {
			handler(newVal, oldVal) {
				if (this.formKey && this.action == 'get') {
					for (let key in newVal.fields[this.formKey]) {
						if (newVal.fields[this.formKey][key] == 'w') {
							newVal.fields[this.formKey][key] = 'r';
						}
					}
				}
			},
			deep: true,
		},
	},
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';

/deep/ .el-form-item {
	margin-bottom: 15px !important;
	margin-top: 10px !important;
	margin-right: 10px !important;
}

.base-main {
	background-color: #e9eef3;
	height: 100%;
}

/deep/ .form-table {
	width: 100%;
	border-top: 1px solid #ebeef5;
	border-left: 1px solid #ebeef5;
}

/deep/ .form-table > thead > tr > th,
/deep/ .form-table > tbody > tr > th {
	text-align: right;
	color: #666;
	font-weight: normal;
}

/deep/ .form-table > tbody > tr > th.group-th {
	text-align: left;
	background: #f9f9f9;
	font-weight: bold;
}

/deep/ .form-table > thead > tr.sub-table-header > th {
	text-align: center;
	background: #fafafa;
}

/deep/ .form-table > tbody > tr > th > span,
/deep/ .form-table > thead > tr > th > span {
	color: #f00;
}

/deep/ .form-table > tbody > tr > th,
/deep/ .form-table > tbody > tr > td,
/deep/ .form-table > tfoot > tr > td,
/deep/ .form-table > thead > tr > th {
	border-right: 1px solid #ebeef5;
	border-bottom: 1px solid #ebeef5;
	padding: 10px;
	min-width: 0;
	box-sizing: border-box;
	text-overflow: ellipsis;
	vertical-align: middle;
	position: relative;
}

/deep/ .form-table > tfoot > tr > td {
	padding: 5px 10px;
}

.form-container {
	border-bottom: 1px solid #ebeef5;
	padding-bottom: 10px;
}

.form-container > span {
	border-left: 3px solid $--theme-color;
	font-weight: bold;
	font-size: 14px;
	padding-left: 10px;
	color: #666;
}

.form-content {
	padding: 11px 0;
}

/deep/ div[aria-invalid='true'] + small,
/deep/ small.error-message {
	display: block;
	margin-top: 8px;
	color: #f56c6c;
	font-size: 12px;
	font-weight: bold;
	line-height: 1;
}

.form-empty {
	position: absolute;
	text-align: center;
	width: 100%;
	font-size: 20px;
	top: 200px;
	color: #ccc;
}
</style>
