<template>
	<view class="edit-password">
		<uni-nav-bar :fixed="true" background-color="rgba(214, 240, 255, 0.0)" status-bar rightWidth="300">
			<block slot="left">
				<view class="uni-nav-bar-text" @click="back">
					<text class="iconfont icon-fanhui"></text>
				</view>
			</block>
		</uni-nav-bar>
		<view class="edit-main">
			<!-- 占位---不可删除 -->
			<view class="seize-seat"> </view>

			<view class="content-main box-shaow-box">
				<view class="content_header">修改密码</view>
				<view class="input-content">
					<!-- <input type="text" class="uni-input" v-model="user.user" disabled="true" > -->
					<uni-forms ref="form" :modelValue="formData" :rules="rules">
						<uni-forms-item>
							<uni-easyinput class="uni-input" v-model="user.user" :disabled="true"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item name="oldPd">
							<uni-easyinput type="password" class="uni-input" placeholder="原密码" v-model="formData.oldPd">
							</uni-easyinput>
						</uni-forms-item>
						<uni-forms-item name="newPd">
							<uni-easyinput type="password" class="uni-input" placeholder="新密码(密码必须为字母、数字，6-18个字符，区分大小写)"
								v-model="formData.newPd">
							</uni-easyinput>
						</uni-forms-item>
						<button type="primary" class="uni-btn" @click="clickEdit">
							保存
						</button>
					</uni-forms>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import getDateTime from "@/common/getdateTime.js";
	import {
		Base64
	} from "js-base64";
	import {
		addLog,
		getLogContent,
		LOG_TYPE_ENUM,
	} from "@/utils/IoReadingAndWriting.js";

	import {
		SYNCHRONIZE_DATA_PAD,
		createFileWithPlusIO,
		USER_FILE_NAME,
	} from "@/utils/systemCofig";
	import userApi from '@/api/user.js'
	export default {
		data() {
			return {
				user: {},
				personList: [],
				formData: {
					oldPd: "",
					newPd: "",
				},
				rules: {
					oldPd: {
						rules: [{
							required: true,
							errorMessage: "请输入原密码",
						}, ],
					},
					newPd: {
						rules: [{
								required: true,
								errorMessage: "请输入新密码",
							},
							// 进行长度验证
							{
								minLength: 6,
								maxLength: 18,
								errorMessage: "更新失败，密码必须为字母、数字，{minLength}-{maxLength}个字符，区分大小写",
							},
						],
						label: "新密码",
					},
				},
			};
		},
		onNavigationBarButtonTap(val) {
			uni.navigateBack();
		},
		onShow() {
			const value = this.$store.state.now_user;
			console.log(value, '----')
			if (value) {
				this.user = value;
			}
			const val = uni.getStorageSync("user_data");
			if (val) {
				this.personList = JSON.parse(val);
			}
		},
		methods: {
			back() {
				uni.navigateBack();
			},
			// 退出登录
			logOut() {
				uni.removeStorage({
					key: "now_user",

				});
				// uni.clearStorage(); //测试将所有缓存清除
				uni.navigateTo({
					url: "/pages/login/login",
				});
			},
			clickEdit() {
				this.$refs.form
					.validate()
					.then((res) => {
						// 输入密码与该账号密码一致
						userApi.changePwd({
							userId: this.user.userId,
							userName: this.user.user,
							oldPwd: this.formData.oldPd,
							newPwd: this.formData.newPd
						}).then((res) => {
							if(res.data){
								uni.showToast({
									title: "恭喜您，密码更新成功！",
									icon:"none",
									duration: 3000,
								});
								const logContent = getLogContent(
									LOG_TYPE_ENUM.updatePassword,
									"",
									"其他"
								);
								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) => {});
								this.logOut();
							}else{
								uni.showToast({
									title: res.msg,
									icon: "error",
									duration: 3000,
								});
							}
							
						});

					})
					.catch((err) => {});
			},
		},
	};
</script>

<style lang="less" scoped>
	.uni-easyinput__placeholder-class {
		font-size: 14px !important;
	}

	.edit-password {
		width: 100%;
		height: 100%;
		background-image: linear-gradient(90deg,
				#e9f7fe 0%,
				#dceffe 40%,
				#d5ebfd 66%,
				#c9e8fe 100%);

		.edit-main {
			margin-top: -44px;

			width: 100%;
			// height: calc(100vh - 90px);
			// background-image: linear-gradient(
			//   0deg,
			//   #f3f6fa 0%,
			//   rgba(130, 153, 238, 0.73) 49%,
			//   #5474e8 100%
			// );
			background-size: 100% 40rpx;
			background-repeat: no-repeat;

			.content-main {
				height: calc(100vh - 44px - var(--status-bar-height) - 20px);
				width: 95%;
				margin: 0 auto;
				padding: 20px 30px 30px 20px;
				background: #fff;

				.content_header {
					padding-left: 5px;
					height: 18px;
					line-height: 18px;
				}

				.input-content {
					display: flex;
					justify-content: center;
					margin-top: 29.41rpx;

					.uni-input {
						width: 400px;
					}

					.uni-btn {
						width: 400px;
					}
				}
			}
		}

		.seize-seat {
			height: 50px;
			width: 100%;
			background-image: linear-gradient(90deg,
					#e9f7fe 0%,
					#dceffe 40%,
					#d5ebfd 66%,
					#c9e8fe 100%);
		}

		// 导航栏样式
		.uni-nav-bar-text {
			height: 36px;
			width: 36px;
			background: #ffffff;
			border: 0.4px solid rgba(224, 224, 224, 1);
			border-radius: 18px;
			border-radius: 50%;
			color: #333;
			text-align: center;

			.iconfont {
				font-size: 20px;
				line-height: 36px;
			}
		}
	}
</style>