<template>
  <view class="edit-pwd">
    <LoginInput title="新密码" v-model:value="pwdInfo.newPassword" place="请输入新密码" :password="!isOpenEyes">
      <view class="right-eyes" @tap="isOpenEyes = !isOpenEyes">
        <image :src="eyeImg[isOpenEyes ? 1 : 0]" mode="scaleToFill" />
      </view>
    </LoginInput>
    <LoginInput
      title=""
      v-model:value="pwdInfo.confirmPassword"
      place="请再次输入新密码"
      pd="0 50rpx 50rpx 50rpx"
      :password="!confirmOpenEyes"
    >
      <view class="right-eyes" @tap="confirmOpenEyes = !confirmOpenEyes">
        <image :src="eyeImg[confirmOpenEyes ? 1 : 0]" mode="scaleToFill" />
      </view>
    </LoginInput>
  </view>
  <JButton pd="0 50rpx 50rpx 50rpx" @HandleTouch="save">确认</JButton>
</template>

<script setup>
import { ref, reactive } from "vue"
import LoginInput from "@/components/newComponents/LoginInput/LoginInput.vue"
import JButton from "@/components//newComponents/JButton/JButton"
import { Base64 } from "js-base64"
import { $retrievePassword, $getPasswordRules } from "@/http/apiManager.js"
import { onLoad } from "@dcloudio/uni-app"
const eyeImg = reactive(["/static/loginImg/login-eye-close.svg", "/static/loginImg/login-eye-open.svg"])
const isOpenEyes = ref(false)
const confirmOpenEyes = ref(false)
const pwdInfo = ref({})

onLoad((options) => {
  pwdInfo.value.verificationCode = options.verificationCode
  pwdInfo.value.phone = options.phone
  getPasswordRules()
})
function getPasswordRules() {
  $getPasswordRules().then((res) => {
    pwdInfo.value.rules = new RegExp(res.bizData.regexpRules)
    pwdInfo.value.ruleText = res.bizData.errTips
  })
}

function save() {
  if (pwdInfo.value.newPassword !== pwdInfo.value.confirmPassword) return errorMsg("两次输入密码不一致")
  if (!pwdInfo.value.rules.test(pwdInfo.value.newPassword) || !pwdInfo.value.rules.test(pwdInfo.value.confirmPassword))
    return errorMsg(pwdInfo.value.ruleText)
  $retrievePassword({
    phone: Base64.encode(pwdInfo.value.phone),
    code: Base64.encode(pwdInfo.value.verificationCode),
    newPwd: Base64.encode(pwdInfo.value.confirmPassword),
  }).then(() => {
    uni.reLaunch({
      url: "./login",
    })
    uni.showToast({
      icon: "none",
      title: "密码修改成功",
    })
  })
}
const errorMsg = (err) => {
  return uni.showToast({
    title: err,
    icon: "none",
  })
}
</script>

<style scoped lang="scss">
image {
  width: 36rpx;
  height: 36rpx;
}
.right-eyes {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 110rpx;
  height: 110rpx;
  background-color: transparent;
}
</style>
