<template>
	<div name="online-form">
		<el-row class="top-title__row">
			<h3 class="top-title">{{ queryView.name ? queryView.name : '' }}</h3>
		</el-row>
		<span v-if="html">
			<dynamic-view
				:sqlAlias="sqlAlias"
				:alias="alias"
				:html="html"
				:single="single"
				:queryView="queryView"
			/>
		</span>
		<div class="loaded-fail__div" v-if="loadedFail"
			>{{ alias }}视图不存在...</div
		>
	</div>
</template>

<script>
import DynamicView from '@/components/querySql/DynamicView.vue';
import utils from '@/utils.js';

export default {
	name: 'querySqlContent',
	props: {
		sqlAlias: String,
		alias: String,
		single: String,
	},
	data() {
		return {
			queryView: {},
			displayFields: [],
			html: '',
			alarmSettingMap: {},
			summaryTypeMap: {},
			loadedFail: false,
		};
	},
	watch: {
		alias: function (newVal) {
			if (newVal) {
				this.init();
			}
		},
	},
	components: {
		DynamicView,
	},

	created() {
		this.init();
	},
	methods: {
		// 根据当前formKey初始化
		init() {
			const loading = this.$loading(this.options);
			let _me = this;
			this.$store
				.dispatch('form/getQuerySqlView', {
					sqlAlias: this.sqlAlias,
					alias: this.alias,
				})
				.then(result => {
					if (result) {
						_me.queryView = result;
						_me.html = result.template;

						let params = { sqlAlias: _me.sqlAlias, alias: _me.alias };
						let pageBean = {
							pageBean: {
								page: '1',
								pageSize: result.pageSize ? result.pageSize : 30,
								showTotal: 'true',
							},
						}; //初次加载默认pageBean
						params.pagination = pageBean;
						this.$store
							.dispatch('form/getQuerySqlViewByPagination', params)
							.then(() => {
								loading.close();
							});
					} else {
						this.loadedFail = true;
					}
				})
				.finally(() => {
					loading.close();
				});
		},
	},
};
</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;
}

.top-title__row {
	margin-bottom: 10px;
	.top-title {
		font-size: 14px;
		border-bottom: 1px solid #ccc;
		margin: 17px 0 0 0;
		padding: 0 0 12px 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;
}
.loaded-fail__div {
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	color: #f56c6c;
}
</style>
