<template>
	<div class="database-container">
		<el-dialog title="登录" center :visible.sync="dialogVisible" width="30%" :show-close="false"
			:close-on-press-escape="false" :close-on-click-modal="false" :before-close="handleClose">
			<div class="databasebox">
				<div flex="cross:center">
					<label class="databasebox-title">用户名</label>
					<el-input v-model="loginForm.baseLoginCode" auto-complete="off" placeholder="用户名"></el-input>
				</div>
				<div flex="cross:center" style="margin-top: 8px;">
					<label class="databasebox-title">密码</label>
					<el-input v-model="loginForm.baseLoginPwd" type="loginpwd" auto-complete="off" placeholder="密码">
					</el-input>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="baseLogin">确 定</el-button>
			</span>
		</el-dialog>

		<div>
			<h5>数据库连接设置</h5>
			<base-form ref="databaseForm" :formRow="dataFormRow" style="padding: 10px 30px;" :isFunBtn="false">
			</base-form>
			<div style="text-align: right;">
				<el-button type="primary" @click="test" icon="el-icon-refresh">测试</el-button>
			</div>
		</div>
		<div>
			<h5>U8服务器信息</h5>
			<base-form ref="serverFormRow" :formRow="serverFormRow" style="padding: 10px 30px;" :isFunBtn="false">
			</base-form>
		</div>
		<div style="text-align: right;">
			<el-button type="primary" @click="submit">提交</el-button>
		</div>
	</div>
</template>

<script>
	import baseForm from "@/components/base/baseNewForm/index.vue";
	// import {getToken} from '@/api/apis/auth.js'
	import configData from './configData'
	import {
		getData,
		saveData,
		dataTest
	} from '@/api/apis/database.js'
	export default {
		name: 'databaseIndex',
		components: {
			baseForm
		},
		data() {
			return {
				dialogVisible: true,
				dataFormRow: configData.dataFormRow,
				serverFormRow: configData.serverFormRow,
				loginForm: {
					baseLoginCode: '',
					baseLoginPwd: ''
				},
				loginType: false
			}
		},
		created() {},
		mounted() {
			// document.onkeydown = function() {
			// 	if (window.event && window.event.keyCode == 123) {
			// 		alert("F12被禁用");
			// 		// event.keyCode = 0;
			// 		event.returnValue = false;
			// 	}
			// 	if (window.event && window.event.keyCode == 13) {
			// 		window.event.keyCode = 505;
			// 	}
			// 	if (window.event && window.event.keyCode == 8) {
			// 		alert(str + "\n请使用Del键进行字符的删除操作！");
			// 		window.event.returnValue = false;
			// 	}
			// }
			// document.oncontextmenu = function(event) {
			// 	if (window.event) {
			// 		event = window.event;
			// 	}
			// 	try {
			// 		var the = event.srcElement;
			// 		if (!((the.tagName == "INPUT" && the.type.toLowerCase() == "text") || the.tagName == "TEXTAREA")) {
			// 			return false;
			// 		}
			// 		return true;
			// 	} catch (e) {
			// 		return false;
			// 	}
			// }
		},
		methods: {
			baseLogin() {
				if (this.loginForm.baseLoginCode == configKey.baseLoginCode && this.loginForm.baseLoginPwd == configKey
					.baseLoginPwd) {
					this.loginType = true
					this.dialogVisible = false
					this.getData()
				} else {
					this.$vmNews("账号或者密码不正确")
				}
			},
			handleClose() {
				for (let i in this.loginForm) {
					this.loginForm[i] = ""
				}
			},
			//获取数据源信息，回显数据
			async getData() {
				let dataParameter = this.getForm(this.dataFormRow)
				let serverParameter = this.getForm(this.serverFormRow)
				const res = await getData()
				this.form = res.data[0]
				this.setForm(dataParameter, res.data[0], "databaseForm")
				this.setForm(serverParameter, res.data[0], "serverFormRow")
			},
			setForm(form, data, keys) {
				form.forEach((el, index) => {
					this.$refs[keys].getField(el, data[el])
				})
			},
			getForm(form) {
				let formArray = []
				form.forEach(el => {
					el.elCol.forEach(item => {
						formArray.push(item.prop)
					})
				})
				return formArray
			},
			//测试
			async test() {
				if (!this.loginType) {
					this.$vmNews("暂未登录")
					return
				}
				let params = {

					...this.$refs.databaseForm.ruleForm,
				}
				delete params.message
				const res = await dataTest(params)
				this.$refs.databaseForm.getField("message", res.message)
			},

			async submit() {
				if (!this.loginType) {
					this.$vmNews("暂未登录")
					return
				}
				let params = {
					...this.$refs.databaseForm.ruleForm,
					...this.$refs.serverFormRow.ruleForm
				}
				delete params.message
				let res = await saveData(params)
				if (res.success === 'true') {
					this.$vmNews('提交成功', 'success')
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.database-container {
		width: 900px;
		margin: 10px;
	}

	.databasebox {
		&-title {
			width: 100px;
		}
	}
</style>
