<template>
	<div class="systemInit">
		<el-dialog title="登录" center :visible.sync="dialogVisible" width="50%" :show-close="true"
			:close-on-press-escape="false" :close-on-click-modal="false" :before-close="handleClose" append-to-body
			class="dialogLogin">
			<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 class="database-container">
			<div class="data-set base-style">
				<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 class="message-set base-style">
				<h5>消息开关</h5>
				<base-form ref="messageForm" :formRow="messageFormRow" style="padding: 10px 30px;" :isFunBtn="false"
					:spanNumber="6" @switchChange="switchChange">
				</base-form>
			</div>
			<div class="online-set base-style">
				<h5>同时在线</h5>
				<base-form ref="onlineForm" :formRow="onlineFormRow" style="padding: 10px 30px;" :isFunBtn="false">
				</base-form>
			</div>
			<div class="token-set base-style">
				<h5>token</h5>
				<base-form ref="tokenForm" :formRow="tokenFormRow" style="padding: 10px 30px;" :isFunBtn="false">
				</base-form>
				<!-- <input type="file" ref="fileInput" id="fileInput" @change="onFileSelected"> -->
			</div>
			<div class="base-style submit">
				<el-button type="primary" @click="submitData">提交</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, initSet
} from '@/api/apis/database.js'
export default {
	name: 'systemInit',
	components: {
		baseForm
	},
	data() {
		return {
			imgSavePath: '',
			dialogVisible: true,
			dataFormRow: configData.dataFormRow,
			messageFormRow: configData.messageFormRow,
			onlineFormRow: configData.onlineFormRow,
			tokenFormRow: configData.tokenFormRow,
			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() {
			// 调用全局挂载的方法，关闭当前页
			this.$store.dispatch("tagsView/delView", this.$route);
			// 返回上一步路由
			this.$router.go(-1)

			for (let i in this.loginForm) {
				this.loginForm[i] = ""
			};

		},
		switchChange(val, index, indexRow, row) {
			if (row.prop == "email" && val == true) {
				this.messageFormRow[1].elCol[1].show = true
			} else {
				this.messageFormRow[1].elCol[1].show = false
			}
			// console.log(row, "switch");
		},
		//获取数据源信息，回显数据
		async getData() {
			let dataParameter = this.getForm(this.dataFormRow)
			let messageParameter = this.getForm(this.messageFormRow)
			let onlineParameter = this.getForm(this.onlineFormRow)
			let tokenParameter = this.getForm(this.tokenFormRow)

			const res = await getData({})
			this.form = res.data[0]
			this.setForm(dataParameter, res.data[0], "databaseForm")
			this.setForm(messageParameter, res.data[0], "messageForm")
			this.setForm(onlineParameter, res.data[0], "onlineForm")
			this.setForm(tokenParameter, res.data[0], "tokenForm")
		},
		setForm(form, data, keys) {
			form.forEach((el, index) => {
				this.$refs[keys].getField(el, data[el])

			})
		},
		getForm(formData) {
			let formArray = []
			formData.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)
		},
		onFileSelected(event) {
			const fileList = event.target.files;
			// fileList是一个FileList对象，可以通过下标获取其中的文件
			const file = fileList[0];
			// 获取文件的绝对路径
			const filePath = URL.createObjectURL(file);
		},
		async submitData() {
			if (!this.loginType) {
				this.$vmNews("暂未登录")
				return
			}
			let params = {
				...this.$refs.databaseForm.ruleForm,
				...this.$refs.messageForm.ruleForm,
				...this.$refs.onlineForm.ruleForm,
				...this.$refs.tokenForm.ruleForm,
			}
			delete params.message
			let res = await initSet(params)
			if (res.code == 1) {
				this.$vmNews('提交成功', 'success')
				this.$rou
			}
		},

		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')
				this.$router.push({
					path: "/",
				});
			}
		},
	}
}
</script>

<style lang="scss" scoped>
.dialogLogin {
	::v-deep .el-dialog {
		padding: 20px;
		border-radius: 10px;
		margin-top: 20vh;
		height: 30%;

	}

	::v-deep el-dialog__footer {
		margin-top: 30px;

	}
}

.systemInit {
	background: #eeeeee;
	width: 100%;
	height: 100vh;
	padding: 10px;
	overflow-y: auto;

	.database-container {
		width: 80%;
		margin: 0 auto;

		.base-style {
			padding: 15px;
			background: #ffffff;
			border-radius: 10px;
			margin-bottom: 10px;
		}

		.data-set {}

		.submit {
			background: #eeeeee !important;
			text-align: right;
		}
	}

}

.databasebox {
	border-radius: 10px;

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