<template>
	<ht-runtime-template
		:sqlAlias="sqlAlias"
		:alias="alias"
		:single="single"
		:queryView="queryView"
		class="data-preview-wrap"
	/>
</template>

<script>
import { mapState } from 'vuex';
import { Loading } from 'element-ui';
import HtCheckbox from '@/components/control/HtCheckbox.vue';
import HtDialog from '@/components/control/HtDialog.vue';
import HtDialogBtn from '@/components/control/htDialogBtn.vue';
import utils from '@/utils.js';
import { Base64 } from 'js-base64';
import Vue from 'vue';

export default {
	name: 'dynamic-view',
	props: {
		single: String,
		sqlAlias: String,
		alias: String,
		html: String,
		queryView: Object,
	},
	created() {
		this.init();
	},
	watch: {
		html: function (newVal) {
			if (newVal) {
				this.init();
			}
		},
	},
	methods: {
		init() {
			Vue.component('ht-runtime-template', {
				props: {
					single: String,
					sqlAlias: String,
					alias: String,
					html: String,
					queryView: Object,
				},
				template: this.html,
				data() {
					return {
						bpmRunTime: window.context.bpmRunTime,
						fileList: [],
						tableData: { selectRows: [], querys: '' },
						dialogExportVisible: false,
						exportData: { getType: 'all', expField: [] },
						exportSellection: [],
						searchForm: {},
						displayFields: [],
						alarmSettingMap: {},
						summaryTypeMap: {},
						queryForm: {
							queryData: '',
						},
						uploadParams: { id: [] },
						formType: false,
						labelPosition: 'left',
						incons: 'el-icon-arrow-down',
						formatterMap: {},
						options: {
							fullscreen: true,
							lock: true,
						},
						uploadError: '/runtime/photoErrorCsv/v1/uploadErrorList',
						upoadPdfToAzure:
							window.context.bpmRunTime + '/runtime/blob/v1/upoadPdfToAzure',
						uploadUnprepare: '/runtime/blob/v1/upoadToAzure',
						summarySetting: [],
						activeNames: ['1'],
					};
				},
				computed: mapState({
					rows: state => state.form.querySqlViewRows,
					pagination: state => state.form.querySqlViewPagination,
					total: state => state.form.querySqlViewTotal,
					uploadHeaders: state => {
						return { Authorization: `Bearer ${state.login.currentUser.token}` };
					},
					uploadErrorHttp() {
						return this.bpmRunTime + this.uploadError;
					},
					uploadUnprepareHttp() {
						return this.bpmRunTime + this.uploadUnprepare;
					},
				}),
				components: {
					HtCheckbox,
					HtDialog,
					HtDialogBtn,
				},
				watch: {
					formKey: function (newVal) {
						if (newVal) {
							this.init();
						}
					},
					'tableData.selectRows': function (newVal) {
						if (newVal.length > 0) {
							let me_ = this;
							me_.uploadParams.id = [];
							newVal.forEach(item => {
								me_.uploadParams.id.push(item.INSTID);
							});
						}
					},
					$route: 'init',
					queryView: {
						handler(newVal, oldVal) {
							if (newVal.shows) {
								let displayField = utils.parseToJson(newVal.shows);
								for (var i = 0; i < displayField.length; i++) {
									if (displayField[i].hidden == 0) {
										this.displayFields.push(displayField[i]);
										if (displayField[i].summaryType) {
											this.summaryTypeMap[displayField[i].fieldName] =
												displayField[i].summaryType;
										}
									}
									if (displayField[i].formater) {
										this.formatterMap[displayField[i].fieldName] =
											displayField[i].formater;
									}
									if (displayField[i].alarmSetting) {
										this.alarmSettingMap[displayField[i].fieldName] =
											displayField[i].alarmSetting;
									}
								}
							}
							if (newVal.summarySetting) {
								this.summarySetting = JSON.parse(newVal.summarySetting);
							}
						},
						immediate: true,
					},
				},

				methods: {
					//打印
					printList() {
						document.body.innerHTML = document.getElementById(
							'printData'
						).innerHTML;
						window.print();
						location.reload();
					},
					//生成二维码

					//路由跳转
					routerPush(url) {
						this.$router.push(url);
					},
					//查看与处理流程按钮
					dispose(row) {
						let url;
						if (row.TASKID) {
							//审批任务
							url = '/task/' + row.TASKID;
						} else {
							//查看流程实例
							url = '/inst/' + row.INSTID;
						}
						this.$router.push(url);
					},

					handleSizeChange: function (size) {
						//每页下拉显示数据
						this.$store.dispatch('form/setQuerySqlViewPaginationSize', size);
						this.search();
					},
					handleCurrentChange: function (currentPage) {
						//点击第几页
						this.$store.dispatch(
							'form/setQuerySqlViewPaginationPageNum',
							currentPage
						);
						this.search();
					},
					//回车查询
					searchEnterFun: function (e) {
						let keyCode = window.event ? e.keyCode : e.which;
						if (keyCode == 13) {
							this.search('find');
						}
					},
					search(str) {
						const loading = this.$loading(this.options);
						let params = {};
						if (str == 'find') {
							this.$store.dispatch('form/setQuerySqlViewPaginationPageNum', 1);
						}
						//判断为合并查询还是分开查询
						if (this.formType) {
							params = this.getQueryFilter();
						} else {
							//判断是否配置了合并查询
							if ($('.search-query').length > 0) {
								params = this.getConditionQuery();
							} else {
								params = this.getQueryFilter();
							}
						}
						// if ($.isEmptyObject(this.searchForm)) {
						// 	this.$store
						// 		.dispatch('form/getQuerySqlViewByPagination', params)
						// 		.then(() => {
						// 			loading.close();
						// 		});
						// } else {
						// 	this.$store
						// 		.dispatch('form/getQuerySqlViewByPagination', params)
						// 		.then(() => {
						// 			loading.close();
						// 		});
						// }
						this.$store
							.dispatch('form/getQuerySqlViewByPagination', params)
							.then(() => {
								loading.close();
							});
					},
					getQueryFilter() {
						let operationMap = this.getSearchItems(); //查询条件类型
						// let fieldQueryMap = this.getFieldQuery(); //查询条件字段
						let specialMap = this.getSpecialMap(); //获取特殊查询情况（自定义对话框）
						let querys = []; //查询条件
						let queryFilter = {};
						let pageBean = { pageBean: this.pagination };
						let params = { sqlAlias: this.sqlAlias, alias: this.alias };
						params.pagination = pageBean;
						if ($.isEmptyObject(this.searchForm)) {
							return params;
						} else {
							for (var key in this.searchForm) {
								if (
									typeof this.searchForm[key] != 'undefined' &&
									this.searchForm[key] != ''
								) {
									if (this.searchForm[key] instanceof Array) {
										if (operationMap[key] === 'BETWEEN') {
											let valueArray = [];
											for (let i = 0; i < this.searchForm[key].length; i++) {
												valueArray.push(this.searchForm[key][i]);
											}
											querys.push({
												property: key,
												value: valueArray.join(','),
												group: 'main',
												operation: operationMap[key],
												relation: 'AND',
											});
										} else {
											for (let i = 0; i < this.searchForm[key].length; i++) {
												querys.push({
													property: key,
													value: this.searchForm[key][i],
													group: 'main',
													operation: operationMap[key],
													relation: 'AND',
												});
											}
										}
									} else if (
										this.searchForm[key].includes(',') &&
										!specialMap[key]
									) {
										let arr = this.searchForm[key].split(',');
										for (let i = 0; i < arr.length; i++) {
											if (
												arr[i] == '' ||
												arr[i] == null ||
												typeof arr[i] == 'undefined'
											) {
												arr.splice(i, 1);
												i = i - 1;
											}
										}
										arr.forEach(v => {
											querys.push({
												property: key,
												value: v,
												group: 'main',
												operation: operationMap[key],
												relation: 'AND',
											});
										});
									} else {
										querys.push({
											property: key,
											value: this.searchForm[key],
											group: 'main',
											operation: operationMap[key],
											relation: 'AND',
										});
									}
								}
							}
							queryFilter = { pageBean: this.pagination, querys };
							params.pagination = queryFilter;
							return params;
						}
					},
					//获取查询条件类型
					getSearchItems() {
						let searchItems = $('.search-item');
						let operationMap = {}; //查询条件类型
						let operationType = {
							LK: 'LIKE',
							EQ: 'EQUAL',
							between: 'BETWEEN',
							LFK: 'LEFT_LIKE',
							RHK: 'RIGHT_LIKE',
							NE: 'NOT_EQUAL',
							LT: 'LESS',
							LE: 'LESS_EQUAL',
							GT: 'GREAT',
							GE: 'GREAT_EQUAL',
						};
						if (searchItems) {
							for (var i = 0; i < searchItems.length; i++) {
								var operation;
								if (typeof $(searchItems[i]).attr('ht-query') != 'undefined') {
									//查询条件类型
									operation = $(searchItems[i]).attr('operation');
									operationMap[$(searchItems[i]).attr('ht-query')] =
										typeof operationType[operation] != 'undefined'
											? operationType[operation]
											: operation;
								} else if (
									typeof $(searchItems[i]).children().attr('ht-query') !=
									'undefined'
								) {
									//查询条件类型
									operation = $(searchItems[i]).children().attr('operation');
									operationMap[$(searchItems[i]).children().attr('ht-query')] =
										typeof operationType[operation] != 'undefined'
											? operationType[operation]
											: operation;
								}
							}
						}
						return operationMap;
					},
					//获取查询条件字段
					getFieldQuery() {
						let searchItems = $('.search-item');
						let fieldQueryMap = {}; //查询条件字段

						if (searchItems) {
							for (var i = 0; i < searchItems.length; i++) {
								if (typeof $(searchItems[i]).attr('ht-query') != 'undefined') {
									//查询条件字段
									fieldQueryMap[$(searchItems[i]).attr('ht-query')] = $(
										searchItems[i]
									).attr('field-query');
								} else if (
									typeof $(searchItems[i]).children().attr('ht-query') !=
									'undefined'
								) {
									//查询条件字段
									fieldQueryMap[
										$(searchItems[i]).children().attr('ht-query')
									] = $(searchItems[i]).children().attr('field-query');
								}
							}
						}
						return fieldQueryMap;
					},
					//获取特殊查询情况（自定义对话框）
					getSpecialMap() {
						let searchItems = $('.search-item');
						let fieldQueryMap = {}; //查询条件字段

						if (searchItems) {
							for (var i = 0; i < searchItems.length; i++) {
								if (typeof $(searchItems[i]).attr('ht-query') != 'undefined') {
									//查询条件字段
									fieldQueryMap[$(searchItems[i]).attr('ht-query')] =
										typeof $(searchItems[i]).attr('special-query') !=
										'undefined'
											? true
											: false;
								} else if (
									typeof $(searchItems[i]).children().attr('ht-query') !=
									'undefined'
								) {
									//查询条件字段
									fieldQueryMap[$(searchItems[i]).children().attr('ht-query')] =
										typeof $(searchItems[i]).children().attr('special-query') !=
										'undefined'
											? true
											: false;
								}
							}
						}
						return fieldQueryMap;
					},
					getConditionQuery() {
						let searchAll = $('.search-query');
						let values = '';
						let querys = []; //查询条件
						let queryFilter = {};
						let pageBean = { pageBean: this.pagination };
						let params = { sqlAlias: this.sqlAlias, alias: this.alias };
						params.pagination = pageBean;
						if (this.queryForm.queryData == '') {
							return params;
						} else {
							if (
								typeof $($(searchAll[0]).children()[0]).attr(
									'ht-quick-search'
								) != 'undefined'
							) {
								values = $($(searchAll[0]).children()[0]).attr(
									'ht-quick-search'
								);
								var arr = values.split(',');
								for (let value of arr) {
									querys.push({
										property: value,
										value: this.queryForm.queryData,
										group: 'main',
										operation: 'LIKE',
										relation: 'OR',
									});
								}
							}
						}
						queryFilter = { pageBean: this.pagination, querys };
						params.pagination = queryFilter;
						return params;
					},
					//打开高级检索
					advanced() {
						this.formType = !this.formType;
						if (this.formType) {
							this.incons = 'el-icon-arrow-up';
							this.queryForm.queryData = '';
						} else {
							this.incons = 'el-icon-arrow-down';
							this.searchForm = {};
						}
					},
					reset() {
						this.queryForm.queryData = '';
						this.searchForm = {};
						this.search('find');
					},
					handleSelectionChange(val) {
						this.tableData.selectRows = val;
					},

					selectable(row, index) {
						if (row.BATCH_COVER_FLAG != 'YES' && row.NODEID == 'UserTask171') {
							return true;
						}
						return false;
					},
					//点击导出按钮
					exports() {
						this.dialogExportVisible = true;
					},

					punchOrder() {
						this.$store
							.dispatch('storeProcess/downLoadToFile', 'Batchkeijyo')
							.then(res => {});
					},

					handleRemove(file, fileList) {
						console.log(file, fileList);
					},
					beforeAvatarUpload(file) {
						var fileName = file.name.split('.');
						const extension = fileName[fileName.length - 1] === 'pdf';
						if (!extension) {
							this.$message({
								message: '上传模板只能是PDF格式!',
								type: 'warning',
							});
							return false;
						}
						if (this.tableData.selectRows.length == 0) {
							this.$message({
								type: 'warning',
								message: '请选择要上传送付状的案件',
							});
							return false;
						}
						return true;
					},

					onSuccessUpload(response, file, fileLis) {
						this.$message.success('送付状成功');
						window.location.reload();
					},
					handlePreview(file) {},
					//确定导出
					submitExport() {
						if (!this.exportData || this.exportData.expField.length < 1) {
							this.$message({
								type: 'info',
								message: '请选择要导出的字段！',
							});
							return;
						}
						let expField = '';
						for (var i = 0; i < this.exportData.expField.length; i++) {
							if (i > 0) {
								expField += ',';
							}
							expField += this.exportData.expField[i].fieldName;
						}
						expField = Base64.encode(expField).replace(/\+/g, '%2B');
						// let params = { sqlAlias: this.sqlAlias, alias: this.alias };
						let data = {
							sqlAlias: this.sqlAlias,
							alias: this.alias,
							getType: this.exportData.getType,
							expField: expField,
						};
						data.query = this.getQueryFilter().pagination;
						let loadingInstance = Loading.service({ fullscreen: true }); //开始
						this.$store.dispatch('form/querySqlViewExport', data).then(() => {
							loadingInstance.close(); // 结束
							this.dialogExportVisible = false;
						});
					},

					//取消导出
					exportCancel() {
						this.dialogExportVisible = false;
						this.exportData.expField = [];
					},

					handleExportSelectionChange(val) {
						this.exportData.expField = [];
						if (val) {
							this.exportData.expField = val;
						}
					},

					//全选
					handleExportSelectAll() {
						this.exportData.expField = this.displayFields;
					},

					//排序
					sort(index, type) {
						if ('up' == type) {
							if (index === 0) {
								this.$message({
									message: '已经是列表中第一位',
									type: 'warning',
								});
							} else {
								let temp = this.displayFields[index - 1];
								Vue.set(
									this.displayFields,
									index - 1,
									this.displayFields[index]
								);
								Vue.set(this.displayFields, index, temp);
							}
						} else {
							if (index === this.displayFields.length - 1) {
								this.$message({
									message: '已经是列表中最后一位',
									type: 'warning',
								});
							} else {
								this.isTransition = true;
								let i = this.displayFields[index + 1];
								Vue.set(
									this.displayFields,
									index + 1,
									this.displayFields[index]
								);
								Vue.set(this.displayFields, index, i);
							}
						}
					},

					getSubEntsByFormKey(refId) {
						let _me = this;
						_me.tabs = [];
						if (!_me.ents || _me.ents.length < 1) {
							this.$store
								.dispatch('form/getSubEntsByFormKey', this.templateInfo.alias)
								.then(ents => {
									_me.ents = ents;
									this.getSubData(_me, refId);
								});
						} else {
							this.getSubData(_me, refId);
						}
					},
					getSummaries(param) {
						let _summaryTypeMap = this.summaryTypeMap;
						const { columns, data } = param;
						const sums = [];
						columns.forEach((column, index) => {
							if (index === 0) {
								sums[index] = '合计';
								return;
							}
							if (
								_summaryTypeMap[column.property] &&
								_summaryTypeMap[column.property] == 'sum'
							) {
								const values = data.map(item => Number(item[column.property]));
								if (!values.every(value => isNaN(value))) {
									sums[index] = values.reduce((prev, curr) => {
										const value = Number(curr);
										if (!isNaN(value)) {
											return prev + curr;
										} else {
											return prev;
										}
									}, 0);
								} else {
									sums[index] = 'N/A';
								}
							}
						});

						return sums;
					},
					columnFormatter(row, column, cellValue) {
						let formatter = this.formatterMap[column.property];
						if (formatter) {
							try {
								var script =
									'var formatterFunction = function(row,column,cellValue){ ' +
									formatter +
									'};';
								window.row=row;
								window.column=column;
								window.cellValue=cellValue;
								var result = window.eval(
									script + 'formatterFunction(row,column,cellValue);'
								);
								return result;
							} catch (e) {
								return cellValue;
							}
						} else {
							return cellValue;
						}
					},
					dateFormatter(row, column, cellValue) {
						if (cellValue) {
							return cellValue.replace('.0', '');
						} else {
							return cellValue;
						}
					},
					getAlarmColor(field, cellValue) {
						let alarmSetting = this.alarmSettingMap[field];
						let type = '';
						this.displayFields.forEach(item => {
							if (item.fieldName === field) {
								type = item.dataType;
							}
						});
						if (alarmSetting) {
							try {
								let alarmSettingJson = utils.parseToJson(alarmSetting);
								let alarmScript = '';
								for (var i = 0; i < alarmSettingJson.length; i++) {
									let alarm = alarmSettingJson[i];
									let condition = alarm.condition;
									let conditionStr = '';
									for (var m = 0; m < condition.length; m++) {
										if (m > 0) {
											conditionStr += ' && ';
										}
										if (
											type === 'number' ||
											type === 'bigint' ||
											type === 'int'
										) {
											if (condition[m].op == 'indexOf' && condition[m].val) {
												conditionStr =
													conditionStr +
													"'" +
													cellValue +
													"'.indexOf('" +
													condition[m].val +
													"')!=-1";
											} else if (condition[m].op == 'notIndexOf') {
												conditionStr =
													conditionStr +
													"'" +
													cellValue +
													"'.indexOf('" +
													condition[m].val +
													"')==-1";
											} else {
												conditionStr =
													conditionStr +
													cellValue +
													condition[m].op +
													condition[m].val;
											}
										} else {
											if (condition[m].op == 'indexOf' && condition[m].val) {
												conditionStr =
													conditionStr +
													"'" +
													cellValue +
													"'.indexOf('" +
													condition[m].val +
													"')!=-1";
											} else if (condition[m].op == 'notIndexOf') {
												conditionStr =
													conditionStr +
													"'" +
													cellValue +
													"'.indexOf('" +
													condition[m].val +
													"')==-1";
											} else {
												conditionStr =
													conditionStr +
													"'" +
													cellValue +
													"'" +
													condition[m].op +
													"'" +
													condition[m].val +
													"'";
											}
										}
										//conditionStr = conditionStr+cellValue+condition[m].op+condition[m].val;
									}
									if (i > 0) {
										alarmScript += ' else ';
									}
									let colorStr = 'color:' + alarm.color + '';
									alarmScript =
										alarmScript +
										'if(' +
										conditionStr +
										"){return '" +
										colorStr +
										"';}";
								}
								if (alarmScript) {
									alarmScript += 'else{ return "";}';
									var script =
										'var alarmFunction = function(){ ' + alarmScript + '};';
									var result = window.eval(script + 'alarmFunction();');
									return result;
								} else {
									return '';
								}
							} catch (e) {
								return '';
							}
						}
					},
					summary(method, field, decimal) {
						let list = this.rows
							.filter(item => item[field] !== undefined && item[field] !== '')
							.map(item => Number(item[field]));
						if (method === 'count') {
							return list.length;
						} else if (method === 'sum') {
							return list.reduce((a, b) => a + b).toFixed(decimal);
						} else if (method === 'min') {
							return Math.min(...list).toFixed(decimal);
						} else if (method === 'max') {
							return Math.max(...list).toFixed(decimal);
						} else if (method === 'avg') {
							return (list.reduce((a, b) => a + b) / list.length).toFixed(
								decimal
							);
						}
					},
					showSearchPane() {
						return true;
					},
				},
			});
		},
	},
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/element-variables.scss';
/deep/ th.todo-header-row {
	background-color: #fafafa;
	font-size: 13px;
}

/deep/ tr.todo-row {
	font-size: 13px;
	color: $--color-text-regular;
}

.el-container {
	background-color: #fff;
}

.el-row {
	margin-bottom: 20px;
}

.el-header {
	border-bottom: 1.5px solid #ededed;
}

.i {
	margin-right: 4px;
}

.todo-subject {
	cursor: pointer;
}

.todo-subject:hover {
	color: $--theme-color;
}

/deep/ .el-dialog__body {
	padding: 15px 10px;
}

/deep/ .el-checkbox {
	margin-left: 15px;
}

/deep/ .el-radio {
	margin-left: 15px;
}

/deep/ .el-button {
	margin-left: 0px;
}

.data-preview-wrap {
	height: calc(100% - 62px);
	/deep/.el-table {
		max-height: 750px;
		overflow: auto;
	}
	/deep/.blurred-search__row {
		margin-left: -2px;
		margin-bottom: 10px;
		display: inline-flex;
		.blurred-search-btn__item {
			margin-left: 10px;
		}
	}
	/deep/.top_btn_col {
		margin-bottom: 10px;
		display: inline-block;
		// margin-left: -10px;
		.el-button {
			margin-right: 10px;
		}
		.el-button-group {
			margin-right: 10px;
			.el-button {
				margin-right: 0px;
			}
		}
	}
	/deep/.top_right_col {
		float: right;
		margin-bottom: 10px;
		.el-button {
			margin-right: 10px;
		}
	}
	/deep/.demo-form-inline {
		/deep/.el-col-6 {
			margin-bottom: 10px;
		}
	}
}
</style>
