<template>
	<!-- 登录页 -->
	<view class="content">
		<view class="login_wrap">
			<view class="top-module">
				<image src="@/static/logo.png" mode="aspectFit" alt="" />
				<view class="title">杭州内网监管在线-运维在线</view>
			</view>
			<view class="form_wrap">
				<view class="input_wrap">
					<uni-easyinput class="log-input" clearSize="0" v-model="person.account" prefixIcon="person"
						placeholder="用户名"></uni-easyinput>
					<uni-easyinput v-if="passwordVisible" class="log-input" prefixIcon="locked" clearSize="0"
						v-model="person.pwd" @iconClick="togglePasswordVisible" :placeholder="passwordPlaceholder"
						:passwordIcon="false" :type="passwordVisible ? 'text' : 'password'"></uni-easyinput>
					<uni-easyinput v-else class="log-input" prefixIcon="locked-filled" clearSize="0" v-model="person.pwd"
						@iconClick="togglePasswordVisible" :placeholder="passwordPlaceholder" :passwordIcon="false"
						:type="passwordVisible ? 'text' : 'password'"></uni-easyinput>
				</view>
				<view class="login_btn" @click="login">
					<view class="login_btn_text"> 登录 </view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import userApi from "@/api/user.js";
	import logApi from "@/api/log.js";
	import SqlliteDbUtil from "@/utils/sqllitedb";
	import table from "@/api/sqllite/table.js";
	import {
		getUserList
	} from "@/utils/systemCofig";
	import {
		LOG_TYPE_ENUM,
		getLogContent,
		addLog,
		readLogData,
	} from "@/utils/IoReadingAndWriting.js";
	export default {
		components: {},
		data() {
			return {
				person: {
					account: "", // "管理员",
					pwd: "" // Gly@124",
				},
				backButtonPress: 0,
				personList: [],
				passwordVisible: false, // 是否显示密码
				db: null,
			};
		},
		computed: {
			// 动态密码输入框 placeholder
			passwordPlaceholder() {
				return this.passwordVisible ? "密码" : "********";
			},
		},

		created() {},
		onShow() {},
		async mounted() {},
		// 定义返回退出
		onBackPress(options) {
			this.backButtonPress++;
			if (this.backButtonPress > 1) {
				uni.setStorageSync("oper_record", this.$store.state.oper_record);
				uni.setStorageSync("all_data", this.$store.state.all_data);
				uni.setStorageSync("now_user", this.$store.state.now_user);
				uni.setStorageSync(
					"last_time",
					this.$store.state.now_user.LastSynchronizationTime
				);
				plus.runtime.quit();
			} else {
				plus.nativeUI.toast("再划一次退出应用");
			}
			setTimeout(function() {
				this.backButtonPress = 0;
			}, 1000);
			return true;
		},
		methods: {
			// 切换密码显示/隐藏
			togglePasswordVisible() {
				this.passwordVisible = !this.passwordVisible;
			},
			// 点击登录
			async login() {
				userApi.login(this.person).then((res) => {
					if (res.data) {
						this.personList = res.data;
						this.$store.commit("SET_USER", this.personList);
						uni.setStorageSync("now_user", this.personList);
						uni.setStorageSync(
							"last_time",
							this.personList.LastSynchronizationTime || ""
						);
						const logContent = getLogContent(
							LOG_TYPE_ENUM.login,
							"",
							"其他"
						);
						this.$logApi.addlog(logContent)
						const log_list = this.$store.state.log_list;
						log_list.push(logContent);
						this.$store.commit("SET_LOG_LIST", log_list);
						addLog(log_list).then((res) => {});
						uni.navigateTo({
							url: "/pages/home/home",
						});
					} else {
						uni.showToast({
							title: "账号密码错误，请重新输入",
							icon: "none",
							duration: 2000,
						});
					}
				});
			},
		},
	};
</script>

<style scoped lang="less">
	.content {
		width: 100vw;
		height: 100vh;
		// background-color: red;
		background-image: url("../../static/img/logbg.png");
		background-size: 100% 100%;
		background-repeat: no-repeat;
		display: flex;
		justify-content: center;
		align-items: center;

		.top-module {
			width: 350px;
			margin-bottom: 48px;
			text-align: center;

			image {
				width: 88px;
				height: 88px;
			}

			.title {
				font-size: 26px;
				color: #000000;
				line-height: 34px;
				text-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
			}
		}

		.login_wrap {}

		.log-input {
			width: 350px;
			margin-bottom: 24px;
			background: #fff;
			color: #4a4a4a;
		}

		/deep/.is-input-border {
			border-radius: 2px !important;
			height: 40px !important;
		}

		/deep/.uni-easyinput__content {
			background-color: rgba(0, 0, 0, 0) !important;
		}

		/deep/.uni-easyinput__placeholder-class {
			color: #4a4a4a;
		}

		/deep/.is-focused {
			border: 1px solid #4a4a4a !important;

			.uniui-eye-filled {
				color: #4a4a4a !important;
			}

			.uniui-eye-slash-filled {
				color: #4a4a4a !important;
			}
		}

		/deep/.uni-input-input {
			color: #4a4a4a !important;
		}

		/deep/.uniui-clear {
			color: #4a4a4a !important;
		}

		.login_btn {
			background: #3774f6;
			box-shadow: 0px 2px 14px 0px rgba(51, 104, 246, 0.24);
			border-radius: 3px;

			.login_btn_text {
				width: 350px;
				height: 40px;
				background-color: #3774f6;
				box-shadow: 0px 1px 4px 0px rgba(84, 116, 232, 0.16);
				border-radius: 2px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #fff;
			}
		}
	}
</style>