<template>
  <view class="page-wrapper global-wrapper bgF2" v-if="flag">
    <JHeaderTitle title="修改密码" bgColor="#f2f2f2"></JHeaderTitle>
    <view class="origin-pwd">
      <LoginInput
        title="原密码"
        v-model:value="pwdInfo.oldPassword"
        bgColor="#fff"
        pd="30rpx 30rpx 20rpx 30rpx"
        place="请输入原密码"
        :password="!oldPasswordEyes"
        :rules="{ name: 'oldPassword', rule: 'REG_NotNUll' }"
      >
        <view class="right-eyes" @tap="oldPasswordEyes = !oldPasswordEyes">
          <image :src="eyeImg[oldPasswordEyes ? 1 : 0]" mode="scaleToFill" />
        </view>
      </LoginInput>
      <view class="forget" @tap="jumpPage">忘记原密码？</view>
    </view>
    <view class="edit-pwd">
      <LoginInput
        title="新密码"
        v-model:value="pwdInfo.newPassword"
        place="请输入新密码"
        bgColor="#fff"
        pd="50rpx 30rpx 30rpx 30rpx"
        :password="!isOpenEyes"
        :rules="{ name: 'newPassword', rule: 'REG_NotNUll' }"
      >
        <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="请再次输入新密码"
        bgColor="#fff"
        pd="0 30rpx"
        :password="!confirmOpenEyes"
        :rules="{ name: 'confirmPassword', rule: 'REG_NotNUll' }"
      >
        <view class="right-eyes" @tap="confirmOpenEyes = !confirmOpenEyes">
          <image :src="eyeImg[confirmOpenEyes ? 1 : 0]" mode="scaleToFill" />
        </view>
      </LoginInput>
    </view>
    <JButton pd="30rpx" @HandleTouch="editPwd.open()">确认修改</JButton>
  </view>
  <JPopup ref="editPwd">
    <JCard @confirm="confirm" title="确认修改" @tap.stop>
      密码修改成功后，当前账号将退出登录。重新登录需使用更新后的密码。</JCard
    >
    <JButton pd="0 30rpx 30rpx 30rpx" bgColor="rgba(255, 255, 255, 0.8)" color="#000" @HandleTouch="editPwd.close()"
      >取消</JButton
    >
  </JPopup>
</template>

<script setup>
import { ref, reactive } from "vue"
import { $modifyPwd, $getPasswordRules } from "../../http/apiManager.js"
import { onShow } from "@dcloudio/uni-app"
import JMainCard from "@/components//newComponents/JMainCard/JMainCard"
import LoginInput from "@/components//newComponents/LoginInput/LoginInput"
import JButton from "@/components//newComponents/JButton/JButton"
import JPopup from "@/components//newComponents/JPopup/JPopup"
import JCard from "@/components/newComponents/JCard/JCard"
import JHeaderTitle from "@/components/newComponents/JHeaderTitle/JHeaderTitle.vue"
import user from "@/hooks/user.js"
import { validateArray, clearRulesArray } from "@/hooks/rules"
import { Base64 } from "js-base64"
onShow(() => {
  flag.value = true
  getRules()
})
const eyeImg = reactive(["/static/loginImg/login-eye-close.svg", "/static/loginImg/login-eye-open.svg"])
const isOpenEyes = ref(false)
const confirmOpenEyes = ref(false)
const oldPasswordEyes = ref(false)
const editPwd = ref()
const pwdInfo = reactive({})
const flag = ref(true)
const rules = ref({})
const getRules = () => {
  $getPasswordRules().then((res) => {
    rules.value.rule = new RegExp(res.bizData.regexpRules)
    rules.value.ruleText = res.bizData.errTips
  })
}
const confirm = () => {
  if (validateArray(pwdInfo)) {
    if (pwdInfo.newPassword !== pwdInfo.confirmPassword)
      return uni.showToast({
        title: "两次密码输入不一致",
        icon: "error",
        mask: true,
      })
    if (!rules.value.rule.test(pwdInfo.newPassword))
      return uni.showToast({
        title: rules.value.ruleText,
        icon: "none",
      })
    uni.showLoading({
      title: "修改中",
      mask: true,
    })
    $modifyPwd({
      originalPwd: Base64.encode(pwdInfo.oldPassword),
      confirmPwd: Base64.encode(pwdInfo.newPassword),
    }).then((res) => {
      uni.hideLoading()
      uni.showToast({
        title: "修改成功",
        icon: "success",
        mask: true,
      })
      clearRulesArray()
      editPwd.value.close()
      user.logout()
    })
  }
}
const jumpPage = () => {
  flag.value = false
  uni.navigateTo({ url: "/pages/login/forgetPassword" })
}
</script>

<style lang="scss" scoped>
.page-wrapper {
  .origin-pwd {
    font-size: 33rpx;
    .forget {
      margin-left: 50rpx;
      font-size: 27rpx;
      color: $primaryColor;
    }
  }
}
.right-eyes {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 110rpx;
  height: 110rpx;
  background-color: transparent;
}
image {
  width: 36rpx;
  height: 36rpx;
}
</style>
