<template>
  <view class="change-password">
    <view class="bg">
      <image
        class="bgImg"
        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/HomeBackground.png"
        mode="scaleToFill"
      />
    </view>
    <view class="Return" @click="onBack">
      <image
        class="ReturnImg"
        src="https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Return.png"
        mode="scaleToFill"
      />
    </view>
    <view class="title">修改密码</view>
    <view class="contentbox">
      <view class="content">
        <!-- 旧密码输入框 -->
        <view class="uni-input-wrapper" v-if="havaPassword">
          <input
            class="uni-input"
            v-model="oldPassword"
            placeholder="请输入旧密码"
            :password="showoldPassword"
          />
          <view>
            <img
              class="passwordImg"
              @click="changeoldPassword"
              :src="
                showoldPassword
                  ? 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Displaypassword.png'
                  : 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/notdisplaypassword.png'
              "
              alt=""
            />
          </view>
        </view>
        <text v-if="havaPassword" class="error">您的密码必须包含大小字母和数字，长度在6-16位之间</text>
        <text v-if="oldPasswordError == true && havaPassword == true" class="error-text">请输入正确的旧密码</text>
        <!-- 新密码输入框 -->
        <view class="uni-input-wrapper">
          <input
            class="uni-input"
            v-model="newPassword"
            placeholder="请输入新密码"
            :password="shownewPassword"
          />
          <view>
            <img
              class="passwordImg"
              @click="changenewPassword"
              :src="
                shownewPassword
                  ? 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Displaypassword.png'
                  : 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/notdisplaypassword.png'
              "
              alt=""
            />
          </view>
        </view>
        <text class="error">您的密码必须包含大小字母和数字，长度在6-16位之间</text>
        <text v-if="newPasswordErrorone" class="error-text">请输入合法的密码</text>
        <text v-if="newPasswordErrortwo" class="error-text">新密码和旧密码不能相同</text>
        <!-- 新密码输入框 -->
        <view class="uni-input-wrapper">
          <input
            class="uni-input"
            v-model="confirmPassword"
            placeholder="请重复输入新密码"
            :password="showconfirmPassword"
          />
          <view>
            <img
              class="passwordImg"
              @click="changeconfirmPassword"
              :src="
                showconfirmPassword
                  ? 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/Displaypassword.png'
                  : 'https://vv-1317974657.cos.ap-shanghai.myqcloud.com/util/notdisplaypassword.png'
              "
              alt=""
            />
          </view>
        </view>
        <text v-if="confirmPasswordError" class="error-text"
          >请确认两次输入的密码是否一致</text
        >
        <!-- 确认按钮 -->
        <view class="confirmBtn" @click="onConfirm"> 确认修改 </view>

        <!-- 忘记密码 -->
        <view class="forgetPassword">
          <text class="forgetPasswordText" @click="onforgetPassword">忘记密码？</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { goEasylogin, goEasylogout } from "../../../components/goEasyTool/tool.js";
import request from "../../../components/request.js";
export default {
  data() {
    return {
      oldPassword: "", //旧密码
      newPassword: "", //新密码
      confirmPassword: "", //确认密码
      showoldPassword: true, //旧密码是否显示
      shownewPassword: true, //新密码是否显示
      showconfirmPassword: true, //确认密码是否显示
      oldPasswordError: false, //旧密码错误
      newPasswordErrorone: false, //新密码错误
      newPasswordErrortwo: false, //新密码错误
      confirmPasswordError: false, //确认密码错误
      id: "", //用户id
      havaPassword: null, //是否有密码/false无密码/true有密码
      email: "", //邮箱
    };
  },
  onLoad() {
    uni.getStorage({
      key: "userinfo",
      success: (res) => {
        this.id = res.data.id;
        this.havaPassword = res.data.havaPassword;
        console.log(this.id, this.havaPassword);
        this.email = res.data.email;
      },
    });
  },
  onShow() {
    uni.getStorage({
      key: "userinfo",
      success: (res) => {
        this.id = res.data.id;
        this.havaPassword = res.data.havaPassword;
        console.log(this.id, this.havaPassword);
        this.email = res.data.email;
      },
    });
  },
  methods: {
    // 忘记密码
    onforgetPassword() {
      if (this.email === ""||this.email === null) {
        uni.showToast({
            title: "请先绑定邮箱再进行操作",
            icon: "none",
            duration: 2000,
          });
        return;
      }
      request({
        url: "user/forgetMail",
        method: "POST",
        data: {
          mailAddress: this.email,
        },
        userInfo: true,
      }).then((ress) => {
        if (ress.code === 200) {
          uni.showToast({
            title: "已向您的"+this.email+"邮箱发送密码重置邮件，请在邮箱中进行密码重置",
            icon: "success",
            duration: 5000,
          });
        }else{
          uni.showToast({
            title: ress.data,
            icon: "none",
            duration: 2000,
          });
        }
      }).catch(() => {
        uni.showToast({
            title: '网络错误',
            icon: "none",
            duration: 2000,
        });
      });
    },
    // 验证密码合法性
    validatePassword(password) {
      const regex = /^(?=.*[A-Z])(?=.*[a-z])(?=.*\d)[A-Za-z\d]{6,16}$/;
      return regex.test(password);
    },
    // 确认修改
    onConfirm() {
      this.oldPasswordError = false;
      this.newPasswordErrorone = false;
      this.newPasswordErrortwo = false;
      this.confirmPasswordError = false;
      if (this.email === ""||this.email === null) {
        uni.showToast({
            title: "请先绑定邮箱再进行操作",
            icon: "none",
            duration: 2000,
          });
        return;
      }
      if (this.oldPassword === "" && this.havaPassword == true) {
        this.oldPasswordError = true;
        return;
      }
      if (this.validatePassword(this.oldPassword) === false && this.havaPassword == true) {
        this.oldPasswordError = true;
        return;
      }
      if (this.validatePassword(this.newPassword) === false) {
        this.newPasswordErrorone = true;
        return;
      }
      if (this.newPassword === "") {
        this.newPasswordErrorone = true;
        return;
      }
      if (this.newPassword === this.oldPassword) {
        this.newPasswordErrortwo = true;
        return;
      }
      if (this.confirmPassword !== this.newPassword) {
        this.confirmPasswordError = true;
        return;
      }
      if (this.havaPassword) {
        uni.showLoading({
        title: "修改中...",
        mask: true,
      });
      goEasylogout(this.$goeasy);
      request({
        url: "user/updateUserInfo",
        method: "POST",
        data: {
          id: this.id,
          newPassword: this.newPassword,
          confirmPassword: this.confirmPassword,
          oldPassword: this.oldPassword,
        },
        userInfo: true,
      }).then((ress) => {
        console.log("修改调用返回", ress);
        if (ress.code === 200) {
          uni.showToast({
            title: "修改成功",
            icon: "success",
          });
          uni.setStorageSync("userinfo", ress.data);
          goEasylogin(
            this.$goeasy,
            String(ress.data.id),
            ress.data.headerIcon,
            ress.data.nickName
          );
          uni.hideLoading();
          //```````````````````````````````````````````````````````````````````````登录成功后跳转回原页面 或 首页
          uni.navigateBack({
            delta: 1,
          });
          //````````````````````````````````````````````````````````````````````
        } else {
          uni.hideLoading();
          uni.showToast({
            title: ress.data,
            icon: "none",
          });
        }
      });
      } else {
        uni.showLoading({
        title: "修改中...",
        mask: true,
      });
      request({
        url: "user/setPassword",
        method: "POST",
        data: {
          id: this.id,
          password: this.newPassword,
          confirmPassword: this.confirmPassword,
        },
        userInfo: true,
      }).then((ress) => {
        console.log("修改调用返回", ress);
        if (ress.code === 200) {
          uni.showToast({
            title: "修改成功",
            icon: "success",
          });
          uni.hideLoading();
          //```````````````````````````````````````````````````````````````````````登录成功后跳转回原页面 或 首页
          uni.navigateBack({
            delta: 1,
          });
          //````````````````````````````````````````````````````````````````````
        } else {
          uni.hideLoading();
          uni.showToast({
            title: ress.data,
            icon: "none",
          });
        }
      });
      }
    },
    //新密码显示/隐藏
    changenewPassword() {
      this.shownewPassword = !this.shownewPassword;
    },
    // 确认密码显示/隐藏
    changeconfirmPassword() {
      this.showconfirmPassword = !this.showconfirmPassword;
    },
    // 旧密码显示/隐藏
    changeoldPassword() {
      this.showoldPassword = !this.showoldPassword;
    },
    // 返回上一页
    onBack() {
      console.log(1);
      wx.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style scoped>
.bg {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  z-index: -1;
}
.bgImg {
  width: 100%;
  height: 100%;
}
.Return {
  position: fixed;
  left: 35rpx;
  top: 120rpx;
  width: 46rpx;
  height: 46rpx;
  z-index: 2;
}
.title {
  position: fixed;
  top: 120rpx;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 34rpx;
  color: #100e0f;
  font-weight: bold;
  z-index: 1;
}
.ReturnImg {
  width: 100%;
  height: 100%;
}
.contentbox {
  position: absolute;
  top: 200rpx;
  left: 0rpx;
  right: 0rpx;
  bottom: 0rpx;
}
.content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.uni-input-wrapper {
  width: 70%;
  display: flex;
  align-items: center;
  padding: 8rpx 13rpx;
  flex-direction: row;
  flex-wrap: nowrap;
  border-bottom: 1px solid #e5e5e5;
  margin-top: 60rpx;
}
.uni-input {
  height: 50rpx;
  padding: 15rpx 25rpx;
  line-height: 50rpx;
  font-size: 28rpx;
  flex: 1;
}
.passwordImg {
  width: 40rpx;
  height: 40rpx;
}
.error-text {
  color: red;
  font-size: 20rpx;
}
.error {
  color: #999;
  font-size: 24rpx;
}
.confirmBtn {
  width: 90%;
  height: 90rpx;
  background: linear-gradient(135deg, #00afb2, #4fcacd);
  color: #fff;
  text-align: center;
  line-height: 90rpx;
  font-size: 36rpx;
  border-radius: 50rpx;
  margin-top: 70rpx;
}
.forgetPassword {
  width: 90%;
  display: flex;
  justify-content: flex-end;
  margin-top: 40rpx;
}
.forgetPasswordText {
  color: #00afb2;
}
</style>
