<script setup>
import { ref, reactive } from 'vue'
import { showToast } from 'vant'
// import { updatePassword } from '~/utils/my'
import { getAssetsImages } from "~/utils/getAssets"
import { useRouter } from 'vue-router';
import { user } from '~/store/index'
const router = useRouter();

let fromZlb = localStorage.getItem('fromZlb') === '1'
//back
const onClickLeft = () => {
  router.push('/main/personal/setting');
}

const changePasFrom = ref({
  oldPwd: '',
  newPwd: '',
  confirmPwd: ''
})
const showOldPwd = ref(false)
const showNewPwd = ref(false)
const showConfirmPwd = ref(false)

const rules = [
  { required: true, message: '请输入旧密码' },
  { required: true, pattern: /^(?=.*[a-zA-Z])(?=.*\d)[^]{8,16}$/, message: '密码格式不正确' }
]

let popupShow = $ref(false)

const onSubmit = () => {
  var reg_pwd = /(?=.*[a-z_])(?=.*\d)(?=.*[^a-z0-9_])[\S]{8,}/i;
  try {
    if (!changePasFrom.value.oldPwd) {
      showToast('请填写旧密码')
      return
    }
    if (!changePasFrom.value.newPwd) {
      showToast('请填写新密码')
      return
    }
    if (!reg_pwd.test(changePasFrom.value.newPwd)) {
      showToast('新密码必须是8位以上的数字字母混合,允许密码包含特殊符号')
      return
    }
    if (!changePasFrom.value.confirmPwd) {
      showToast('请再次填入新密码')
      return
    }
    if (changePasFrom.value.newPwd !== changePasFrom.value.confirmPwd) {
      showToast('两次密码不一致')
      return
    }
    let params = {
      user_main: {
        user_password_old: changePasFrom.value.oldPwd,
        user_password_new: changePasFrom.value.newPwd
      }
    }
    request({
      url: "/user/main/reset_my_password",
      data: params,
    })
      .then((res) => {
        if (res.code == "1") {
          popupShow = true
          changePasFrom.value.oldPwd = ''
          changePasFrom.value.newPwd = ''
          changePasFrom.value.confirmPwd = ''
          // onClickLeft();
        }
      })
      .catch((err) => { console.log('err', err); })
  } catch (error) {
    // 错误处理
    console.error(error)
  }

}

function clickConfirmButton() {

  user.value = {}
  router.push('/login');
}

</script>

<template>
  <div>
    <van-nav-bar title="修改密码" left-text="" :left-arrow="!fromZlb" fixed placeholder @click-left="onClickLeft" />
    <div class="mt-10px box-border px-1/20">
      <van-form @submit="onSubmit">
        <van-field v-model="changePasFrom.oldPwd" type="text" name="旧密码" placeholder="请输入旧密码"
          class="h-50px flex flex-nowrap  items-center border-b border-[#e5e5e5] singlePart" />
        <van-field v-model="changePasFrom.newPwd" :type="showNewPwd ? 'text' : 'password'" name="新密码" placeholder="请输入新密码"
          :right-icon="showNewPwd ? 'eye' : 'closed-eye'" @click-right-icon="showNewPwd = !showNewPwd"
          class="h-50px flex flex-nowrap  items-center border-b border-[#e5e5e5] singlePart" />
        <van-field v-model="changePasFrom.confirmPwd" :type="showConfirmPwd ? 'text' : 'password'" name="确认密码"
          placeholder="请再次输入新密码" :right-icon="showConfirmPwd ? 'eye' : 'closed-eye'"
          @click-right-icon="showConfirmPwd = !showConfirmPwd"
          class=" h-50px flex flex-nowrap  items-center border-b border-[#e5e5e5] singlePart" />
        <div class="mt-8 box-border px-6">
          <van-button type="primary" color="#154A9A" block native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>

    <!-- 成功弹出框 -->
    <van-popup style="border-radius: 16px;" :close-on-click-overlay="false" v-model:show="popupShow">
      <div class="popupDiv">
        <div style="display: flex;justify-content: center;"><img :src="getAssetsImages('success.png')" /></div>
        <div style="text-align: center;">
          <span>密码重置成功，<br />请返回重新登录！</span>
        </div>
        <div class="conifrmButton" @click="clickConfirmButton()">
          确认
        </div>
      </div>
    </van-popup>

  </div>
</template>



<style lang="scss" scoped>
.popupDiv {
  width: 311px;
  height: 388px;
  background: #ffffff;
  border-radius: 16px;

  img {
    margin-top: 81.5px;
    width: 88.1px;
    height: 84px;
  }

  span {
    font-size: 14px;
    line-height: 20px;
    display: block;
  }

  .conifrmButton {
    margin: auto;
    margin-top: 40px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    color: white;
    width: 80px;
    height: 30px;
    background: #154a9a;
    border-radius: 3px;
  }
}</style>
